What Should You Know Before Using Svelte?

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. 

Blogpost linking

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? 

Author: Shantun Parmar

2 thoughts on “What Should You Know Before Using Svelte?

  1. I’m just commenting to let you be aware of of the excellent discovery my cousin’s child enjoyed going through your blog. She discovered a wide variety of details, most notably how it is like to have a very effective coaching heart to get many more effortlessly fully understand certain complicated matters. You actually did more than my desires. I appreciate you for displaying such great, healthy, educational and also cool guidance on that topic to Evelyn.

  2. I enjoy you because of all of the effort on this blog. Betty delights in carrying out internet research and it’s easy to see why. A lot of people hear all about the compelling form you convey both interesting and useful guidelines by means of the blog and attract contribution from other individuals about this area and my child has always been becoming educated a great deal. Enjoy the remaining portion of the new year. You’re carrying out a dazzling job.

Thanks for your support, You may click on ads to encourage us which assits to writers.

Leave a Reply

Your email address will not be published.