Why I'm Betting on Svelte JS

Over the last decade, the web development world has exploded with a range of new technologies coming onto the scene. Key to this explosion has been the growth of JavaScript as a full-featured, rock solid language. While I still hold some bad memories of the early days of JavaScript in the late '90s and early '00s, the language has undergone some great development to make it crucial to the frontend of modern, interactive web sites and applications (as well as native apps with Electron and the backend with NodeJS).

JavaScript frameworks also played a big role in the last decade's changes. Angular, React, and Vue have all gained their shares of fans, and have done a lot to move the frontend forward. Today, though, I want to write about a newer challenger to these established frameworks: Svelte. Svelte has quickly become my tool of choice for frontend development, and after reading this, hopefully you'll be motivated to give it a spin for yourself.

Svelte in a Nutshell

Technically, though I and most others compare Svelte to the aforementioned JavaScript frameworks, Svelte technically doesn't bill itself as a framework. Currently, Svelte's tagline is "cybernetically enhanced web apps," but it used to bill itself as the "disappearing framework."

So, what makes it different, and not a framework? The difference is that Svelte uses a compiler to take your code (created in files with a .svelte extension) and turn it into highly-optimized, bundled JavaScript. The frameworks mentioned above require a runtime to be downloaded by the end user on page load, which allows the JavaScript code written for that framework to be interpreted. This can add a lot of overhead and impact page performance. I'll tackle this in more depth later on in this post.

How I Discovered Svelte

I've been working on a project at work for awhile to create an internal web application backed by a database, to allow our team to manage data in a more defined, auditable way than using spreadsheets. Initially, this project started in late 2019 and the requirements were very basic and only needed to meet the needs of our team of five people. As such, I found the best option I could to get something rolled out very quickly, a Python library called Flask-AppBuilder. Basically, it builds upon the Flask Python library for web development, to add database and authentication functionality, and it allowed us to get a working, simple application up and running very quickly.

This served our small team very well for awhile, but as the calendar turned to 2021, it became clear there were some opportunities to build on the platform we had created, and to open it up to more people. As we looked to scale up to 100+ users and make this a bigger tool, it became clear that some improvements needed to be made. However, the technologies the frontend was built on included jQuery and an older version of Bootstrap CSS (version 3 - version 5 just recently came out).

At first, I tried my best to make these older technologies fit our needs, so that large chunks of the frontend would not need to be written. However, it soon became clear that those rewrites were needed, so the project could be built to last. In the meantime, I had been improving on my React skills with a project I was working on outside of work. I also had worked with Angular in the past, so that was an option to brush up on.

One night a few months back, though, while I was reading through some web development news, I came across the 2020 State of JS Survey. As I was reading through it, seeing what was new in the world of JavaScript, I saw Svelte pop up a couple times, including at the very top of the satisfaction rankings for frontend frameworks.

Intrigued, I started researching Svelte and found several articles bestowing high praise on it. I decided to take a stab at moving my ongoing side project from React to Svelte, as I hadn't gotten far enough into it that it would be a major headache to migrate. Still, I was a bit wary that this would be a case of chasing the latest web development "flavor of the month," and so I proceeded with cautious optimism and a readiness to return to React if need be.

Instead, I couldn't believe how easy it was to get up to speed with Svelte and get my project moved over. I haven't once looked back and feel like Svelte is what frontend development has needed all along.

What I Love

Whether you are experienced with a framework like React or brand new to modern frontend development, Svelte has something to offer you. Here are some of the biggest pluses in my book.

Fast, Efficient, and Well Thought Out

Svelte really holds onto the best parts of frontend frameworks of the last decade, while discarding the drawbacks. Svelte components are simply individual files of HTML, CSS, and JavaScript, and there are very few pieces to the JavaScript that are specific to Svelte. (Even $:, which Svelte leverages for reactivity is valid, though esoteric, JavaScript syntax). Unlike React, there's less to "un-learn" from traditional web development (in contrast to className in React's JSX, for example).

In addition to there being less to "un-learn," there's also less boilerplate to write. React components require quite a bit of extra code each time a component is created, in order to define the class or function.

Side note: I also feel like React is still somewhat stuck between class-based and functional components, which was a pain point for me when working with React. Their home page and tutorial are focused on classes, but it feels like most of the rest of the web and the React community have moved on to functions and hooks. I found that makes it somewhat difficult to hone in on best practices.

With Svelte, you pretty much get to dive right in and start writing your actual logic. It makes for code that takes less time to start writing, and code that's easier to go back and unpack later on (both for yourself and other collaborators). I recently returned from two weeks of paternity leave and was able to jump right back into my Svelte code at work without missing a beat or having to think back through the logic too much. I think that's partially a testament to Svelte's natural bent towards readable, clean, and concise code.

As a compiled framework, Svelte loses the overhead of needing to include a runtime interpreter like other frameworks do. Instead, Svelte compiles to vanilla JS files, that are optimized to "surgically update" the Document Object Model (see this post from Svelte creator Rich Harris for more on Svelte's approach to reactivity). This ensures speed and efficiency and eliminates the need for other libraries' use of a virtual DOM, as Svelte already knows exactly what changes will trigger the need for updates to the DOM, and where those updates need to take place.

What this also means is that Svelte is great in terms of respecting end-users by only sending them the JavaScript they need, and not the overhead of the full React interpreter, for instance. This is better for users on speed or bandwidth-restricted connections. As a developer, you get the benefits of Svelte's abstractions when building your webapp, and your users get the benefits of clean, vanilla JavaScript when running it.

Scoped Styles

This falls somewhat into the previous section, but I wanted to specifically call it out because it's one of my favorite parts of Svelte. Because a Svelte component file includes HTML, CSS, and JavaScript all together, the CSS is scoped to that specific component. I find it much easier to manage and keep track of styles in this way, rather than having a global CSS file that manages all components of the project (or having to reach for something like CSS-in-JS, which I prefer to avoid personally). The overall component workflow is probably the biggest reason I want to use Svelte in as many of my future projects as I can.

Flexibility

Because Svelte compiles down to pure JS, it's very easy to embed a little bit of Svelte into an existing application without having to rework the entire thing in one shot. This way, you can add some dynamic functionality to one part of the page, and you can also work through it piece-by-piece. This is what I've been able to do in moving my project at work over to Svelte.

Svelte also supports exporting Web Components, which are custom elements that can then be imported and used in any other project, whether that other project uses Svelte, another framework, or no framework at all.

Smooth Learning Curve

Check out the tutorial, probably the most well-designed programming tutorial I've ever seen. It is logically organized, and you learn by doing. The Svelte REPL, leveraged for the tutorial, is also a great space to use as a playground for the language and test things out. Within a day, I was hitting the ground running, and it took a matter of weeks to go on to migrate the work project I mentioned above to fully utilize Svelte for a full web application with a variety of components.

In addition to the tutorial, I've found the API documentation extremely thorough, especially considering the project does not have the large funding or sizable core team that React does.

Slots

Slots make it incredibly easy to dynamically insert HTML, or even other Svelte components, inside of a component. If you are familiar with Children in React, slots are similar, but you can have more than one, you can give them names, and you can have default fallback content if a slot is not filled by the parent component.

Batteries Included

I first saw the phrase "batteries included" in reference to programming when getting into Python a few years back. The phrase takes me back to being a kid on Christmas and not having to wait to use the new toys I got because the batteries were already in the box. In the case of programming, it means that we have a robust set of tools available to us by default to do many of the things we want to do without having to reach for third-party components.

Svelte includes a number of things out of the box that you might not expect. Here are a few examples:

• Stores: Svelte includes the concept of stores to manage state among many components. There is no need to reach for something like Redux in the case of React. Svelte offers both writeable and read-only stores, as well as derived stores (a store whose value is based on the value of one or more other stores). If those are not enough, there's even support for creating custom stores. Your Svelte components then subscribe to the stores to read or update as necessary.
• Animations, Transitions, and Motion: React has numerous third-party components you can pull in to handle animations and transitions, but in Svelte, these things are baked right into the core and are extremely easy to implement in your projects. Even deferred transitions, which allow for a transition to be coordinated between more than one element, are first-class citizens in Svelte. Svelte uses CSS rather than JS for transitions as much as possible, which also helps with performance and efficiency.
• Await block: Svelte makes it incredibly easy to handle asynchronous data by allowing for an {#await} block directly in your markup. You can define a placeholder, such as a spinning circle and loading text, and then have a {:then} section that only is reached once the promise you are awaiting has returned a value. This makes for a very clear and readable flow when fetching and rendering data asynchronously.
• Two-way binding: As a general rule, data flow is top-down in Svelte by default, just as it is with React. However, Svelte optionally supports two-way binding. Form elements and even whole components can pass variable changes back upwards to their parent components. While this should be used with great caution, it can be a helpful tool if a variable needs to be shared among a few components, but you don't require the full power of a writable store.

The Drawbacks

Nothing's perfect, so while I'm bullish on Svelte's future, there are a few things that are still a bit rough around the edges. It's not all sunshine and rainbows.

Language Extensions

Though most of the JavaScript written in .svelte files is standard, and Svelte compiles down to pure JavaScript, there are some Svelte-specific constructs you'll have to learn. While these changes and extensions to pure JavaScript are minimal, they do add a bit of friction that you'll need to account for.

Two-way Binding

I know I cited this as a positive above, but two-way binding can turn into a negative. With great power comes great responsibility, and it can be very tempting and easy to overuse two-way binding. This has the potential to transform a project into a mess very quickly, so be aware of this and consider using a store if things start to feel like they could get out of control with too much two-way binding.

Core Team Size and Funding

Svelte has some incredible people working on it, but the size and scale is just not there compared to more established frameworks. This will hopefully change in time, but you won't necessarily see the pace in development that you might with other frameworks and tools with more backing. Nobody is being paid directly to work on Svelte, though this can be viewed positively in some respects because there is not a large corporate entity to potentially influence the future direction of development.

Ecosystem Still Maturing

Svelte is still the new kid on the block, and as a result, there is not the depth of third-party components available like there is for other frameworks. That being said, the "batteries included" approach helps mitigate this, along with the fact that Svelte can play nicely with plain JS libraries since it compiles to plain JS. This opens up a much greater number of compatible external components.

In addition, Svelte is not in high demand yet for employers, so if you're looking for the best current technology for your career development, it's probably best to build your React or Vue knowledge for now. Svelte is still in the early adopter phase, and larger corporations for the most part are going to be more conservative and stick to technology that is more mature and established.

It feels like Svelte is building momentum and on the verge of a breakthrough, but it's not fully there yet. However, it's growing by the day, and the upcoming release of SvelteKit (a full framework for building Svelte apps, similar to React's Next.js, and currently in beta) should help push Svelte even further into the mainstream.

Moving Forward

As I mentioned earlier, I was able to quickly migrate the side project I was working on from React to Svelte, and as I got up to speed with Svelte, I also was able to rewrite the frontend for the project I was working on in my day job. The performance boost was immediately noticeable, and we now have a platform that we can build on and scale out beyond our small team. Furthermore, the straightforward process of learning Svelte made it easy to onboard another member of my team and get him up to speed with working on the frontend development along with me.

I'm excited to be aboard the Svelte bandwagon at a time where it seems like it's ready to take off. This website you're reading is also built using Svelte (look for more on that in some of my upcoming posts), and I've got a few other Svelte projects I'm just getting started on. If you weren't already familiar with Svelte, I hope this has helped give you a jumping-off point to learn more about this "disappearing framework," and perhaps to consider it for your next project.

For more great Svelte resources, check out their subreddit and Discord server, and follow the excellent, community-maintained @SvelteSociety account on Twitter.

Enjoyed this post? Consider buying me a coffee to fuel the creation of more content.