Programming

Svelte is just better

james

• 3 min read

My entry into the web development space was React, one of today's most popular front-end frameworks. People love it because it's powerful and versatile--you can make basically anything in it. However, React is bloated due to its virtual DOM. The virtual DOM slows it down and requires a significant amount of JavaScript bundles to be loaded on the client-side, making web applications clunky and slow to load on the first load. As well, due to the virtual DOM, React code can get messy fast.

In order to solve these problems, Svelte came along with a much more different approach. Svelte isn't like other frameworks that operate using a virtual DOM. Instead, it compiles code to tiny, framework-less vanilla JavaScript, which allows apps made in Svelte to load faster and stay faster. Even though it doesn't use a virtual DOM, it's still versatile and can be used to create big projects, like simulations and games.

Developer Performance

One of Svelte's benefits is fewer lines of code. Due to the lack of virtual DOM, it can keep code concise and less bloated. Let's look at an example of a simple adding app.

React:

import React, { useState } from 'react';

export default () => {
	const [a, setA] = useState(1);
	const [b, setB] = useState(2);

	function handleChangeA(event) {
		setA(+event.target.value);
	}

	function handleChangeB(event) {
		setB(+event.target.value);
	}

	return (
		<div>
			<input type="number" value={a} onChange={handleChangeA}/>
			<input type="number" value={b} onChange={handleChangeB}/>

			<p>{a} + {b} = {a + b}</p>
		</div>
	);
};

Svelte:

<script>
	let a = 1;
	let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

Right off the bat, the equivalent code in Svelte is almost 2x fewer lines. That's a huge improvement! That massively improves readability for other programmers alike, but it also speeds up developer performance.

Another observation that can be made is that this Svelte example doesn't have any useState or onChange functions. That's because, in Svelte, normal JavaScript variables can be used as states! Svelte will automatically refresh components on the DOM whenever a dependent variable is changed. Instead of using onChange to set the values of states when the inputs are changed, Svelte has bind:value, which automatically takes care of input and variable changes. Of course, if you require text pre-processing, you can still do that with on:change, but 90% of the time, you just want to take the input from a field and store it in a variable.

Writing onChange functions, either inline or as a separate function, isn't necessarily difficult. Still, as a web developer, I do that a lot, and it gets very tedious over time. It's a minor inconvenience, but it still impacts my front-end development experience overall.

Smaller Footprint

In Svelte, removing the virtual DOM greatly reduces the size of client-side JavaScript bundles required to render components and add reactivity. For example, my latest project, CryptoChat 3, is written in Svelte. CryptoChat 2 was written in React.

When comparing these two projects in bundle size, the browser loads around 480 kb of bundles with CryptoChat 3 and 840 kb of bundles with CryptoChat 2. That's a pretty huge difference. While 360 kb in savings might not sound a lot, this gap can expand exponentially depending on the size of the project.

Conclusion

Svelte is a fantastic framework that combines powerful features, like versatility and reactivity, with efficiency. Developers can create apps quicker by writing fewer lines of code, and users can load them faster thanks to the reduced bundle size and lack of virtual DOM.

If you're looking to get into front-end web development, I highly suggest learning Svelte, as the learning curve is much less steep, and you'll benefit overall from the framework's simplicity.

To end off, below is a list of a few cool Svelte projects I've discovered along my journey: