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
Rich Harris, front developer at the New York Times, in his quest for performance and good user experience, following a Tweet from Mike Taylor published in 2012, finally realized that “removing a JPEG to save loading time” is not equivalent to removing the same size of JavaScript.
So in 2016, he started a small experiment. His idea: write a JavaScript compiler that would produce quality code, be as light as possible and without abstraction of the DOM, for a super-fast loading time and very fast performance. Everything goes very quickly. In mid-November 2016, he made his first commit; four days later, the first beta is available, and ten days after this beta, on November 26, 2016, he published the first blog article detailing his concept: Svelte was born. The v1.0.0 arrives three days after this post. Then, during a big cleanup, v2.0.0 was released in April 2018, and a year later, in April 2019, a complete overhaul allowed the release of version 3.0.0.
It is with this version 3.0.0 that Svelte.js begins to gain importance, to be talked about, and to slowly initiate a fundamental change in the JavaScript world.
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.
However, Svelte has its own syntax, which certainly created some irony on Twitter with the satirical idea of SvelteScript launched by Evan You, the creator of Vue.js. But this Svelte code is then compiled into vanilla JavaScript by Svelte (which therefore makes it a compiler). In short, Svelte is at the border.
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.
Then, as I mentioned in the previous paragraph, Svelte gives you a more readable and maintainable, component-oriented code. Why? First, because you group everything related to a component in the same file: logic (JavaScript), structure (HTML), and style (CSS) — everything goes there! And secondly, because Svelte’s philosophy encourages you to write code that is as concise and easy to understand as possible.
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:
- Svelte Native, an effort to run Svelte apps on a smartphone using NativeScript, for use close to Ionic or React Native
- Sapper, a derived framework using Svelte with server-side rendering
- GL, an experiment to use WebGL in Svelte
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 :
Conclusion
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?
