I have many reasons to like Sveltejs. I have tried to mention most of them in this article. I hope - at the end of it - you will also appreciate Svelte.
Along with all these, I was also trying to learn Vuejs which seemed more like HTML and less like JSX.
I was still into Vue until I watched the “Rethinking Reactivity” video on youtube. I’m not sure how I ended up watching that video but I’m glad I watched it.
I still watch it from time to time to understand the Genius of Rich Harris. How he looked at these JS frameworks from a different angle and utilized the compiler instead of the browser to handle all the logic. And also, How he found a way to truly reactify elements without DOM diffing where you change something in Virtual DOM and compare it with the actual DOM. And then update the difference to the actual DOM.
And in that way - since svelte is truly reactive - he got rid of Virtual DOM completely which is radically different from other frameworks. Because the other frameworks still use Virtual DOM which is an overhead.
That should be enough to be excited about svelte but there are other things I like about Svelte.
Svelte is a superset of HTML. I feel like it is HTML but with a lot of enhancements.
Svelte is HTML with super-powers!
Even a simple paragraph tag works, just like any HTML file.
In Sveltejs, every component is encapsulated. The CSS is localized to a component, doesn’t affect other components.
It solves a huge problem of cascading. I have had problems with CSS being all over the place. You change it somewhere for one element and it affects some other element.
You’ll like using the plain old CSS in Svelte.
You can also have a global style that applies to all elements of the same tag or class which is nice if you want to apply styles across all Svelte components.
In a way, I feel Svelte components are complete. It has HTML, CSS, and JS in a single file. For example, take this small paragraph,
Just these lines create a two-way data binding component.
REPL: Two-Way Data Binding
You can do this in React also, but you’ll get tired. The code will not be readable. Even now I’m not very sure how to work with styles in React. Currently - at work - we use the Tailwind CSS framework. So it isn’t a big problem but if I have to write plain old CSS then it becomes tricky.
When you feel the need to write a comment, first try to refactor the code so that any comment becomes superfluous.
- Kent Beck
The above quote from Kent Beck’s quote says a lot about how bad some JS frameworks are today.
At my work, I have to explain to my co-workers what is happening in a React component. Just by going through the code, they will not know what the hell is happening. Svelte kinda solves this problem.
The example you see at the top is easily readable and comprehensive. I do not think I have to explain what is happening there.
The learning curve is almost nil. If you know a little bit of JS then you can start using Svelte.
JS can be hard but doesn’t feel that way in Svelte.
There are some directives that we use in Svelte that you may have to learn but they seem natural.
Refer: Svelte Documentation
In svelte, the number of lines you write is less when compared to other top JS frameworks.
Let’s say you want to bind an input to a variable and show it - as shown in the above example - it takes way less code in Svelte. I have had a hard time doing this in React.
Less code = less erros & bugs.
Debugging feels way better in Svelte than other Frameworks.
Svelte performs astonishingly well compared to apps developed with other frameworks. I have developed a decent e-commerce site that uses Svelte and Tailwind and the performance is amazing.
I had so much fun developing it. Previously, it was built using jQuery and the performance was fairly good. But it was still loading the entire jQuery script which is huge. After converting it to Svelte, the bundle size is really small. Not to mention that I do not add more scripts to get animations which I used to do before. Svelte does it for me.
Try Svelte for an exhilarating developer experience
So I think I have mentioned everything that made me choose Svelte. Let me know in the comments if you like Svelte, or why do you like Svelte, or what made you like svelte.