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:

1. Vue - 1.22 geometric mean
2. Svelte - 1.25 geometric mean
3. React - 1.74 geometric mean
4. 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:

1. Svelte - 1.05 geometric mean
2. Vue - 1.22 geometric mean
3. React - 1.56 geometric mean
4. 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.

1. Svelte - 1.40 geometric mean
2. Vue - 1.84 geometric mean
3. React - 2.38 geometric mean
4. 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