Svelte.js — An Introduction to the Compiler as a Framework
An overview of an up-and-coming framework
Note 1: A French version of this article is available.
Since the release of its version 3 in April 2019, the Svelte “framework” is more and more talked about. Due to its lightness and its approach being at odds with the main frameworks like React or Angular, the rising star developed by Rich Harris promises you simplicity and speed for a better user and developer experience. And you, will you be tempted by Svelte.js?
Note 2: This article focuses on the non-technical side of Svelte.js. For more technical points, you can refer to the Svelte Crash Course or to my Pomodoro application POC (links at the end of the article).
A Little Bit of History to Begin With
But Then Is It a Framework or a Compiler?
Good question. As a matter of fact, it’s a bit in between, at least compared to the currently popular definition of technical framework.
Svelte offers a real lightweight development framework, with powerful functionalities and syntactic sugar to facilitate the developer’s work, which therefore makes it a kind of framework.
All Right, but How Can Svelte Be Interesting?
The biggest advantage of Svelte is, as the name suggests, the very low weight of the application when compiled, which promises a loading speed that is impossible to achieve with frameworks like Angular, Vue.js, or React, which embed a runtime in addition to the logic code of the application. With Svelte, you only have your code with just the right amount of Svelte, so you don’t overload the scale.
However, Svelte is also quick during execution. Indeed, it compiles your code to make something probably much more optimized than what you would have done alone on your side (while having your source files of Svelte code perfectly readable and maintainable) and especially: It does not have virtual DOM, and that’s one less layer to run to reflect a change on the page.
Finally, some minor but nonetheless appreciable advantages: With Svelte there is little risk of graphical side effects because the style of each component is isolated to affect only the component, not its parents or children. And last little thing, Svelte is ES2018 compatible, so yes, you can use arrow functions,
const, and other nice little modern JS features.
That’s All Well and Good, but Your Miracle Product, It Has Some Flaws, Right?
Yes, nothing is perfect in life. First of all, the big concern is its incompatibility with TypeScript (my favorite language, to say if I’m in pain!). However, the community is so asking for it that Rich Harris has planned to integrate it in his future developments, and some members have taken the problem head-on and started trying to reconcile the two in experimental projects.
[Edit 08/07/2020: Svelte is finally officially compatible with TypeScript!]
Then, we must admit, the Svelte community is less important than those of Angular, React, or Vue.js. It doesn’t seem like much, said like that, but to get out of a trap, to find plugins or components already made, or have resources to progress, it’s not very joyful.
Finally, the syntax can be confusing for aficionados of more classic frameworks.
What Can We Expect From Svelte in the Future?
The future of Svelte is, above all, in my opinion, more maturity, a greater community, and more readily available resources.
But concretely, some areas of work have already been defined or even started for some.
First, Rich Harris began to integrate web accessibility so that different disabilities weren’t harmed too much by visiting an application made with Svelte (which improves SEO, by the way). But he also asked for help from the community for other big projects: internationalization (some community projects exist); a command-line interface, or CLI in the lingo, like Angular CLI or create-react-app; compatibility with RxJS; or, as said before, the integration of TypeScript.
Finally, a few exotic projects take Svelte outside the realm of the classic web application. We can list some:
To Go Further
To explore the subject more deeply, you can use some of these interesting links:
- [EN] The Svelte official site, in particular the official tutorial (better than the documentation), the official documentation, examples, an FAQ, the official blog, and above all, the best possible sandbox: the REPL!
- [EN] The official GitHub repository
- [EN] Xiaoru Li’s Svelte Crash Course: article, videos. Very informative
- [EN] An awesome list with plenty of useful resources
- [EN] Rich Harris official Twitter account
- [EN] A guide to Svelte on Medium, with a more technical point of view
- [EN] A technical comparison with React on Medium
- [EN] A Pomodoro application that I developed as a POC: GitHub, Demo
And some French-speaking resources :
In summary, Svelte.js is an increasingly popular, while still young and not fully mature, framework that is open to contribution and offers lightness, simplicity, and performance.
It tends to be moving away from just a framework for web applications in the near future, and what many developers agree on is that it will likely be an inspiration for future frameworks.
In short, this technology, which is fundamentally very different from the star frameworks of the moment in its philosophy, its approach, and the techniques used, fascinates me and gives me the feeling of a tool with great potential, one we must watch.
And you, will you be tempted?