JavaScript is one of the most popular programming languages in the entire world. It is as essential as HTML and CSS in the web development world. Naturally, the popularity of the scripting language has led to multiple framework developments around it. Among them, the tiny frameworks have managed to gain a lot of traction. The two most popular ones among the tiny frameworks are Svelte and Preact. Most of the JavaScript developers already know about them. They are tiny front-end UI frameworks that make the lives of the developers especially the UI/UX developers very easy. Before you can opt for anyone, you need to know the features and the differences they have to make a perfect choice.

Comparing Svelte vs Preact –

In terms of file size, Preact based projects are having a higher file size in comparison to Svelte for the same project. Therefore, Svelte has been able to attract attention irrespective of the fact that it is relatively new in comparison to Preact. However, the popularity of Preact is more than Svelte at present, and maybe in the future, the table can turn. This is clear from stacks and GitHub stats.

What Are Preact and Svelte?

Preact is a recreation of the core value of React which is an extremely popular JavaScript framework. The framework has as little code as possible, and the library is as small as 3KB. Therefore, it is lightweight, the performance is superb, and many consider it to be a drop-in replacement for React. Some of the companies have already started using Preact for their application such as Uploadcare, Bustle, Selly, Buyte and likewise.

Moreover, it is its integrations with React, Unistore, and Proppy that make it more popular and useful. Furthermore, the download numbers of Preact is increasing exponentially thanks to the major publicity it is receiving from popular companies like Uber’s mobile site, Dev.to and others. As a matter of fact, learning Preact is very easy if you already know React.

On the other hand, Svelte is a fresh framework with new concepts to design interactive user interfaces. The best part is that your application will not be interpreted at the run time. Instead, it will be converted into a normal JavaScript at the build time. Therefore, the performance is top-notch, and it is as fast as VanillaJS.

Parameter Based Comparison –

Rows – When it comes to creating 1000 rows after the page loaded, Svelte and Preact have almost similar duration. When you want to replace 1000 rows, Preact is slightly faster than Svelte. When it comes to partial update at a consistent number of rows for a table having 10k rows, Svelte is faster than Preact by far. The last scenario is most likely to happen in the real world even though the consistency of updating may not be there. If you consider swapping two rows in a table of 1000 rows, Preact is 10 times faster than Svelte. For removing rows, the duration taken is almost the same for both.

Moving on, let’s talk about creating rows which are a common occurrence in the real-life world. Let’s say when it comes to creating 10k rows, Preact is very slow in comparison to Svelte. When it comes to appending rows in a large table, Preact is again very slow. However, it can clear the rows in lesser duration. Therefore, all in all, on an average, we can say that Svelte is slightly edging out Preact. That is why the future of Svelte is bright through the rise of Preact is very stable and it is already a breakout framework in JavaScript.

Other Factors – Working on the database is the most hectic process, but there are various other time-consuming and heavyweight processes where a framework has to perform at its best. For example, how a framework reacts when there is consistent interaction from the users’ end can determine how good a framework is. In this case, Svelte again slightly edges out Preact. Talking about the script bootup time which is the total time required to compile or evaluate all the scripts in a page, Svelte is almost twice faster than Svelte.

Moving on to main thread work time which includes working on the vital asects such as style, layout, and overall structure, Svelte again beats Preact by a slight margin. Lastly, if we consider the total bytle weight which is also referred to as network transfer cost, Svelte is far ahead of Preact. In fact, it is safe to say that Svelte is faster than VueJS and VanillaJS which are the fastest overall JavaScript frameworks that are popular.

Therefore, when companies are preferring Preact for its speed and performance, they should be happy to know that there is a faster alternative available. It is up to the team of Svelte to market the product and get some high-profile customers on board just like Preact did and they are receiving the fruits of their labor now.

Kitty Gupta
Latest posts by Kitty Gupta (see all)