Why I'm Adding Svelte.js to My Toolkit
Published: 2021-08-07 15:44:38


For a long time, I was holding myself from trying out *Svelte.js* just for the reason that I don't want to wrap my head around one more framework after *React*, *Angular* & *Vue*. Last year, I broke my vow out of curiosity and started checking Svelte. But the fact that typescript support was not so good at that point of time stopped me from considering it seriously.

Few weeks back, I gave a second attempt. And now the typescript support is also really good and so I seriously gave some try by developing some of the complex components that I have developed earlier in React or other frameworks so that I'll really know whether it makes things easy or difficult. Until and unless
you try the same thing in two different frameworks it is hard to see the real benefits of a framework.

I'll explain what are the things that impressed me about *Svelte*.

## JSX vs Templates

Having worked on template based frameworks like *Angular* and *Vue* for good amount of time, I really loved the flexibility JSX provides when I started with *React*. I thought I'll never want to go back to a template based framework until I worked with large team on React projects. It gets difficult when people stack nested 
condidtion and nested loops on JSX. *(And I don't even want to talk about nested ternary operators on JSX!)* For people who suggest *eslint* as solution, *It doesn't always work the way you expect it*. When a critical deadline comes, *eslint* is the first thing that goes out of the window. 

When I learnt the reason behind why *Golang* has dropped a lot of features including ternary operators for the greater benefit, it made sense. And I think *Svelte* is similar in spirit of *Golang*. *Svelte* comes with a minimal set of features and yet it contains all that we will need for making a web application.

JSX is flexible, but you need that much flexibility only 20% of times. We don't write a *HOC* or *Render-Prop* every other day. Remaining 80% of the time, you write only conditions and loops. Templates address that 80% very well. It's all trade-offs based on your requirement.

## It's Compiled

When I read that Svelte is compiler and not a framework, I was taken aback. I thought it is not my thing. But what I realized slowly is, even *JSX* is compiled and its not Javascript. Everything is compiled in the frontend world. *Babel, Typescript, Elm, Rescript...* and the list is quite long. So what matters
is the convenience that the compiler gives us.

*Svelte* bakes reactivity into the application through the compiler. So it makes the application really fast. As the compiler gets better, your app gets better for free.

## Real DOM

Svelte is dealing with the actual DOM, unlike *React* & *Vue* which uses *Virtual DOM*. This makes things simple and easy. It relieves you from a lot of mental overhead, when doing some CSS Animations or DOM manipulations. You can use any DOM libraries like `popper.js` directly without having to look for a wrapper like `react-popper`. It just feels like *Svelte* is just a better a *HTML + JS + CSS*, nothing more.

## Fully loaded: Stores, Transitions and Animations

*Svelte* has a very good set of features out of the box with which you can go do most of the apps. It has builtin stores which works well with templates and `$` reactivity. 

When working with *React*, I haven't bothered much about transitions and animations because of the amount of effort involved. Most of the time you have to pull in an additional dependency. But with *Svelte*, it's as simple as adding a directive like the one below.

```html
{#if condition}
	<div transition:slide>
		slides in and out
	</div>
{/if}
```

## Downsides
*Svelte* doesn't have a default router unlike *Vue* or *Angular*. *Svelte-Kit* is pitched as the solution for this, which is still on beta and I think it will be *Next.js* equivalent for *Svelte*. But there are plenty of less popular third-party 
routers available.

People are afraid of the smaller community and lesser packages. But *Svelte* has good enough default features to make webapps. Also, you can use any DOM libraries very easily without needing a wrapper package. So this is not a concern for me.

*Svelte 3* released two years back and its still stable and moving forward without major changes. So it has more pluses than negatives. I'm planning to use *Svelte* more in the future. 

*PS: Originally posted on my blog at https://www.fareez.info/blog/why-am-adding-sveltejs-to-my-toolkit/*