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.
Svelte is a disappearing JavaScript framework. Initially, it was promoted that way. Because, once you build an app with Svelte, there usually is no way of telling that it is using Svelte.
I’m a web developer and I like HTML, CSS, and JavaScript. To be honest, I never really liked any JS framework before because they asked me to learn something new. Sometimes new syntax, sometimes new ways to use the markup so on and so forth.
I’m ok to learn new things but I did not dig deep into any of them because they felt like a deviation from the regular HTML, CSS, and JavaScript that I used every day.
Eventually, I had to take up React for a project of which I was been apart for a long time. It was kind of forced on to me but I started liking it. I understood the true productivity and simplicity that can be obtained from a JavaScript framework.
But, I did not like how React uses JSX or HTML inside JavaScript. That always felt wrong to me.
Along with all these, I was also trying to learn Vuejs which seemed more like HTML and less like JSX.
I still love Vue for the fact that you can just put a script tag in any HTML app and you can start using Vue. Which is fantastic. This is exactly how we add a Javascript plugin to HTML. Let’s say you are designing a homepage and you want a carousel or slider, you just go to the slick carousel page, get the script tag, and use it on your website with some initializations. That’s it. You can start using it. In that way Vue was revolutionary. For me at least.
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.
So Svelte was mind-blowing for me because finally, I found this JavaScript framework that isn’t difficult to learn, uses less code to achieve the same thing, and the most important of all it spits out a tiny JS file that doesn’t need any Runtime environment to run.
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.
You can write HTML components without any JavaScript(you may need a line or two to import them).
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,
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>
<input bind:value="{name}" />
<style>
h1 {
color: royalblue;
}
</style>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.
There aren’t many syntaxes to learn compared to other JavaScript frameworks like React, Vue.
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.