From React to Svelte: A frontend for the future of work

For over a decade, I've been immersed in Javascript-based frontend development, predominantly within the React ecosystem. My experience ranges from classic React to Next.js and React Native. I was part of the pivotal transition from Backbone.js/Chaplin.js to React at Uber a decade ago and have since been a React advocate in various startups.

So it may come as some surprise to hear that when my Beyond Work interviewer asked, “If you could choose any language or framework for frontend, what would it be?” my answer was instant: “Svelte!” 

Their enthusiastic response and shared vision for using cutting-edge technology in building a platform for the future of work marked the beginning of a new chapter.

Why Svelte? Well, if you’re in the frontend ecosystem, you’ve probably already heard of Svelte. It has ranked first or second on the yearly State of JS reports for both interest and retention (losing by 1% on “retention” to Solid.js) due to both its performance and overall developer experience. It provides things like state management and intuitive reactivity out of the box, and its compiler-based approach makes it wicked fast.

Fast forward four months, and our team has successfully launched the first version of our platform's frontend using Svelte and SvelteKit. Here’s what I've learned:

• Svelte's simplified reactivity is real: Unlike hooks in React, Svelte offers a more intuitive way to handle reactivity, making coding simpler and more efficient. The compiler handles all of the dependencies, so the author can just focus on building reactive, responsive interfaces.
• Don’t fear two-way data binding: Svelte's two-way data binding is powerful, and cuts down on prop-and-callback drilling or having every component need to be hook-aware. It demands a clear understanding of when and how to use it effectively. If the data passed from parent to child is for display only, it is fine to pass that as a prop, but if that value could be changed by the child, binding is the way. Of course, if you find yourself needing to bind across your component tree, it might be time for…
• Minimalist stores streamline reactive global state: Transitioning from React’s context-based state management or large tools like Redux or MobX to Svelte’s store concept was challenging but rewarding, offering a fresh perspective on handling data. Instead of worrying about effective selector patterns and proper immutability so your hooks trigger correctly, Svelte encourages small, simple stores that can be combined, and lets the author leave subscription management up to the same magic that drives the rest of Svelte’s reactivity.

It’s never all roses: To be honest, it’s difficult to find much to complain about with Svelte, but there have been a few gotchas:

• Data Binding and Components: (Yeah, I’m including this in both the pros and cons.) Two-way binding is powerful, but can also be a gotcha. Because Svelte’s reactivity is so easy, it’s easy to mix up passing props by value vs binding the property’s value, particularly when “prop drilling” a value you want to be bound.
• Ecosystem: While folks are (generally) kind and quick to help on the Svelte Discord server, the overall ecosystem for Svelte is smaller. While it can perhaps be seen as a good thing that there aren’t 15 libraries one must evaluate to choose one, there may be only one or two for Svelte, and it might not be an active project. That’s not to blame OSS authors; it’s hard enough to build and maintain software for which you get paid, and if there isn’t a FAANG-like supporting your “free” software, it’s hard to keep up momentum. 

The future of the future: When it comes out, Svelte 5’s Runes introduce some exciting (and controversial) new features and concepts – most notably consolidating reactivity into both Svelte components and plain Typescript/Javascript files.

The great beyond: This journey has been more than just learning a new technology. It's about embracing change, which is crucial if we’re going to build a future Beyond Work. For anyone considering a switch or simply curious about the evolving landscape of frontend development, exploring Svelte will be both enlightening and empowering. Thankfully, Svelte’s documentation, tutorial and REPL (and the same for SvelteKit, the companion web app framework) make it easy to get started.

Have you experienced a similar transition, or are you considering one? What are your thoughts on the future of frontend development in tech startups? Feel free to share your insights, questions, or experiences in the comments below.