There is React, Vue, and Angular, and then there is Svelte. It makes so many things different from all the others, which comes with an awesome developer experience.
Time for an introduction to Svelte, the frontend framework you might fall in love with. 💛
🧵🔽
Time for an introduction to Svelte, the frontend framework you might fall in love with. 💛
🧵🔽
1️⃣ What is Svelte?
Svelte is a component-based frontend framework like React and Vue that promises:
- Less code
- No virtual DOM
- True reactivity
It delivers on all of these pretty well.
Svelte is a component-based frontend framework like React and Vue that promises:
- Less code
- No virtual DOM
- True reactivity
It delivers on all of these pretty well.
It currently has 47k stars on GitHub and an active community, including 391 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.
2️⃣ How does it work?
Unlike React or Vue, Svelte doesn't use a virtual DOM or a change detection algorithm like Angular.
Instead, it comes with a compiler that parses your code and emits new code that precisely updates the DOM.
Unlike React or Vue, Svelte doesn't use a virtual DOM or a change detection algorithm like Angular.
Instead, it comes with a compiler that parses your code and emits new code that precisely updates the DOM.
This means that no diffing needs to take place. Only gradual DOM updates, which a browser can handle pretty well.
And this compiler can do even more because Svelte doesn't need hooks to update a component's state.
And this compiler can do even more because 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 an example of this below. 👇🏻
Similar to single-file components in Vue, a svelte file can contain HTML, JavaScript, and CSS.
You can see an example of this below. 👇🏻
To give you another 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!
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, and many more hooks and functions to work properly.
More advanced features, like lifecycle-hooks and conditional rendering (which isn't plain JS anymore), open up further 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.
If you, for example, want to render a block for each entry in an array, below is how you do it in Svelte.
It's not plain JavaScript, but it's still a readable syntax that is necessary so the compiler can process it correctly.
3️⃣ 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. For example, diffing the virtual DOM and the actual DOM, ...
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. For example, 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) makes your apps faster and your bundle size smaller.
Moving all this into a compile-step and then letting the browsers do what they are good at (managing the DOM) makes your apps faster and your bundle size smaller.
What you deliver are 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 still 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 is no virtual DOM.
4️⃣ 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.
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!
5️⃣ Want More Content Like This?
If you like this type of content, leave a like, it would mean the world to me! 🙏🏼
Perhaps your own community loves this type of content, as well? Retweet it!
And if you want more content like this from me, feel free to follow me. 💛
If you like this type of content, leave a like, it would mean the world to me! 🙏🏼
Perhaps your own community loves this type of content, as well? Retweet it!
And if you want more content like this from me, feel free to follow me. 💛
• • •
Missing some Tweet in this thread? You can try to
force a refresh
