The new kid on the block

I work as a backend developer, but I am very interested in the Javascript world and ecosystem. As I mostly use PHP, libraries and frameworks don't change much and it gets boring you know ?
So why not get into Javascript and its "2 frameworks a month" approach ?

Of course, I'm joking (we all know it's 3 frameworks a month), while JS is always driving in the fast lane, most developers stick to one of the Big 3 and they're happy about it.

But from times to times, something new comes in and it gets the community all fired up, and this time, that thing, is Svelte.

Little bit of history

Svelte was created by Rich Harris, a well-known JS community member, near the end of 2016. And for years, He was working on making it better and faster, while most people were still getting to know Vue. It's only with the release of Svelte 3, in April of 2019, that most of the community was introduced to it.

What makes it different ?

We don't want another React, Vue or Angular, they all fill their role and replacing them has been tried before and to small success, we want something different (from the mainstream at least) and Svelte, does that.

There are 2 main differences that separates Svelte from the crowd : No Virtual DOM and Svelte runs at Build time.

No Virtual DOM

2 of the biggest JS frameworks (Vue and React) use a Virtual DOM to render the components we create. And they use it for a simple reason, because it's way easier to control reactivity.

The VDOM works as follow ; the components we created will initialize new objects that represent a DOM, the job of the framework is to compare the actual DOM to the object that was created by the components and putting the differences in the DOM. That's why it's called a Virtual DOM, it's an abstraction of the real DOM.
For each reactive action (a state or props change for example), the object generated will be modified and the diff with the real DOM is done again. As reactivity is a big part of JS, the VDOM diff has been optimized so it would be as fast as possible (and people are still working on making it faster ! For example, Evan You, father of Vue. Here's what he claims).
While the concept of a Virtual DOM is appealing, Svelte decides to make changes to the real DOM instead.

You can find a blog post written by Rich Harris himself on the Svelte blog Virtual DOM is pure overhead. I highly recommend reading it even if you have no interest in getting seriously into Svelte.

The question you probably have is "how does Svelte work ? And how does it work with the DOM ?". Well, everything comes to the building of the application.

Build matters

When you publish your JS application, you build your application, and you get a single JS file at the end (by default at least). And this JS file contains all your components and logic, as well as the framework logic for Virtual DOM diffing.

Svelte builds all the components you created and builds them into highly efficient imperative code. So when your application runs, you're just using very optimised Vanilla JS, with some Svelte helpers. Which makes it very fast.

Svelte features

Svelte comes with everything you can ask for in a Javascript framework and even more.

One of the main selling points of Svelte is the ease of creating components. If you've used Vue before, it'll be very familiar. A component consists of a template, a style and a script, so HTML, CSS and JS, it's that simple. You have scoped styles and an easy integration of variables and methods in the template, as well as lifecycles methods, computed properties and everything nice about a JS framework.

A store system à la Redux / Vuex is shipped with Svelte, to share variables or methods between components. Animations come out of the box and are very easy to implement and customize.

Diving in

If you're hyped about Svelte and want to get your hands dirty, here are some really useful links to follow that will help you make your first steps into Svelte :

• Amazing official tutorial
• Server-side rendering for Svelte, because SEO matters
• A good router for all SPA lovers
• Codesandbox template for easy testing
• A talk Rich Harris gave about reactivity, very informative

Final words

I hope I was able to be as informative as possible and that you learned what makes Svelte, well, svelte.

And thank you for reading my first post ! I'll be glad to receive any advices to make them better and to talk about Svelte !

PS : You can find the original article in our agency blog