Svelte, The system language for your browser

Thibaut Duchêne
3 min readDec 4, 2020

For the last five years, web development has been under a lot of changes.
If you are a web developer, you have been accustomed to these new tools, making up a modern stack in web development.

The most significant breakthrough came in with Babel, pushed by Facebook and its library React, using a new kind of javascript language called JSX. The list goes on in the javascript ecosystems, you probably already met CoffeeScript, or most recently Typescript. CSS has followed the trend with languages such as SASS or LESS.
All those languages have one thing in common; they all compile down to javascript or CSS, the language of the browser.

The compiler, in the web ecosystem, is called Webpack, Rollup or Parcel. They take your source code, and depending on the loader you configured, will let you use a different javascript syntax, or even a completely different language (think elm).
Those compilers became the norm; we needed them to enrich our javascript experience. Typescript is incredibly useful to code large and complex web applications or libraries.

Modern Javascript frameworks also changed the way we would design a web application. React became famous for its functional approach, treating each component as a function with the state as parameters. It also introduced JSX, that lets you write your template right into your javascript.
This was the state of web development before Svelte came in.

Svelte took all the above but went even further.
While React implements all kind of magic to simplify your web development, it’s for example, the virtual DOM that made possible its functional approach with components.
You would still deal with a lot of boilerplates to optimize your app and avoid unnecessary DOM diffing, which are costly and eat your CPU and RAM.
Svelte decided that since we have compilers anyway. We should include much more than just templating (JSX) or typings (Typescript) to the javascript language.

Yes, Svelte is a language.

It includes true reactivity to your toolbelt. And this is a huge deal. Svelte basically put the framework to your language. And will output plain vanilla JS. The concept is simple. Every mutable variable declared in your code will output a pubsub function, each time this part of the state is changed, Svelte will update each part of your template impacted. Simple and incredibly useful.

If you are a backend programmer, you probably heard of those system languages, such as Rust or GO, that compile down to many different platforms, producing binaries for Windows, Mac or Linux, as opposed to other well-known language relying on a VM to run on those platforms.
This VM has a cost in terms of performance and binary size.
You can think of Svelte as the system language for the browser. It doesn’t need a Virtual DOM to make coding your app easier. It compiles down to vanilla js, and this is a huge gain memory and CPU wise.

I am a big Svelte supporter; Svelte opened a new way to design web application. That are lighter, perform better, and are even easier to build.

--

--