We all know React, Vue, and Angular and how good they are for modern web development, but Svelte – a new challenger in this field – may not be familiar to everyone.
All the development tools available in today’s market are high-quality tools, and sometimes the choice to use one tool over another is more a matter of personal taste and passion than the result of an objective “this is better than that” assessment. However, Svelte’s potential is very impressive, leading some users to switch systems for previous projects written in React and Vue. Svelte is a top choice for developing SPAs and web projects; here are three fundamental features that explain why:
The need for Svelte: how Svelte differs from common front-end frameworks
If Svelte were simply an alternative to the big three libraries, it probably would have been short-lived. The genius of Svelte lies primarily in its innovation – let’s take a closer look at what this means in practice.
1- A library? You mean a compiler, right?
2- A real “reactivity” mechanism within the language
Even in Vue, which may feel more reactive because the state is updated directly using the properties’ names, in reality this process involves calling a setter in the background, generated and controlled by the library. Without using this API, the framework cannot update the Virtual DOM and consequently the final page. The approach taken by Svelte, as a compiler, is to execute the code in topological order, rather than top-down. The Svelte compiler generates a sort of dependency graph in which a variable’s value will be updated when one of its dependencies updates, reacting to its own data changes.
Here’s a very simple comparison between state updating in a React class component, Vue component and finally, a Svelte file:
// React state with class component
// Vue state
// Svelte state
counter += 1; $$invalidate('counter', counter)
in which the call to $$invalidate reports the state variable as changed/updated and checks (in the previously mentioned topographic manner) the dependency graph before surgically updating the DOM – that is, the page in the browser. As stated by Rich Harris, the creator of Svelte: “Svelte 3.0 moves reactivity out of the component API and into the language”.
3- Upstanding development experience and growing ecosystem
Furthermore, in addition to the quality of the code and the development experience, another very important factor in choosing a development tool is its ecosystem: the size and activity of the community, the production of bug fixes and new versions, the presence of tools that can assist in the production of code.
Here, unlike some other mobile development frameworks which do the bulk of their work on the mobile device, Svelte Native shifts that work into a compile step that takes place when building the app. Svelte Native offers the same mechanism highlighted previously; instead of using techniques like virtual DOM diffing, Svelte Native code surgically updates the native view widgets when the state of the app changes.
These are just a few features that make Svelte and its related tools amazing. Their presence will also help in further improving more popular tools such as React and Vue.