Svelte.js — An Introduction to the Compiler as a Framework

An overview of an up-and-coming framework

Thibault Goudouneix
Aug 7 · 6 min read
Svelte logo
Svelte logo
Image source: https://svelte.dev

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:

And some French-speaking resources :

  • [FR] Alexis Jacomy’s conference at DevFest Nantes 2019, which has a more “Data Viz”-oriented angle: video, slides. I highly recommend it.
  • [FR] A quick intro by the Dev Theory channel: video
  • [FR] A Zenika RemoteClazz more similar to my point of view: video. I recommend.

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?

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store