Helitha Rupasinghe

Posted on Jul 1, 2022 • Edited on Dec 11, 2022

Here's why I Recommend Svelte To Every New Web Developer In 2022

So how is Svelte any different from other frameworks like Angular, React, vue and why should we care? Let’s dive into that...

What is Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. - Official Svelte Website

Svelte is a component framework which brings reactivity to JavaScript itself with less code and more magic. As per Svelte docs, it compiles HTML, CSS and JS code at build time into highly-optimized vanilla JavaScript code that runs in a browser with minimal framework overhead.

Knowing this, you might be wondering if Svelte is something you should consider. But there are still a lot of questions to be answered. So let's see why you should give Svelte a chance.

Why Svelte?

Svelte builds on lessons learned from its predecessors like React: Vue and Angular. But that's not the point. What makes it different is the approach it takes and the advantages it hence provides which could be subtle and prominent based on your unique use case.

Advantages

Let discuss the advantages that Svelte offers:

No Virtual DOM

Being a compiler and getting rid of the VirtualDOM is the most important advantage of Svelte that facilitates many of the other advantages we will see below. The concept is becoming more popular which means that your components are compiled to JavaScript and the DOM doesn't need to update. Also, it takes up little memory as it complies in highly optimized, small bundles of Javascript.

Compiled to just VanillaJS

Svelte produces highly optimized vanilla JS with a very minimal overhead at runtime. This means small bundle sizes, a low memory footprint, and a blazing fast web-application. Check the performance benchmarks down below to see the difference.

Reduced Code

With Svelte there is no need for complex state management libraries. The boilerplate required for components is very minimal and quite similar to vanilla HTML/JS. Svelte also supports optional two-way bindings making it easier to build forms.

<script>
    let name = '';
</script>

<style>
    p{
        color: blue;
    }
</style>

<input bind:value={name} placeholder="enter your name">
<p>Hello {name || 'stranger'}!</p>

Truly reactive

Svelte brings reactivity to JavaScript itself where the DOM is automatically updated on state changes in any top-level variable on a component. Because of Svelte’s reactive nature, developers can write more concise code, which ultimately reduces the development timeline and cost. It also allows developers to implement the real business logic without getting stuck with code complexities.

Low Learning Curve

Unlike React or Angular, the learning curve for Svelte is quite low and you can get started writing Svelte apps in about 5 minutes. Everything is written using standard-compliant JavaScript/TypeScript, CSS, and HTML with some additional syntax for directives and template logic. The component API is simple and straightforward. The Svelte documentation is also quite good and easy to follow and anyone with basic Javascript knowledge can easily get started with a Svelte project.

Components pattern

Svelte follows a component first pattern which makes it ideal for building new web applications or for adding web components to existing applications. Styles are scoped to components by default making Svelte ideal for web components.

Built-in effects and animations

Svelte provides built-in animations and effects which makes it easier to build slick user interfaces and interactive visualizations. Well, the framework was originally created for building interactive graphics for The Guardian. This approach provides a much nicer developer experience than something like React and is way easier to use.

Here is a simple example in the offical Svelte tutorial which uses a transition effect:

<script>
    import { fade } from 'svelte/transition';
    let visible = true;
</script>

<label>
    <input type="checkbox" bind:checked={visible}>
    visible
</label>

{#if visible}
    <p transition:fade>
        Fades in and out
    </p>
{/if}

Built-in Reactive store

Svelte provides both mutable and immutable reactive stores out of the box making it easier to do more complex state management in your application. The stores support manual and automatic subscriptions and two-way bindings making them very flexible.

Let’s see an example of a writable store:

<script>
import { writable, derived } from 'svelte/store';

const name = writable('world');

const greeting = derived(
    name,
    $name => `Hello ${$name}!`
);
</script>

<h1>{$greeting}</h1>
<input bind:value={$name}>

<button on:click="{() => $name += '!'}">
    Add exclamation mark!
</button>

Multiple output targets

Being a compiler, it is easy to change output targets without having to change your component’s code. For example, Svelte supports server-side rendering out of the box by providing a compiler mode for it (dom vs ssr). There is even a NativeScript integration for Svelte that makes use of this flexibility to produce targets beyond dom and ssr.

Disadvantages

The advantages Svelte provides don't mean there are no downsides, every framework makes tradeoffs. The major downsides of Svelte are:

Small community

Because Svelte is quite new, it doesn’t yet have the kind of big community and developer fans that other frameworks enjoy. So you may not find as many tools or libraries as in React or as much help on Stack Overflow when you are stuck on some complex problem.

Tooling and packages support

When it comes to developer tools and packages, there are currently limited options available for Svelte developers to choose from. But as the community grows and more developers start to find Svelte amazing, this problem will fade out.

Lack of available jobs

Most companies are still looking for developers who are experienced with the major three front end frameworks but there are various, well-known early adopters of Svelte like IBM, Apple, Philips, GoDaddy, 1Password or The New York Times, just to name a few. You can find an extensive list of companies who are using Svelte at the bottom of the Svelte website.

Nevertheless, Svelte is fun to learn and many developers enjoy using Svelte especially for their own personal projects or small scale applications.

Comparisons to other frameworks (Level Of Use + Performance)

Asking you to start using Svelte in production is a lot, I know. So let's begin by outlining the reasons why you won't regret making this decision.

Level Of Use: Svelte, Angular, React and Vue.

If we look at the 2022 Developer Survey results:

75.28% of developers loved using Svelte.
68.19% of developers loved using ReactJS.
63.16% of developers loved using VueJS.
52.27% of developers loved using AngularJS.

The results show that Svelte has become a top performer in 2022 which is exciting!

To understand the gains of using Svelte, I will show you a benchmark test by Stefan Krause's. This test renders a table with four columns and 1000 rows. You select which frameworks to use and I've chosen Vue-v3.2.37: Svelte-v3.48.0, Angular-v13.0.0, React-v17.0.2:

Speed Test

In terms of speed, Svelte and Vue are quite similar and indeed the top performant in this category with Angular and React just behind. At the bottom of the table, we can see something called Geometric mean. The geometric mean is an indicator of overall performance and speed by a framework. From this, we can conclude the following category ranking:

Vue - 1.22 geometric mean
Svelte - 1.25 geometric mean
React - 1.74 geometric mean
Angular - 1.89 geometric mean

Startup Metrics

As you can see, Svelte performs very well. Vue.js a little less so, with React and Angular are just behind. From this, we can conclude the following category ranking:

Svelte - 1.05 geometric mean
Vue - 1.22 geometric mean
React - 1.56 geometric mean
Angular - 1.81 geometric mean

Memory Test

The memory test sees which framework takes up the least amount of memory for the same test. Let's jump into the results.

Again, Svelte is clearly on top. Vue and React are just behind while Angular (once again) is the least performing. From this, we can derive this category ranking.

Svelte - 1.40 geometric mean
Vue - 1.84 geometric mean
React - 2.38 geometric mean
Angular - 2.54 geometric mean

Conclusion

Without a doubt, the pros of using the Svelte framework outweigh the cons. Now Svelte might not be the perfect solution to every single problems you may have as a developer but it has a lot to offer. And if you are feeling adventurous, I’d recommend you also look at how Svelte works.

Useful Resources

https://svelte.dev/tutorial/basics
https://svelte.dev/docs
https://svelte.dev/examples/hello-world
https://svelte.dev/blog
https://www.youtube.com/watch?v=043h4ugAj4c

Top comments (13)

peerreynders • Jul 2 '22 • Edited

Please do yourself a favour and read:

the return to the server?!?

Frameworks designed around the Client-side Rendering use case are "Gen 2" and therefore on the verge of becoming legacy technology especially if they have painted themselves into a corner with some of their core design constraints.

"Gen 3" technology makes SSR a primary design concern; i.e. it isn't just added after the fact.

Now due to the enterprise investment Angular will stick around just like COBOL for internal applications, React has a (comparatively) massive install base already, while Vue needs to get past its current version 2 vs 3 fragmentation.

The legacy of those three will likely stick around for some time to come regardless of how well they adapt to the coming Gen 3 transition.

The rest will have to fight it out in terms of who can best adapt to the coming Gen 3 transition by appealing to the "Gen 2" familiarity of application maintainers while emerging Gen 3 solutions don't run circles around them.

Now I took a good look at Svelte even before most people were willing to do so due to lack of TypeScript support at the time. I liked what I saw and I agree that after learning HTML/CSS first, Svelte as a first framework is almost a natural transition.

However in it's design it still is primarily a CSR focused framework and more importantly it is very component centric (which ironically a VDOM based framework like Inferno can get away with and still be more performant). So while the framework may "compile away", the components don't and that imposes a certain rigidity on its approach—a logical consequence of a deliberately chosen trade-off.

Now I'm sure Svelte has made great strides since then, especially in regards to SvelteKit.

But one cannot ignore what else is going on.

Meta-frameworks like Astro make it possible to reuse your current (Gen 2) components inside a server-side routed application when you realize maybe you don't need that SPA. Once you're inside that environment and it turns out that there are some parts that are too heavy for what they do, you can gradually migrate over to a leaner framework perhaps even Svelte.

But now take into account that React is pretty much the incumbent technology when it comes to CSR and that a large portion of that community are JSX devotees, unwilling to give up "declarative UI" and "just JavaScript".

Then in the most recent State of JavaScript 2021 SolidJS came out of nowhere (which clearly could just be the result of an extremely vocal and active community however small it may be at the moment).

If you look at SolidJS it should become immediately apparent that it has "React-appeal" even though its components are setup functions, not render functions simply because it maintains the "declarative UI" and "just JavaScript" spirit (which could count against it for non-React developers). So if a React developer is going to migrate (for whatever reason) SolidJS has the immediate appeal of superficial familiarity.

And in my personal judgement SolidJS is much less constrained than Svelte which can give rise to novel architectural styles that go beyond components given that its finest level of composable granularity are the reactive primitives, not components (conceivably one could do something similar with Svelte Stores but those are simply not as convenient as "reactive statements" which Svelte developers will prefer to use and it still doesn't get rid of the design-time component boundaries at runtime).

So will SolidJS surpass Svelte at some point?

I have no way of knowing.

All I can see is that the incumbents are here to stay at least for a while; in the meantime the rest is in for a volatile ride while Gen 3 settles in.

Helitha Rupasinghe • Jul 2 '22

Thank you for posting this! 👍

Henrique Ramos • Jul 5 '22

Gotta agree on the Solid point. As a React developer, SolidJS seems much more natural than Svelte. Also, having to learn "SvelteScript" worries me a bit, even though Svelte's features play around with things that JS already has.

peerreynders • Jul 5 '22 • Edited

Don't get me wrong, the first hurdle for React devs is the whole render (React) vs. setup (SolidJS) function as a component thing:

Xuan Huang 黄玄

@huxpro

.@RyanCarniato this doesn't seem to work, is early return not a thing in @solid_js?

23:48 PM - 17 May 2022

And depending on where you are coming from the reactive primitives may take some getting used to (I was already somewhat acclimatized due to my RxJS, Vue, and Svelte exposure) but none of that is insurmountable.

Though apparently some React devs are allergic to the <Show /> and <For /> components (I think they're an improvement as I do tend towards a template style).

Peer Reynders

@peerreynders

@samiresua @jutanium @solid_js If I got this demo right:

`For` swaps entire DOM fragments while reactively updating the index within the fragment.

`Index` just reactively updates the element values without moving the DOM fragments (which is less work).

tinyurl.com/m328yb7c

22:01 PM - 19 May 2022

Interestingly Rich Harris ended up explaining how SolidJS works…

Rich Harris

@rich_harris

@RyanCarniato why? because conceptually, the Solid compiler is prepending each {...} expression with `() =>` — when you see it like this instead, everything starts to make sense:

return <div>Count: {() => count()}</div>;

const c = count();
<div>Count: {() => c}</div>

21:06 PM - 18 May 2022

David Di Biase • Jul 3 '22 • Edited

Hello! I think it's odd that Solid is left out of the list. If you're fairly comparing modern frameworks on speed, bundle size and memory, Solid outperforms Svelte on many (well actually most) of these key indicators despite being the smallest in downloads and use.

It would be fine if you were only discussing Svelte's qualities but half the article is focusing on comparing other frameworks. It seems a bit unjust to leave one of the options out. Your readers would likely want a fair comparison of the landscape.

Svelte however is a great option for writing frameworks let's just be accurate with our analysis and facts! Aside from that, I did enjoy this article immensely. Thank you for writing it.

Helitha Rupasinghe • Jul 4 '22

Thank you for your feedback!
I'll make the edit and add solid to our comparison.

Johan Heyvaert • Nov 17 '22 • Edited

I'm trying to decide which framework to use for new projects and I've compared Svelte and Solid. At first Solid seemed the best choice but when trying to make a POC I noticed that Solid has not yet much of a community and I'm really missing supporting packages that are mature enough. E.g. a UI lib, a translations lib.

Here is an overview of available packages: solidjs.com/ecosystem
It seems like a lot, but when you look into it, most of them seem unfinished and there aren't many developers on the project.

Svelte exists 5 years now (I think) and has a bigger community with quite a lot of helpful libraries in a more or less finished state.
Here is an overview of available packages: sveltesociety.dev/components

Therefore, at this moment, Svelte seems the obvious choice for us.

(I also looked at RiotJS but same argument; unfortunately it has even less supporting libs than Solid although it exists since 2015!)

mrVAa5eiym • Jul 6 '22

the title of the post is yet another sign of the toxic communication style that web development is heading towards. how can anyone recommend ONE UI library to EVERY new web developer? no wonder we are struggling so much to find new properly trained web developers