svelte

Are you on the fence in the Svelte vs React debate? You’re not the only one.

Nowadays, picking the best tool is a challenge, especially with all the conflicting voices screaming on the internet. We’re constantly attacked by headlines such as:

React is dead.

Svelte was dead before its development.

And then we see:

React will shape the future.

Svelte is the future.

In this article, we don’t want to side with one party or the other. Instead, we want to show when those tools are applicable and which circumstances make them shine bright like a diamond.

Remember that so far, there are no universal tools available that can solve every problem. So don’t choose the technology that’s trendy: choose the one that’ll solve your problem in the most efficient way.

React

React, being a much favored technology at MPC, has been already discussed several times. We’ve explained what is React in the first place, why React is a good choice, and how it differs from React Native. But let me give you a small reminder:

React is a JavaScript library dedicated to front–end development, specifically for building user interfaces made of reusable components. It was created by Facebook (original author: Jordan Walke) in 2011 for their own use and is maintained by them to this day. It was made open–sourced two years later and it quickly gained popularity. It’s particularly well–known for being fairly easy to learn, its extremely fast development, and a giant community of ready–to–help developers. One of its most famous features is Virtual DOM, which enhances performance of React apps.

What is it?

Svelte is one of the newest kids on the block. It was released in 2016, after analyzing its predecessors — React and Vue in particular. It was created by Rich Harris and is currently being maintained by Svelte core members. It’s used by the following companies: The New York Times, Avast, Spotify, Semrush, and Chess.

On its official website, Svelte is described as a component framework, but it resembles a compiler. It generates as small plain JavaScript code as possible to make the Svelte apps tiny and fast. It also ensures proper optimization.

Svelte is doing pretty well for itself, when it comes to its popularity. In the State of JS 2020 Survey, 86% of developers expressed their satisfaction in working with Svelte. In the more recent survey prepared by Stack Overflow in 2021, Svelte was chosen as the most loved framework by 71.42% of respondents — getting ahead of React (69.28%) and Vue (64.41%). But in general, Svelte is used less commonly than the other frameworks, so keep that in mind while looking at these numbers.

Why was it created?

Rich Harris is a creator of Ractive, a template–driven UI library developed with highly interactive apps in mind. It was originally created for The Guardian.

But Harris wasn’t exactly happy with that product. It didn’t solve one crucial problem — the high cost of shipping Javascript, which heavily influenced mobile users. To deal with that, Harris came up with an idea for a framework–like–compiler, which lessens the overhead code needed by Svelte apps.

Comparison of React and Svelte

Svelte is more performant

In this regard, Svelte dominates not only over React, but also over Angular and Vue. In all the tests — including speed test, startup test, and memory test — Svelte is a clear winner. Where does that blazing fast performance come from?

What gives Svelte such a significant edge is that it interprets the application code during build–time, instead of runtime. Additionally, because HTML, CSS, and JavaScript get compiled into tiny, highly–optimized bundles, the Svelte app receives business logic only. Other frameworks are forced to ship overhead framework code and force the browser to do the heavy–lifting, which slows everything down.

What also improves the performance is the lack of the Virtual DOM, surprisingly.

Svelte doesn’t use virtual DOM diffing

Virtual DOM is the winning card of React and one of its most important features, responsible for improved performance. It was so good it heavily inspired Vue.

That’s why it was very bold of Svelte to discard it.

But first, what is Virtual DOM?

It’s a virtual representation of the Document Object Model that serves as temporary memory storage for all the changes brought to the user interface.

With the real DOM, each change would trigger an update, slowing down the web apps. Virtual DOM, on the other hand, delays that process until it finds the most efficient way to update and render the real DOM — which is also called the reconciliation process or diffing.

Svelte disagreed that only with virtual DOM you can achieve great performance, and it managed to prove it. Diffing, while it can be effective, still requires a lot of work. So Svelte decided to skip that altogether.

When does the DOM get updated with Svelte? Whenever the state of the web applications changes due to the user’s input, for example. It’s an automated process that makes Svelte truly reactive.

Svelte is more reactive… or is it?

React isn’t fully reactive, although it tries to be. It certainly is declarative, meaning that instead of describing each step to reach a certain result, developers only need to describe the outcome. React handles the rest.

But if there are any changes of values, they won’t be automatically reflected in the DOM. React updates the components according to schedule. Without using this.setState or hooks, React won’t… well, react properly.

The thing is, Svelte also does a similar thing. It does update the DOM once a component’s stage changes, but only when it’s triggered by assignments. Until that point, all the changes are batched together. Sounds similar?

But there are also reactive declarations and variables to consider. Reactive declarations are responsible for automatically recomputing logic during each update. And reactive variables, once declared and changed, trigger other variables to change, if they’re related. It’s laughably easy to do, too — just by adding a dollar sign.

So is Svelte truly reactive? Probably as much as serverless doesn’t have any servers. Compared to React, reactivity is achieved easier, but similar things can be done with both technologies.

Svelte components are dealt with a bit differently

The way Svelte uses components (created in Svelte by making .svelte files) also differs from React.

First of all, you don’t have to do anything to export components — Svelte exports them on its own, automatically. With React, you had to do that manually.

Also, Svelte offers flexible styling, which is possible due to components being scoped in their style tags. And you don’t have to bother with writing unique classes, since Svelte generates them during the compile step. So worry about conflicts no more.

There are also some similarities — for example, passing data to child components and emitting data back to parents components may seem familiar.

Svelte doesn’t need as many third–party tools

React, being a very lightweight library focused on the view layer only, requires third–party tools for things like state management or to create amazing animations. This is not necessarily a bad thing — for small projects with little features, it might actually be perfect.

Still, it’s worth noting that Svelte has built–in effects, transitions, and animations that won’t increase the size of your app — which is a direct result of code compilation. Svelte loads only the needed parts.

Svelte also has several ways of dealing with state management. You can use:

Context API: when your components need to communicate and pass data around,
Svelte Stores: when your components need to communicate without passing too much data,
Writable Stores: when you want to make objects accessible for different components,
Readable Stores: when you don’t want the user to manipulate the data.

Svelte is more lightweight

The GZipped version of React is 42.2KB (including ReactDOM).

The GZipped version of Svelte is 1.6KB.

In this regard, Svelte is the undeniable winner. Because of its size, the web application loads faster, the responsiveness is flawless, and the bandwidth costs are lowered.

Svelte offers faster web development

React’s development pace is fast. Really fast. So fast it’s hard to keep up at times, which is often cited as one of its disadvantages.

Svelte’s development process is even faster. How’s that possible?

The generated code is more readable, simpler, and way shorter than React’s. You can achieve similar results with less code, without the fear of compromising the quality. This in turn means that the project is easy to maintain and even easier to debug. And if there are any new team members added to the Svelte project, they can quickly understand what’s happening and start working immediately.

Svelte is (slightly) easier to learn

The learning curve of both technologies is considered fairly easy. They both require a knowledge of HTML, CSS, and JavaScript. But Svelte once again managed to outdo React.

In React, one of the hurdles is JSX, an XML–like syntax to JavaScript meant for building user interfaces. Svelte uses an easier syntax and it has its own templating language that’s effortless to grasp.

So is Svelte better than React?

Svelte might seem wonderful — it’s easy and makes the development experience a breeze — but it’s still behind React in terms of popularity and usage. The biggest disadvantages of Svelte are:

Svelte doesn’t have as rich community

Because React is so popular, as proven by the influx of React apps, it has a giant community of passionate developers who make all sorts of tutorials and guides (often for free), and are readily available for brainstorming sessions. There’s also an abundance of tools for facilitating the development process, like React Developer Tools or Redux DevTools, which goes hand in hand with Redux.

Svelte can’t count on the same level of community support. The lack of plugins, integrations, and IDE support is particularly bothersome. There are very few fixed best practices that could serve as a guide. And if you stumble upon a problem, the small user base might not be able to help you out.

Svelte isn’t supported by a company

Doesn’t seem like a big deal? Well, it might be.

React is supported and maintained by Facebook, who uses it for its own purposes. They have the necessary funds to keep working on it. Moreover, there’s no fear that Facebook will suddenly switch to Angular, which is supported by Google. This makes React pretty much future–proof.

Svelte’s future isn’t as clear–cut. It’s being maintained by the community, but who knows how long their enthusiasm will last. It’s possible that Svelte will inspire another new technology that will take its place.

Svelte isn’t in common use in large–scale web

Svelte just recently matured enough for enterprise–scale applications.

This means that there are not too many use cases of Svelte in the wild. Only recently Radio France added Svelte to their tech stack, just like Scott Tolinski used it for his Level Up Tutorials platform. So far, other technologies are preferred by influential players, and so Svelte remains to be battle–tested. Its future, while hopeful, remains unknown.

Conclusion

Svelte offers a lot. Praised for its size, highly efficient imperative code, as well as blazing–fast performance, Svelte might seem like a serious competitor to technologies like React or Angular.

Unfortunately, Svelte still has a long way to go. So far, it’s best to use for building single–page–applications for those with lower internet connection or simple personal websites like blogs or portfolios. It’s definitely not replacing other frameworks in bigger companies’ tech stack, and Svelte developers are in very little demand.

For all its advantages, Svelte’s time to shine is yet to come. Look out, React! But don’t worry. For now, your crown stays in place.