Svelte. The framework that is not a framework
The term JavaScript fatigue sums up the general weariness among web developers — the mood of those of us who work in JavaScript-based ecosystems — because of the multitude of tools and frameworks that have appeared in recent years. Just when you feel comfortable and have mastered one, a new one bursts in that is partly similar but thoroughly different, and sends you back to square one. Again and again. That can sound and feel frustrating, but underneath it is evolution and change, which is always positive. Today, though, we are not going to talk about that, but about Svelte, one of the latest players in this game.
Svelte (adj. slender) is a component-oriented tool for building user interfaces that has gained a lot of popularity in recent years. Although it does not have the legion of followers that Angular, React or Vue have, it is a good moment to look at it and see what sets it apart.
Among its main features:
- It is a compiler
- It does not use a Virtual DOM
- Reactivity
- It encapsulates CSS in components
It is a compiler
The main difference compared to other tools is that Svelte does not do the work in the browser, but in the compiler, because Svelte is a JavaScript compiler and optimiser capable of generating very small bundles by moving complexity into the compiler instead of doing most of the work in the browser. In other words, it happens at build time instead of at runtime.
In practice, though, the feeling as a developer is that of using a framework with a special, different syntax that gives our HTML a lot of flexibility and dynamism — logical operators and loops, two-way binding and reactivity. When we generate the production version, all of that disappears and we are left with clean markup.
It does not use a Virtual DOM
The main difference with traditional UI frameworks is that Svelte does not use a Virtual DOM. Neither virtual DOM nor shadow DOM. Instead of replicating the DOM virtually in memory — with the cost that can have in large applications — and comparing them to update the DOM where it changed, the necessary operations are executed on the DOM when the application state changes. And this approach works because, as a compiler, it knows at build time how things could change in the application, instead of waiting to do the work at runtime, resulting in lighter and faster applications.
Reactivity
Svelte bets on true reactivity and on not using libraries that manage application state, but the variables themselves. So in version 3 the concept of reactivity changed, and when the state of one of your components changes, the DOM is updated — it does not matter that a component property depends on another property, and that the latter is modified from other components.
It does not only listen to reactive properties, but also to other declarations
that can be grouped, or to if blocks.
For reactivity to happen it always needs a reassignment of a property: adding items to an array will not trigger it, but reassigning afterwards will.
// will not trigger reactivity
numbers.push(numbers.length + 1);
// now it will
numbers = numbers;
// or expressed like this
numbers = [...numbers, numbers.length + 1];The only rule to follow is that the name of the updated variable must appear on the left-hand side of the assignment.
It encapsulates CSS in components
Svelte components, like Vue’s, are a superset of HTML with three distinct parts
in a single file: <script>, <style> and html, in this case with a
.svelte extension. And although, as in any web application, we can have a
global stylesheet declared in the <head> of our document, we can restyle each
component locally with the styles declared inside its <style> tag without
affecting other components, because the styles will be encapsulated in the
component by default.
Should I drop everything and switch to Svelte?
Comparing Svelte with other frameworks such as Angular, Vue or React, based on the features we have covered, we see a very powerful and flexible tool for building component-based interfaces — although we may soon miss other features we are more used to, such as a CLI, a router, or support for preprocessors like Sass. There is, however, a fairly large ecosystem of libraries around Svelte that will help with those gaps. And that is by design: the idea itself is to start building reactive web applications quickly and with minimal complexity, instead of having a huge toolbox from the start in which many tools are never used.
So, is Svelte better or worse?
It is worth knowing all the tools in your environment and forming an accurate opinion of them, so that before starting a new project you can judge which one would be more suitable given your needs. From that point of view, you cannot say that Svelte is better or worse than Vue, React or Angular. There are interesting articles and performance comparisons in which some score better in some aspects and others stand out in others — that is why we insist you have your own experience.
For us, Svelte is a tool worth considering and betting on, so if you have not tried it we recommend that you do: visit its official site, follow the getting-started tutorial, and also read our next post, where we will see how to start a project and a small demo :)