Why Web Developers need to try Svelte.

Is Svelte just another one of many new JavaScript Frameworks available today, or something harder to ignore?

You’ve probably heard of this new JavaScript framework at some point or another. Whether it be YouTube, your developer friends, or articles on Medium, it seems like there’s a lot of buzz around Svelte. So what is it and why is it so exciting?

JavaScript frameworks are nothing new to the industry and there certainly isn’t any shortage of them. However, though there might be hundreds or thousands of frameworks out there, most are fairly indistinguishable from one another and use similar methods and technologies. They also come with a variety of problems like bloat and the Virtual DOM (more about that here).

That said, Svelte is different in some pretty cool ways and is set to shake up the industry, for the better. I’ve been using it for a bit now and I have some thoughts I want to share on it’s implications on the industry. More importantly, I want to talk about whether you should use it for your own projects. Let’s get into it.

The Story

The story goes that Rich Harris, a former Graphics Editor at the New York Times, saw a flaw with the JavaScript frameworks of the day, they weren’t reactive. I don’t want to get sidetracked talking about reactivity for too long, but you can follow this link for an in depth explanation by Rich Harris. Basically, reactivity is the idea that if two components’ states rely on one another, when one updates, the other should know to update as well.

While other JavaScript frameworks handle state changes by re-rendering children and using a virtual DOM to check for changes, Harris got to work building a truly reactive JavaScript framework. Thus, Svelte was born, and has grown in popularity significantly since it’s initial release in 2016. As of now Svelte is regarded as the most loved JavaScript framework, and has the most satisfied developers working with it.

Why It’s Loved

It’s very hard to get 89% of developers to be satisfied with something, but that’s exactly what Svelte has managed to do. Through a combination of ease of use and powerful application performance, Svelte provides a wonderful developer experience.

Ease of Use

In traditional JavaScript Frameworks like React. Building a component is a somewhat tedious process. Here’s an example of a component called HelloWorld.jsx in React.

As you can see, React basically let’s you write HTML in your JavaScript file. It’s nice at first, because it’s a lot simpler than making your own element creation functions, but as simple as this component is, HelloWorld.svelte is simpler.

In Svelte, the idea is to get developers as close as possible to writing HTML, CSS, and JavaScript. This is a very basic example, but I’ll be doing a full deep dive into Svelte and it’s functionality, where we compare it to other frameworks feature by feature. It’s simplicity shines through compared to its competitors, which makes developing apps with Svelte, that much faster.

High Performance Code

React, Angular, Vue, and pretty much any other framework out there uses something called a virtual DOM to render your UI. Every time that a piece of the App’s state changes, the virtual DOM goes through the component tree, checking every component to see if its state has changed, and whether it should re-render it or not (more about that here).

The problem with this process is that it’s slow. Svelte, however, does not have a virtual DOM, and therefore doesn’t experience the same performance drop that other frameworks deal with. You might be wondering whether that performance is substantial, and to that I’d say yes it is. Here is it compared to React, Vue, and Angular on multiple tests:

If you’d like to check out these performance tests yourself and do your own comparisons, follow this link. The important takeaway here is that by ditching a virtual DOM and embracing true reactivity, there’s a ton of optimization benefits. Svelte apps have a lot more room for performance gains, especially in bigger apps.

So, what?

You might have heard it said that build time is more important that run time. Basically, the speed that you can build an app is more important than the overall performance of the app, at least in most cases. I can’t give a completely objective reason as to why developers love Svelte so much, but my guess is that it’s because Svelte lets you have both. If you can build an app in a fraction of the time, and increase your performance, it’s a win-win.

What it means for the Industry

Jobs

So Svelte is a cool new framework that would probably make building apps more enjoyable, but developers also need to make money. Because it’s a relatively new framework, Svelte jobs are actually a bit hard to come by. According to StackTrends, Svelte only has around 80 job listings online on a given day.

That’s quite daunting if you’re a Svelte developer and want to make a career out of it, good luck finding a suitable job posting. That said, time is on Svelte’s side, 80 job listings may not seem like a lot, but just last year, that number was twenty. Postings have increased and most likely will continue to increase exponentially, especially as more developers start to see serious benefits.

React has has 26k listings on a given day, exponentially higher than it’s initial release in 2013. Perhaps this popularity was made possible by Facebook’s (now Meta) corporate backing and reach, but I wouldn’t count Svelte out. It’s important to note that while Svelte started out as Rich Harris’ personal project, he has since been hired by Vercel, creator of Next.js, to work on Svelte full-time.

Apps

With the rise of frameworks, websites evolved from being mostly informational pages to being fully functional applications, with features you’d expect from a native app. With the rise of web assembly, it’s now even possible to get native performance from a web app by converting code into high-performance binaries that the web can understand.

But performance hasn’t increased in all areas. Front-end frameworks make building applications easier and enable a lot of cool features, but unfortunately they can actually be detrimental to your site’s performance. However, as we’ve seen with Svelte, it’s about as good as it gets when it comes to performance, as it’s basically the same as writing vanilla JavaScript to run natively in the browser.

Where frameworks previously had performance hits with scalability, that won’t be stopping developers in the future. This could lead to an adoption by the industry of Transitional Web Apps, which exist to bridge the gap between Server-Side Rendering and Client-Side Rendering. New Svelte-based meta-frameworks like Svelte-Kit seek to incorporate ideas like this into new open-source solutions for developers like you and I.

Caveats

Dependencies

As nice as Svelte is, there are some considerations to be made before using it to build your next big startup idea. The biggest of which is plain old support. Svelte is a big open-source project, but as it currently stands, Svelte is still in it’s infancy.

If you want to do routing in React, it’s very simple. You do npm i react-router and wrap everything in a container. Unfortunately, as of right now, Svelte doesn’t have an exact equivalent, routing can be a bit tricky to get setup.

This is because while the community around Svelte is big, with lots of contributors, but it’s nowhere near the size of React. On GitHub, React has 36k forks, whereas Svelte only has 2k. That’s nothing against Svelte, it just means it hasn’t gained as much traction as React. However, as it stands, the amount of third party dependencies and tools available to svelte developers is unfortunately low.

Framework

Whereas dependencies aren’t necessarily in Svelte’s control, the framework itself is. Having used Svelte I do see some issues while developing with it. Errors, for example, are a bit difficult. Some error messages are super specific and tell me exactly what I need to know, whereas others are completely ambiguous.

On top of that, when I then search for the error online, it’s hard to find a good example because there are so few developers encountering the same errors. This is in stark contrast to React where if I were to encounter an error, a quick Google search returns the answer in a couple clicks.

Does it matter?

As to whether these elements really impact developer experience to a serious degree, I’d have to say no. The issues with Svelte are just to be expected with newer frameworks, and will go away with some time. Routing for example can be implemented using Routify, which is constantly getting better. Errors are usually really good and I’m sure they’ll only get better over time.

If you’re having doubts about using Svelte because of these small issues, I’d say learn it anyway, or wait a few months until they’re gone.

Conclusion

To sum it all up, Svelte is really cool. It’s fast, lightweight, easy to use, and the only problem is that it’s new. I‘d go as far as to say it’s kinda the future. New and current frameworks have already taken notes from Svelte’s success and that’s not going to be changing anytime soon. If you want to do a little future-proofing on your front-end development skills, give Svelte a try.

Happy Coding Everyone!