Introduction
More and more often we hear about a relatively new web framework to develop user interfaces on web and even for mobile apps, and this is Svelte.
I don't want to write just about this technology, its pros and cons, but to compare it with the most famous web framework React, and whether it can be defeated by Svelte.
Svelte
Many developers who are starting to use this technology are very satisfied. Many of them want to keep exploring Svelte's depths and even support the project both financially and by making a contribution to the repository on Github.
But what makes Svelte stand out and make it so unique in the competition?
The main feature of Svelte is that it works as a compiler and not as a library, Svelte compiles the code into pure optimized JavaScript and does not need to drag the entire library to the production. This makes Svelte extremely fast.
React
On the other hand React, a library with rich community, developers and the huge Facebook corporation behind it.
It is currently the most popular technology within the front-end ecosystem.
Let's compare them
- Which of them is more beginner friendly
- Performance
- Reactivity
- Community
- Server-side rendering
- Bundle-size
- Conclusion
Which of them is more beginner friendly
When we start learning something new, we always look first and estimate how much time and effort it takes to learn that or other technology. Thus, the criterion "Which is best for beginners" is important.
Both Svelte and React are not difficult to learn with JavaScript basic knowledge.
If you take React, you may need more time to study things like JSX or CSS-in-JS, although this is not something scary or incomprehensible. Below is an example of JSX syntax.
Hello.js
import React from "react";
const Hello = (props) => {
const element = <h1>Hello, {props.world}!</h1>;
return element;
};
export default Hello;
Svelte, on the other hand, is more like a simple JavaScript application, and only adds minor adjustments to HTML. Here you can see an example of Svelte syntax.
Hello.svelte
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
<style>
h1 {
color: red;
}
</style>
Performance
In this comparison, Svelte can be proud not only of its superiority over React, but many other frameworks as well.
Why is Svelte that fast?
Unlike React, Svelte does not load the entire code of the framework into the browser, but instead turns the application into a light and
optimized vanilla Javascript code on build time, and does not load the browser with unnecessary work.
Also a very bold decision from Svelte was to stop using VirtualDOM.
VirtualDOM is for a second almost the whole reason why React is fast, and allows it to reach such speeds.
But what is VDOM?
It is a copy of realDOM that is initialized with the application in the background, we specify what the interfaces should look like, and React with VDOM which is ReactDOM library, finds the best and most effective way to update realDOM - this is also called reconciliation process or diffing.
Svelte is running at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
Reactivity
What is reactive programming?
Every developer has its own opinion about what reactivity is for them.
Here is the definition I like:
The essence of functional reactive programming is to specify the dynamic behavior of a value completely at the time of declaration
- Heinrich Apfelmus, via Michel Weststrate
But to put it very simply, we can think about it that way - when a value changes, your application should react.
If you want your application to be reactive in React, you need to add this.state or useState API, otherwise your application will not respond to changes in the values of your application. So React is not entirely reactive.
But what about Svelte?
Svelte brings reactivity in Javascript itself. It looks through your code and watches for components that depend on your variables, then updates those components as the variables change. This way, Svelte is reactive without having to rely on a third-party API.
In the example below, we declared the reactive variable doubled which will change only when the variable count is updated, so doubled is now tied to count variable.
The $ symbol in Svelte stands for Reactive declaration.
<script>
let count = 0;
$: doubled = count * 2;
const handleClick = () => count += 1;
</script>
<button on:click="{handleClick}">Click me!</button>
<p>{count} doubled is {doubled}</p>
Compared to React, Svelte can be considered more reactive
Community
I think everyone already knows that React is currently the most popular framework, which means that it has many more developers who communicate, discuss and argue about this technology.
There are many more such developers, so if you need to make a web application for a client, then finding someone to write this app using React is much easier than finding someone who will use Svelte.
Another important thing is that React is supported by the huge Facebook corporation, and does not intend to disappear in the near future.
Svelte, when it used to be a hobby project by Rich Harris, recently joined the Vercel team, which is a big plus and offers great prospects for this technology.
Also, according to the State of JS 2021 survey, newcomer Svelte takes the top spot as the most loved framework. React is the most wanted, desired by one in four developers.
Server-side rendering
Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side),
instead of sending to the browser simple HTML page with <div id="root"></div> and then pushing all content to that div with Javascript, as we would do it with React, we are sending a full HTML page, ready to be rendered in the browser with it's full initial page content.
This approach is good for initial page loading speed and much better SEO. Also, SSR pages are optimal for users with a slow internet connection, because they can see the rendered HTML while the JavaScript is processing.
In React, there's Next.js.
Next.js is a web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. React documentation mentions Next.js among "Recommended Toolchains" advising it to developers as a solution when "Building a server-rendered website with Node.js".
On the other hand Svelte with it's SvelteKit.
SvelteKit is a full-stack, server-side, pre-rendering application framework for Svelte that can output production builds to different environments.
Next.js is a great tool because it manages to reduce the big fat React library into smaller chunks and has many smart design decisions but some clumsy ones as well. The first or second js download is 70kb, but SvelteKits initial js downloads are a fraction of that by having more features built-in.
Bundle-size
One more not less important thing is bundle-size, the smaller the bundle, the faster the page speed.
React has 42.2KB of gzipped version, but Svelte team did something unusual and made Svelte with only 1.6KB it is 26 times smaller then React, wow π―.
Conclusion
At the end of this comparison, it may seem that Svelte is the winner, and many experienced developers say that the future is behind it. But it has to be taken with a pinch of salt, React is a good technology with a large community, and for Svelte to overshadow it, it still has a lot to grow and develop.
It would be a good advice to get familiar with Svelte and get something new out of it.
But as of 2022, the choice between Svelte and React in business will surely fall on React.
Top comments (16)
Waiting for the day when Svelte jobs become extremely abundant on job boards.
I really like React and the relatively new hooks structure that makes everything so organized and intuitive, but Svelte is really good! At least for me the learning curve is higher in React, but because Svelte works simmilar to Vanilla JS but adding new features like the other frameworks and with the same optimization as vanilla. I didn't tried Svelte that much to have a solid opinion, but I really hope that JS frameworks start to diversified a bit and see what new frameworks has to offer.
Great break down! Big fan of Svelte. That said...
Totally agree with you! π
My bad.
No worries! Thanks for the edit π
Svelte is great and all but the job market is filled with React and other top frameworks.
Svelte every day for me β€οΈβ€οΈβ€οΈβ€οΈ
Delighted to hear that svelte joined to vercel ( owner of nextjs )... So svelte will cover the market because of this super power
Great comparison. Svelte is amazing for small scale apps; I'm personally not sure how well it would work for large ones.
The first react Hello.js makes no sense why are you storing the jsx in the variable element and not returning it directly also the export can be directly on the function if you would have done that you would see how clean it becomes. Also it is true that svelte is faster on normal apps and site but let's say you are rebuilding excel in the web with thousands of rows then the vdom will update faster.
It is an example of JSX, and you are free to store a component to variables. This example is not to show the cleanest of them, but to show the basic syntax.
This is not how a React Developer would write it, it should be written how everyone would and not as ugly as possible.
Special for you: π
Why wouldn't a react developer export it separately? Almost every example I've seen does it that way. And the three companies that I've professionally worked on react code at have done it this way. I find it easier so that you can wrap the export with things like redux or apollo. What an odd thing to say!
I find the code example weird because the svelte code includes css, while the react code does not. Also in the svelte code you explicitly set the var "name" to "world", but then in the react code you pass in a prop named "world"... that's really confusing.
Both Svelte and plain old JS Webcomponents will eventually overtake React unless it changes to keep up.
Svelte. Nothing further to discuss #DeathToReact