Why svelte is revolutionary

Recently I've been trying multiple different JavaScript frameworks, ranging from React to Angular. But the one which has stood out the most to me and has truly made me fall in love with it recently is svelte. Svelte is a lot different than a lot of frameworks, and to me the things svelte is capable of is amazing.

Bundle Size

One of my biggest concerns is the fact that most (if not all) the popular frameworks have a large to extra large bundle size. For this comparison I will only be comparing the base library of each framework instead of the dependents or plugins added with it, this is to show the core/base size of the framework.

Below you can see a table comparing the bundle size of what I consider the top 5 best frameworks, and their size(s) including compressed. All the sizes in the table were checked with Bundlephobia.

Svelte is significantly smaller than most frameworks due to it having basically no normal dependencies, the only dependencies svelte truly has are developer dependencies, in fact if you check their package.json there is literally no dependencies section at all! There is only the devDependencies section, and that's quite impressive!

Lack of a virtual DOM

One thing that has always irked me when it comes to the most popular frameworks (Angular, React, Vue) is the use of a virtual DOM, while a virtual DOM is nice in some cases, it at the same time makes things a bit more complicated and complex compared to a library or framework that doesn't have one. Libraries that do use a virtual DOM have a slight overhead, and while it's not noticeable most of the time, there is definitely one.

Svelte has made a blog post discussing and debunking some things about virtual DOM based frameworks and libraries, while also comparing itself to React so people can understand what it means, you can read that blog post here.

While having or using a virtual DOM isn't coherently bad or slow, the main point of a virtual DOM is so you're able to have a declarative based UI, that handles rendering components for you, so you don't have to worry about all the internal functionality of your app or PWA. However, svelte uses a similar programming model while doing it separately, and without a virtual DOM.

Templates vs JSX

Now I hate to be the guy who compares React to other frameworks, as every framework has it's place, but to some (especially beginners) JSX can seem quite daunting or scary. The ability to write HTML within JavaScript code feels very off-putting to me personally, and it feels like it doesn't belong there, an example of this is as seen below

function Title({title}) {  return <h1>{title}</h1>}export default Title;

This is a very basic functional component you'd make in react, with a simple title prop and passing it to the HTML you plan on rendering later by returning it. Now this could very well be me but the <h1>{title}</h1> seems out of place, it feels like your parsing HTML or XML within JavaScript and it feels.. wrong, at least to me. Let's take a look at a basic Svelte component to see how they handle it

<script>  export let title;</script><style></style><h1>{title}</h1>

This feels more "correct", we have a basic HTML-like syntax with a powerful yet simple templating engine built in. We simply tell our component we want a title prop by exporting a mutable variable called title and then Svelte handles the rest, we just pass it into our HTML and we're done. I should note this is very similar to how Vue handles their components.

Reactivity

Reactivity is one big reason developers use frameworks, and there's many different ways frameworks go about it. However, most frameworks make it over complicated, using a state based system, or other similar routes. One major reason I love svelte so much is reactivity is built into the language/framework itself, and by this I mean, you don't need to setup any state or reactive code to get it to work, it just simply works! Let's take a look at a basic reactive component in React:

import {useState} from 'react';function clickMe() {  let [clicks, setCicks] = useState(0);  return <button onClick={setClicks(clicks + 1)}>Clicked {clicks} times!</button>;}export default clickMe;

In this component we need to use the useState hook to allow us to use the state in our functional component, now let's take a look at a reactive component in svelte:

<script>  let clicks = 0;  function addClick() { clicks += 1 }</script><style></style><button on:click={addClick}>Clicked {clicks} times!</button>

There is literally no setup here, all we do is create a handler to handle the button click, bind it to the click event, and we're done. This makes developing quick prototypes very quick and painless as we need to do little to no setup to have a react component up and working.

Final Words

While I do see that every framework has it's place in the developer world, Svelte has certainly stolen my heart with it's simplicity, small footprint, and quick loading times. My current personal website is made using it, and honestly, though my site is extremely basic, it was a joy making it, and I'll gladly make another app or website using it when it comes time to do so.