Why I'm Adding Svelte.js to My Toolkit

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 convinience 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.

{#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. I’m not sure if it supports React Router like client side routing. 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.

fareez.info