What is Svelte?
Svelte is a new way to build web applications. It is similar to JavaScript frameworks such as React
and Vue. But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time,
rather than interpreting your application code at run time. This means you don't pay the
performance cost of the framework's abstractions, and you don't incur a penalty when your app first
loads.
Comparison of React with Svelte
1. Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)
2. Startup metrics
3. Memory allocation in MBs
Svelte 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.
4. Svelte doesn’t use virtual DOM 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.
5. 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 or this.setState or hooks.
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.
6. Svelte doesn’t need as many third–party tools
React 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.
7. 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, the web application loads faster, the responsiveness is flawless, and the bandwidth
costs are lowered.
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.
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. For now definitely not replacing other
frameworks in bigger companies’ tech stack, and Svelte developers are in very little demand.
