Why Svelte Is Not Ready for Prime Time Just Yet
By: Jan Kalfus
Tags: Nodejs, Programming, React, JavaScript, Svelte

The Good Stuff

With the bad stuff out of the way, let’s get to the good stuff.

The tutorial and REPL

Svelte has an awesome tutorial. Following it, you’ll learn everything you need to know about Svelte in a day or two. There’s also a great REPL, where you can try various things out and even download the result with everything you need to get it up and running.

If you’ve spent the last few years writing React code like me and you’ve ever seen a Vue single-file component (SFC), you’ll feel right at home coming to Svelte thanks to that tutorial. So dive into it if you want to see what the syntax looks like.

Single file components (SFCs)

Do I have to say more? :) Single file components are just awesome. If you ever used Vue’s SFCs, you know why. All related code is in a single place, it allows you to prototype quickly, and you don’t have to worry about styles messing with each other.

With Svelte, this is the default. And the experience is IMHO a little bit better than in Vue, as there’s literally no boilerplate at all, you start at 0 indentation, and styles are scoped by default. Let’s see what a typical hello world would look like:

Hello world

Yup, even that’s a component in Svelte and it’ll render exactly as you’d expect! As you can see, I wasn’t kidding, zero boilerplate.

Let’s see something a little more complicated, with some JavaScript and styling:

<script>

let something = "hello";

</script> <style>

p {

color: purple;

font-family: 'Comic Sans MS', cursive;

font-size: 2em;

}

</style> <p>This is a {something}.</p>

This will render as:

In contrast, just think how many tabs deep you start writing a typical React component, and what you need to do to set up its styles.

Batteries included

Svelte also comes with stores for application state management, and motion/transition tools to make creating animations easy. It also has a class directive, slots, special elements, etc. Basically, if you’re building an SPA, there’s everything you need except for a router (see above). So, almost no decision fatigue.

No virtual DOM

It wasn’t until I started using Svelte that I realized just how much I actually hated the virtual DOM. We’re building user interfaces, yet we’re putting this abstraction layer between us and the user interface. Why? For a brief moment, just stop and think if you really, really need and want to use a virtual DOM, or if you ended up using it just because it came with the library.

Virtual DOM has many disadvantages (performance and difficulties accessing the DOM directly, to name a few), yet probably the only real benefit was supposed to be that you could write declarative user interfaces that have a predictable state. Has it managed to fulfill that promise? Based on my experience, I’d say only somewhat. It’s definitely easier to do certain stuff via the virtual DOM than having to manipulate the DOM directly. At the same time though, and in the case of React, I’ve seen so many badly written pieces of code (some of those mine), purely because it gives the programmer so much power, that I seriously doubt that it has this benefit in general.

Svelte, on the other hand, gives you a set of tools that ease DOM manipulation, like if statements, loops, bindings, events, or slots — all of that being converted to human-readable pieces of JS (check the JS output tab here for an example) during compile time. It’s what you really need in the vast majority of cases.

The simplicity of Svelte with the combination of a clear separation of HTML, CSS, and JavaScript is what makes it really shine. In fact, it’s what the web was built for.

Also, since you have direct access to the DOM with Svelte, you’re not restricted to using framework-specific components. And since you won’t be running into any quirks, as in the case of a virtual DOM, you’ll easily manage to write most of them yourself, if you want to.

Finally, because Svelte doesn’t use a virtual DOM, and in fact any runtime at all, it’s really fast and the bundle size you’re starting with is extremely small.

Snowpack + Svelte = productivity heaven

Ever heard of Snowpack? It’s an insanely fast front-end build tool that creates ES modules instead of a bundle for development. Near-instant dev server start times and hot loading is what you get with it. And you can use it with Svelte. And unlike with React, the hot loading works reliably. Seriously, just try it out. You’ll never want to go back to Webpack again. I would even go as far as calling it revolutionary. But you don’t have to believe me, just watch Rich Harris’ demo. My experience has been exactly the same so far.