While React is one of the most mature and popular frontend library in the world, Svelte is rapidly gaining popularity as a framework of choice to build extremely high performant web frontends.Svelte is a modern JavaScript framework that is used to build fast, lightweight, and performant web applications. It is a compiler-based framework, which means that it compiles your code into highly optimized JavaScript that is executed in the browser. This results in smaller bundle sizes and faster loading times.

While React is a very broad solution that offers developer a lot of choice, Svelte is focused on build time optimizations to you web frontend.

Whether or not Svelte is the right choice for you depends on many factors and this article will cover this topic in great depth.

Table of contents

1. What does Svelte does better than React ?

   1. Svelte is compiler based React is not
   2. Svelte is reactive by default
   3. Svelte bundle size is much smaller than React
   4. Svelte has better in-browser performance

2. What does React do better than Svelte

   1. React is a mature technology with wide community support
   2. React is also capable of build-time optimizations
   3. React has better support for large and complex web apps

3. How to chose between React and Svelte

4. Should you learn Svelte ?

5. Conclusion

What does Svelte does better than React ?

The following table offers a good comparative differences between React and Svelte. We discuss some of these in detail.

Svelte is compiler based React is not

Svelte follows the principle of putting as much work as it can into the build process. Which means it generates pure HTML/JS/CSS code that renders into your browser without any fancy techniques like Virtual DOM. React on other hand is a runtime framework. It executes a lot of code in your browser.

If you have a large React application with lots of components and if you are not to careful, it is possible to slow your browser down. Svelte on other hand takes the complexity out of the runtime and puts it into build process. Which means instead of relying too much on runtime processing your code is precompiled into simpler executable Javascript functions that are optimized to run in the browser.

Svelte is reactive by default

Conside the following Svelte code.

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

If you are familiar with React you will notice that the variable count is not defined in any special way and is still being treated as reactive. If the count changes anywhere, the count will update autmatically in UI.

In react this is not possible. In react you will have to use useState hook to define a special variable for reactivity and use a special setter method to change the variable value.

Svelte makes this possible because you can write your code assuming every varible is reactive and during compile time Svelte will figure out which variables are indeed being treated as reactive and convert them into highly optimized browser code. The details of how Svelte would ensure reactivity is hidden from us.

Svelte bundle size is much smaller than React

Svelte is smaller in size than React due to its compile time optimizations. React is 44KB gzipped where as Svelte is around 2KB gzipped.

Svelte is not only smaller in size, but it can also optimize your JavaScript code, CSS, and markup to produce much smaller bundles than React. This is especially beneficial for applications with a lot of components.

Svelte has better in-browser performance

Svlete by default has better performance in browser due to its less memory usage and lack of a virtual dom. Since react uses a virtual dom, it consumes a lot of memory. Secondly reach changes are first applied to the virtual DOM and later to the real DOM, which results into a performance penalty. In case of Svelte no such virtual DOM is used and hence it is much quicker to execute.

Svelte has better performance in the browser by default than React because it uses less memory and does not have a virtual DOM.

• React uses a virtual DOM, which is a copy of the real DOM that is used to track changes and updates. This can be a memory hog, especially for large applications.

• Svelte does not use a virtual DOM. Instead, it uses a compile-time approach to optimize performance. This means that Svelte code is converted to highly efficient JavaScript at compile time, which results in faster execution.

As a result of these differences, Svelte can be much faster than React, especially for applications with a lot of components or frequent updates.

What does React do better than Svelte

React is an extremely popular library. It is used by some of the largest websites to ever exist on planet such as Facebook. So it is not be discounted easily against a new framework like Svelte.

React is a mature technology with wide community support

React is very mature technology and is used by thousands of large companies serving billions of users every day. The open source community around it is huge and there are plugins, frameworks and in some case entire companies built around React.

Svelte in comparison is much smaller, upcoming and unproven technology. We are yet to see a large scale web application built using Svelte.

React is also capable of build-time optimizations

React is a highly customizable library, and frameworks like Next.js have shown that it is possible to build highly performant web applications using React.

Next.js is a React framework that includes features like server-side rendering (SSR) and static site generation (SSG). These features can help to improve the performance of React applications by rendering pages on the server or generating them statically, which can reduce the amount of work that needs to be done in the browser.

While Next.js's SSG may not be as powerful as Svelte's, it can still give React a significant performance boost.

In addition to Next.js, there are other React frameworks that can help to improve performance, such as Gatsby and Remix. These frameworks also offer features like SSR and SSG, which can help to make React applications faster.

React has better support for large and complex web apps

React has excellent support and well understood patterns to design extremely complex and large applications. For example, libraries like Redux and Jotai for global state management. MUI for UI components, Jest for testing and so on.

Svelte is still young in this regard and has a long way to go before it sees such an ecosystem of large scale applications and design patterns.

As the application sie grows, Svelte's advantage of smaller bundles gives diminishing returns compared to React.

How to chose between React and Svelte

React is a good default choice for most projects, but it is not always the best choice. If performance and bundle size are of paramount importance to your application, then Svelte may be a better option.

Ultimately, the best way to choose between React and Svelte is to consider your specific needs and requirements. If performance and bundle size are critical to your application, then Svelte may be a better choice. However, if you need a framework that is mature and has a large ecosystem of libraries and tools, then React may be a better choice.

It is also important to remember that the market for JavaScript frameworks is constantly changing. What is popular today may not be popular tomorrow. So, it is important to weigh the pros and cons of each framework carefully before making a decision.

Should you learn Svelte ?

I believe that a good engineer should focus on the core principles of engineering, rather than worrying too much about frameworks. Svelte provides some excellent techniques in front-end engineering that every front-end engineer should be familiar with. Even if Svelte does not become widely adopted, its optimizations to reduce the complexity of client-side code may be adopted by other frameworks, such as React.

Yes. You should spend some time learning Svelte.

Conclusion

Svelte is an interesting framework that is increasing in popularity but it is not as mature as React and might not be a default choice for most applications. However, it is worth a developers time to learn this new framework to understand what problems it solves better than React. Chances are that the techniques of Svelte would eventually see adoption in other frameworks.

Refernces

• https://wiselandinc.com/blog/building-high-performance-webpages-using-next-js-09