What Should You Know Before Using Svelte? (PART: 1)

It seems that, finally, we might have a great contender to join “the Big Three” of JavaScript frameworks: React, Angular and Vue. For some time now there has been some noise around Svelte - a free and open-source JavaScript framework written by Rich Harris. 

But should you use it? As always, deciding to go with a new tech-stack always bears some risks as making a bad choice sometimes can cost a lot. 

That’s why I put together some detailed info about this JavaScript framework and help you decide if it’s worth considering for your next projects in 2020.

In this part, I will give you some intro and focus on what makes Svelte different from other frameworks and what main features are provided. In the second part, we are going to consider what are the pros and cons of using Svelte usage for your project and what are possible risks and gains. 

What is Svelte? 

Svelte is, first and foremost, a compile-time framework. What it means is that Svelte is a compiler first and only then a framework. It compiles in primitive wrappers for standard VanillaJS operations, because unfortunately, not all browsers perform DOM manipulation in the same way.

So what is exactly, according to documentation, Svelte is proposing to us?

1. Less code (read: less potential bugs)
2. No virtual DOM (interesting!)
3. Truly reactive (let’s see how the reactiveness is implemented here...)

Let’s break these three down:

1. Svetle and less code

Let’s consider documentation examples and compare two code snippets:

Svelte

React

As you can see, we have more boilerplate in React to achieve the same goal!

In the case of Svelte, We don’t have unnecessary imports and no additional knowledge about events needed in this case. You can check the rest of the general functionalities implemented in examples - you will find that there is less code compared to other frameworks/libraries like React.

2. No virtual DOM with Svelte

So how can the modern frontend framework work without the Virtual DOM? In Svelte we have a generally new approach to this issue. 

We all know how and why Virtual DOM appeared:

Real DOM operations are too performant-expensive and that’s why virtual DOMs have been created. They consist of two phases: searching for changes and application of these changes - here we have less changes to apply and less load of our device. But Svelte implements another algorithm: on the step of compilation, it creates primitive low-level JS functions that contain all logic about what is under the hood what makes all magic happens.

(Primitive JS instructions)

More performant code, less re-renders from the box. Profit!

3. Svelte - true reactiveness

In Svelte there is no API for reactiveness, it is implemented on the language level. Reactivity is important for the application, to keep DOM and state consistent. To make a variable reactive we need just to put $: in a front of it. Let’s take a look at an example:

So… What do we have here?

Each time we add a number (in other words: modify the numbers array) Svelte will recalculate the result value of sum and change it. So here’s a convenient difference between Svelte and React. In React, we manipulate with renders by returning a new state this.setState method while using local state or changing existing props if when we use Redux or just pass another prop from the parent component.

What about styling?

As for the styling, we have styles scoped to the component, therefore we have some isolation mechanisms. As for out of the box we have a powerful, performant transition engine.

It seems that Svelte provides us with all modern tools to develop performant and beautiful apps. With Svelte we can write less code compared to other frameworks (with the same functional result!) topped with inbuilt state management and reactiveness with simple syntax. Also, the compiler is pretty performant compared to Virtual DOM.

In the second part, we are going to consider what are the pros and cons of using Svelte in your project and what are the possible risks and gains. 

And you? What do you think about Svelte?