Why Svelte?

Get a short introduction to Svelte, and learn how it can be a better choice over existing front-end frameworks.

We'll cover the following

Svelte’s initial release was back in 2016. Since then, it has come a long way, with some notable changes in syntax. To get a good understanding of where Svelte stands at the moment, let’s look at the following components to see how they build up.

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'build'
  }
})
Output variables in templates

We can see that the overall complexity of the code is much simpler compared to other frameworks. This makes Svelte a good choice for beginners because it's easier to master. However, the power of Svelte lies in something else. It’s truly reactive and offers more simplicity and better performance compared to other frameworks.

Truly reactive

Svelte provides a clean and intuitive way to manage state changes with assignments. This means that in order to update the state, we only need to reassign values. This will automatically update our UI with the state’s current value.

Let's look at how we can manage the simple state of a counter in Svelte. Take a look at the following code example:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'build'
  }
})
The difference in syntax for event handlers

The first thing we notice here is that we don't call any special function the same way we would call useState in React. We simply reassign the value using an on:click handler, and Svelte takes care of the rest.

This means that when working with the state, we need to use assignments to update it. This can be a bit confusing at first if you've worked with React before, but there is no need for any internal hooks or special functions. A simple assignment will update the state for us.

Simplicity and performance

The real difference in Svelte comes from the fact that it’s not a framework in a traditional sense—it’s a compiler. This means that Svelte runs at build time, converting all our code and our components into highly efficient vanilla JavaScript code. But what does this mean in practice? Let's take a look at this simple console.log component and see what it's transpiled to.

Generating JavaScript from a component
Generating JavaScript from a component

As we can see, the bundle contains only the JavaScript that we've written in the component and the parts necessary to bootstrap the application. No framework needs to be loaded into the bundle, which makes the bundle size much smaller than that of traditional frameworks. When using SSR for the compiler options, this result is even smaller. Let's compare the output to a React component:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);
The same app in React

Run the application in the code widget above by clicking the "Run" button. Once the application generates the output, click the icon highlighted below to open the application in a new tab.

Click the highlighted icon to open the application in a new tab
Click the highlighted icon to open the application in a new tab

In the new tab, look for main.js inside the "Network" tab in DevTools. You can also do a search for the Hello World string to find the correct bundle file. The bundle takes up many times the size of the same Svelte application.

Comparison with React

To put Svelte into perspective, let's compare the same components written in both Svelte and React that simply add two numbers together using two input fields. Take a look at the following example of how this can be achieved with both:

React component on the left, Svelte component on the right
React component on the left, Svelte component on the right

As we can see, Svelte only contains the absolutely necessary things. Of course, this can’t be achieved with React or any other traditional UI framework because they're not compilers. Svelte, on the other hand, can easily understand the difference in syntax and how it should be transpiled into vanilla JavaScript. This approach is simpler and easier to understand for beginner developers.

While this isn't to say React is bad—the library has its own place in the front-end ecosystem—Svelte does provide some added benefits over existing frameworks.

Virtual DOM

Unlike React, Svelte doesn't use a virtual DOM. We’ve probably all heard that using a virtual DOM is faster than directly manipulating the DOM, but this isn’t true. Let's do a quick recap. Simply put, a virtual DOM is a representation of the real DOM with JavaScript objects.

React, and some other frameworks, use the virtual DOM to diff the state of the application from the real DOM and apply the necessary changes. After this, the DOM is manipulated as needed. Here, we're doing the diffing on top of the DOM manipulation. This requires extra calculation, so it'll never be faster than directly manipulating the DOM.

The problem comes if we try to update our entire UI on every state update. This is what the virtual DOM aims to solve and where virtual DOM could be faster. However, in practice, this is hardly ever the case.

onEveryStateChange(() => {
	document.body.innerHTML = renderApp();
});