Read on Twitter
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.
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 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.
The project itself is implemented in TypeScript.
The project 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 compiled into something that actually handles state changes.
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 compiled into something that actually handles state changes.
Like React has its *.jsx files, and Vue has its *.vue single-file components, Svelte has *.svelte files.
Similar to single-file components in Vue, a svelte file can contain HTML, JavaScript, and CSS.
You can see a simple component in the image below.
Similar to single-file components in Vue, a svelte file can contain HTML, JavaScript, and CSS.
You can see a simple component in the image below.
To give you an example of Svelte's built-in reactivity, take a look at the component shown below.
No (React) hooks, no redux, no state-management library, only plain JavaScript and a directive.
This is the power of the Svelte compiler. What you see is relatively trivial ...
No (React) hooks, no redux, no state-management library, only plain JavaScript and a directive.
This is the power of the Svelte compiler. What you see is relatively trivial ...
... code, but it's enough to make the outcome fully reactive. The same functionality in React would take you more code to write.
There are also more advanced features, like lifecycle-hooks and conditional rendering (which isn't plain JS anymore) that open up more use-cases.
There are also more advanced features, like lifecycle-hooks and conditional rendering (which isn't plain JS anymore) that open up more use-cases.
If you, for example, want to render a block for each entry in an array, below is how you do it in Svelte.
That's not plain JavaScript, anymore, but it's still a readable syntax that is necessary for the compiler to be able to process it.
That's not plain JavaScript, anymore, but it's still a readable syntax that is necessary for the compiler to be able to process it.
What makes Svelte so powerful?Simplicity and the power that comes with Svelte's approach make it so powerful.
Virtual-DOM implementations made single-page applications remarkable, but they come at a cost. Diffing the virtual DOM and the actual DOM, and then applying ...
... gradual changes at runtime costs performance and sometimes brings complexity.
Moving all this into a compile-step and then letting the browsers do what they are good at (managing the DOM e.g.) makes your apps faster, and your bundle-sizes lower. What you deliver is ...
Moving all this into a compile-step and then letting the browsers do what they are good at (managing the DOM e.g.) makes your apps faster, and your bundle-sizes lower. What you deliver is ...
... your frontend code, and a lot less library/framework weight.
Oh, and do you still remember the reactive example? Here is how the emitted JavaScript code looks.
That's a lot of burdens taken off your back and put onto the compiler's shoulder.
Oh, and do you still remember the reactive example? Here is how the emitted JavaScript code looks.
That's a lot of burdens taken off your back and put onto the compiler's shoulder.
Can you recall all those integration libraries that make many other libraries compatible with the virtual DOM? Yes, I know that you don't always need those. But with Svelte, you'll never need them, because there simply is no virtual DOM.
Is it worth a try?In my opinion, it's definitely worth a try. It is a fresh approach to a common problem, which tries to put a lot of effort into making things simpler for developers.
The official documentation is awesome, with a great tutorial going over every important feature. It's written very well and makes it easy to follow along.
So, if you happen to have some spare time, maybe try it out, it may well be worth your time!
So, if you happen to have some spare time, maybe try it out, it may well be worth your time!
