We built an app with Svelte. Here’s what we learned.

When it comes to frontend development frameworks, you've likely heard of the three most common ones used to create user interfaces: React, Vue, and Angular. But, in 2016, a new frontend framework entered the scene. Rich Harris launched Svelte, an open source software, and while it's still relatively new, it does offer some benefits that Vue and React don't. Here's what we think about the new kid on the development block.

What is Svelte?

Svelte is a Javascript frontend framework focused on creating user interfaces (UI). Unlike other frameworks like Vue and React, Svelte brings a new way to build the UI. In contrast to React, Vue, and Angular, Svelte doesn’t interpret framework code and determine how to build the UI during execution (declarative programming). Instead, Svelte compiles framework code ahead of time so during execution the code directly modifies the UI (imperative programming).

A traditional frontend framework uses a virtual DOM (Document Object Model), which requires some processing in the background to determine what has to be changed on the real DOM. Svelte, on the other hand, compiles the framework code so that it doesn’t have to use a virtual DOM, bringing some performance improvements. In short, Svelte is a lightweight framework that compiles framework specific code to vanilla Javascript that results in a small bundle file (improving network transfer speed) and it does all the UI changes directly to the real DOM avoiding the extra CPU and memory usage of managing a virtual DOM.

And that’s not all. Svelte brings also some desirable characteristics, such as:

• Less code which makes development faster

• Support for TypeScript

• Small bundle files

• A single file with the JS code, HTML, and CSS

• Easy to get started with as it is mostly composed of plain Javascript

• An increasing popularity

(Weekly downloads of Svelte in the past 5 years. Source: NPM trends)

Why the comparison between Svelte, Vue, and React?

As mentioned before, Svelte is a compiled Javascript framework which means that it doesn’t have a framework layer on the top of the app. On Svelte, the final files are native Javascript files that will work together to interact directly with the real DOM. Because of that, Svelte is meant to be a light framework with small bundle files and a quick DOM update.

To check if Svelte’s performance makes a real difference on a final app, I decided to build a small app using React, Vue, and Svelte, and then compare its performance results. React, Vue, and Svelte all have some similarities in life cycles, structure, and the way the code is written. However, React and Vue use a virtual DOM to keep the real DOM updated whereas Svelte does the UI changes directly on the real DOM.

The app

For the comparison, I created the same app with different frameworks using the same component structure, the same CSS style, and pretty much as close to the same code as possible.

(The user interface of the app I built to test Svelte’s performance)

The app was built to test three different UI responses:

• Update single text on the root level

For this test, I created buttons to add either one or 10 to a total. Every time a user presses the button it updates the total and shows its value on the UI. However, instead of using a single math operator to add the number 10, I used a for-loop that adds one to the total 10 times. That way I was able to check how the framework dealt with multiple UI updates in a short period of time.

• Update a nested component

For this test, I changed the style on a single table row component within a table. That way, I could check how the framework performed doing a UI update on a nested component.

• Update dataset on a root component

For the last test, I changed the dataset that is responsible for rendering a table on the UI. Here I checked how the framework performed when the app changed the root component data and forced it to update some of the nested components.

Performance check

The first performance analysis was running the Chrome Lighthouse performance audit in incognito mode to see how the page behaved on each framework:

(Table 1. Results of how Svelte, Vue, and React did during a performance audit)

Looking at the results in Table 1, it’s clear that Svelte performed better than the others on its initial page cold start, with no files in cache. It has a smaller bundle size than the others, however, I was expecting a bigger difference between Svelte and Vue. The difference may be bigger on a larger project. Also, the size of Svelte’s source code files is smaller than the files on the others, which means that you’ll need to write less code to have the same results.

(Table 2. Performance results of second test when adding one or 10)

For the second test, I checked Svelte’s performance on an UI update when adding one or 10. As I expected, Svelte was much better than the others as it doesn’t need to deal with a virtual DOM. Every change happens directly to the real DOM. However, Vue is known for using an optimized virtual DOM, so it also performed well in this test. On the other side, React’s performance was not great compared with the others. React wasn’t able to deal correctly with the quick consecutive updates. It performed unnecessary processing instead of waiting for the final result to update the UI.

(Table 3. How long Svelte, Vue, and React took to render a table, update a dataset, and change the colour of a single row in a table)

For the last test, I measured how long Svelte, Vue, and React each took to render a table, update a dataset, and change the colour of a single row in a table. When rendering a dataset and interacting with its UI elements, the results were interesting. Not only did the test show how the framework reacted to user input, but it also showed how the frameworks dealt with a more complex initial render.

It became clear in the last test that Svelte took longer than the others to initially render the table. It’s not clear why, especially since Svelte handled updating the entire table better than the other frameworks. And if you have nested components it’ll take even longer to render, which could be a problem with a large array as shown on Table 3. On the other hand, Vue had the best initial render time as it is the most optimized.

After the table is initially rendered, Svelte proves that it makes sense to interact directly on the real DOM as it can perform UI updates in a short time on a component level. Even when I made a change to the dataset, Svelte updated that single change, rather than re-rendering the whole table. 

Should I use Svelte on my next project?

The single response is it depends. Svelte is relatively new and there aren't a lot of supporting libraries as there are with other more popular frameworks, such as React, Vue, or Angular. Because Svelte isn’t as popular, it may also be hard to find people to work on your project.

Another obvious issue is that Svelte doesn’t have support from a big company, which means the development is done by the community, so it takes longer to add new features. Svelte’s small community also means there are fewer people to help if you need it. (It’s important to note here that Vue doesn’t either.)

On the other side, if you are building an app that needs to be fast and runs on a device that doesn’t have as many resources as you can find on a regular computer, using Svelte would be beneficial.

Some companies are already using Svelte. The Stone Payment Company uses Svelte on its embedded devices. It had tried other frameworks but found they didn’t work, but because Svelte apps use less computational resources, Stone Payment can run Svelte apps on its handheld payment machines. 

E-commerce website Tokopedia is an interesting case because it uses both Svelte and React. When visitors go to their website for the first time, Tokopedia uses Svelte to get visitors to their homepage as fast as possible. But it then downloads the React version of the website, so when visitors return to the page, the website uses the React version because it’s already cached. Tokopedia took advantage of Svelte’s small bundle file — which makes it faster to download — to get a better performance during its cold start, but still leveraged the stability of React for returning users.

Conclusion

Svelte is a promising frontend framework that brings a new way of interacting with the DOM, and helps you create a fast user interface that uses less computer power. Despite the fact that it’s still young, Svelte is proving its power on applications that need speed or have limited hardware resources.