An Introduction To Svelte

Svelte has recently topped the satisfaction rankings of “State of JS 2020” and this justifies an introduction for everyone still not aware of it.

What is Svelte?

Svelte is a component-based frontend framework like React and Vue, that promises:

• Less code
• No virtual DOM
• True reactivity

and delivers on all of these pretty well.

It currently has 41.2k stars on GitHub and an active community, including 359 contributors. The community is pretty active and unlike React, there is no huge corporation backing it. But no need to worry, Svelte won’t vanish anytime soon. The project is licensed under the MIT license and was initially released on November 26, 2016, by Rich Harris, its creator. Svelte itself is implemented in TypeScript.

How does it work?

Unlike React or Vue, Svelte doesn’t use a virtual DOM. Instead, it comes with a compiler that parses your code and emits code that precisely updates the DOM. This means that no diffing needs to take place, anymore. Only gradual DOM updates which a browser can handle pretty well. And this compiler can do even more. Svelte doesn’t need hooks to update a component’s state. A simple, plain JavaScript statement is enough. That statement is then…