Svelte vs React: Which Javascript Framework Wins in 2022

Both Svelte and React offer capabilities to create reactive, complex, and scalable user interfaces, and are used by enterprises of all sizes.

In the last few years, React has established itself as the market leader in the frontend development space. Svelte on the other hand has managed to impress web app developers with performance and productivity. 

Before including Svelte or React in your tech stack, you must know about the performance of Svelte against React, development productivity offered, app scalability, use cases served by the two, community support, future prospects of each, ease of learning, and a lot more. 

Let us briefly introduce the two before taking the Svelte vs React debate forward-

What is React?

React is the most popular javascript library for building interactive user interfaces. React core along with JSX, Redux, ReactDOM, and many other react tools enables developers to build performant and scalable applications.

React was first introduced by Facebook (now Meta) in 2013 and commands a huge community of developers with more than 150K GitHub stars, as of writing. 

Soon after its release, React started to give tough competition to the already popular Angular & other Javascript frameworks and became the framework of choice for UI development.

Who Uses React?

React is everywhere, it is used by indie developers, startups as well as enterprises of all sizes including many of the fortune 500 companies. 

Meta uses React to power the frontend of both Facebook and Instagram. Back in 2015, Netflix included React in the overall tech stack to improve modularity and performance. 

The New York Times recently shifted from PHP to React, Node, and GraphQL, to improve the user experience of many sections of the website. 

Many other product companies including Atlassian, Airbnb, Dropbox, Asana and Uber also utilize React in their overall web and app development projects.

Know more about React here – ReactJs Official

What is Svelte?

Svelte was created by Rich Harris back in 2016 as an open-source framework under the MIT license. Similar to React, Svelte is also free for commercial use. Rich created Svelte to overcome the shortcomings of existing frameworks like React, Vue, and Angular.

Svelte was specifically created to provide better UI performance, improved reactivity, and developer productivity over React. It is worth noting that while Svelte is inspired by React, its core rendering mechanism is completely different from React. We will get to that soon!

Who Uses Svelte?

Svelte is growing fast and ranking among the top three frameworks in many developer surveys. Individual developers, as well as enterprises of all sizes, have started to include Svelte in the overall tech stack. 

Many high-profile web companies like Bloomberg, TeamSpeak, Tableplop, Reuters, Brave, and even Facebook are already using Svelte to improve the UI performance of key sections of their web apps.

Recently Decathlon upgraded its popular sporting goods store with Svelte and achieved smooth UI performance, faster page load times, and an overall better user experience. 

Another example is the 1Password.com Mobile app which provides an excellent user experience using Svelte. It ranks among the top-rated apps on both Google Play and App Store.

Check out Svelte official website to know more – Svelte framework

Svelte vs React: Key Concepts

The user interfaces in both Svelte and React are built using components. But there are many differences in how components are constructed at build time and rendered at run time.

State management and cross-component communication are also handled differently in Svelte and React.

Let us start off with React –

React

One needs to learn many concepts to build complex user interfaces in react. At the minimum, an understanding of the components, props, JSX, state, and hooks is required. 

React UI is made up of core library components, third-party reusable components, as well as app-specific custom components. You can define components as ES6 classes or as pure javascript functions, though class-based components are slowly going out of fashion due to complexity. 

Top-down react apps have <App> as the root component that imports other components or component hierarchies as required by the app interface. You can also go bottom-up and include standalone reusable react components in the existing apps. React components can be multi-level nested and can pass data among themselves.

React components markup is generally written using JSX, which is a syntax extension to JavaScript. It works similar to any template language but with the full power of Javascript. Note that JSX is neither easy to master nor mandatory but developers still use JSX as it helps in scaling and maintaining large apps. 

You may also like to read: Finding the best online react editor

Each component can be customized using Props that act more like arguments to a function. You can pass props to the component to control what it renders on the screen. 

Communication between components is managed by passing around props among them. Note that props are immutable and cannot be modified by the component using them for generating output. Mutable data in React is handled by using a state which can either be local to a component or a global shareable store for the entire app. 

For complex user interfaces, creating dedicated components to manage the state of the entire app is a common practice. Also, it is worth noting that as components hierarchy becomes complex, state management becomes difficult. React developers typically use Redux, Recoil, MobX or other react state management libraries for state management.  

Svelte

Svelte components appear more like plain old HTML files, you write javascript in <script></script> tags and the CSS goes between the <style></style> tags. The markup is more like a superset of HTML that works as per the Svelte specifications. Every Svelte component file is saved with .svelte extension.

Svelte components are self-complete and scope even the style tags. As an example, the H1 tag style can be set differently in each component. 

Svelte offers a much simpler solution for app state management. In Svelte, you do not need any external state management library. The framework itself includes the necessary features required for state management. 

The svelte framework utilizes the Svelte store to manage the state globally, it offers a subscribe method that notifies the subscribers of any changes in the state. Svelte stores are of two types, writable and readable. The writeable store can be updated by any component whereas a readable store can be used as an immutable store when you build the application. 

Cross-component communication in Svelte is managed by the Svelte context API. It offers two inbuilt functions namely setContext and getContext. To make a value available to the entire app, you can associate the value with a key and use the setContext method. When you need to use the value in a different component, simply use the getContext method and pass the key associated with the value to retrieve the value.

Rendering Performance: Svelte vs React

Performance is one area where Svelte outshines almost all popular frameworks including Angular, React, and even the mighty Vue. This doesn’t mean react lacks performance, the very reason for React’s success was its performance over the then-popular Angular. 

React achieved performance goals by introducing React Virtual DOM which essentially is a replica of the real DOM stored as javascript objects. Whenever the app state changes, React updates the in cache virtual DOM (VDOM) using a process called diffing.

But Why Virtual DOM?

Browser DOM manipulation is expensive as it involves screen repainting, and for that reason, updating the real DOM to re-render the UI for every change can make the UI go sluggish and slow. To overcome this, react bundles the changes at the VDOM level and does batch updates to the real DOM, and reduces screen repainting frequency. 

But don’t we need to update the screen with every change?

Imagine your app receiving data faster than the frame rate, updating the DOM and repainting the UI will be wasteful. Also, there might be background updates that are not a priority to be reflected on the UI, giving you the opportunity to defer and batch screen re-painting. 

But Svelte performance is even better, how?

Svelte is both a compiler and a framework. Svelte components are built using CSS, HTML, and Javascript written as per Svelte specifications. The svelte compiler compiles the components to plain framework independent javascript code which is packaged in component-specific svelte files. 

Furthermore, the vanilla javascript code in the compiled Svelte components also tracks top-level component variables/states. When required, the component state changes are applied to the DOM surgically by framework independent vanilla javascript code.

Another key reason for Svelte’s better performance is that it directly updates the real DOM instead of utilizing React like Virtual DOM.

When it comes to repainting the screen, it works more like React and pushes the updates in batches. Of course, there are techniques and methods to ensure screen re-rendering is done in an optimal way, but we will not get into that right now.

App Size: Svelte Apps are Tiny

App size plays an important role in page load time and smooth UI transitions. It is important to note that while increased network speeds have reduced the headache for developers but the app size still impacts the overall app user experience. 

Svelte apps are ultra-lightweight as compared to React and other frameworks. The Svelte app bundle size that ships over the network are significantly smaller due to below key reasons- 

• The core framework itself is tiny as compared to React
• Svelte UI components are compiled to optimized vanilla javascript at build time
• Lesser reliance on third-party libraries as frameworks offers many key features

Having said the above, it doesn’t mean you cannot achieve faster load times and smaller bundles with react, but it takes more effort. There are many bundle splitting and optimization techniques used by experienced React developers for ultra-fast page loads.

Mobile Development: React vs Svelte

Mobile development is another area where React plays a significant role with the help of React Native. React Native technology is built on top of React and is used heavily for building cross-platform desktop and mobile apps from a single code base. 

React native empowers web developers to create mobile apps without learning any other tech stack. It is worth noting that React Native ranks among the top technologies used for mobile apps development and competes directly with the likes of Flutter as well as native iOS & Android development. 

You can also use react knowledge to create hybrid apps with Ionic, Cordova, and Capacitor frameworks.

Svelte on the other hand hasn’t made a significant mark in this area. Though the Svelte community has created Svelte native for cross-platform apps development, it is far from being mainstream.

Another option to create mobile apps with svelte is Capacitor, again the overall adaption, community, and progress on this front are negligible.

Svelte and React: Ecosystem and Productivity

Svelte is superior to React in many areas but React still continues to be the king and arguably commands the largest community of UI developers. This is mainly because React is backed by Meta which continuously infuses new and modern features to keep React alive.

Google around and you will find many sophisticated developer tools for the react js, well written guides, tutorials, React IDE and editors, third-party libraries, ready-to-use templates, and much more.

Svelte on the other hand is still growing and far from competing react in this area. Many of the code editors and IDEs are still improving to treat Svelte as a first-class citizen. 

Developer Productivity in React and Svelte?

I haven’t seen many developers reporting productivity issues when building apps using React. Many developer tools like create-react-app, NextJS framework, Redux, and many ready-to-use react app templates give a head start to developers.

Furthermore, learning React is not too difficult, all you need to know is javascript, CSS, HTML, JSX, Redux, core React concepts, and a bit more. JSX might seem a little difficult to start with but that never appeared to be a show stopper. 

Speed development with Svelte…?

But here Comes Svelte which is even more productive, developers who have been happy with React for years are already getting second thoughts about the true benchmarks of speed development. 

The svelte syntax is much simpler, easy to read and write, the output is easy to understand & debug, and you write less code overall. 

Experts claim the same apps require almost 30% lesser code in Svelte as compared to React. Writing less code also means lesser defects, lesser testing efforts, and an overall reduction in the app development time.

Furthermore, with SvelteKit, you get batteries included framework that brings file system-based routing and sensible defaults to create web apps fast.

It wouldn’t be wrong to say that if you know the basics of frontend development, you can build a skeleton of any web app in a matter of hours using Svelte.

Svelte vs React: Developer’s Interest

Let us look at what developers are saying about their experience developing with Svelte and React, and which one gives them the most satisfaction to work with.

Below is an image taken from the state of JS (2021) survey indicates the satisfaction of developers –

Svelte ranks higher than React and the outcome essentially means that higher %age of developers would use Svelte again after trying it once. Furthermore, the love for Svelte is continuously increasing over the last three years, the highest in 2022. 

Also, check below the outcome of the stack overflow survey, developers voted on whether they love or dread a framework.

The results are quite astonishing and in favor of Svelte which ranks on top. What amazes me the most is that Svelte doesn’t only beat all the javascript frameworks, but also, every other technology available out there for web development, and it includes the likes of Spring, Django, and the mighty ASP.Net among many others. Survey link: State of JS Survey.

Svelte vs React: Quick Comparison

Closing Thoughts

Svelte and React are both enterprise-grade frameworks and are used by the masses. Web developers working with React swear by its benefits, specifically since React continues to improve even after a decade. Not only that, but you can also use React knowledge to develop Android and iOS apps using React native.

Svelte on the other hand has proved its mettle by offering unmatched performance and developer productivity. With the success of rapid app development with SvelteKit and Svelte’s entry into mobile app development, Svelte is in head-on competition with React.

This brings us to the end of the Svelte vs React debate! It is not too difficult to conclude that neither Svelte nor React comes out as the clear winner for everything. One should evaluate both to see the fitment in a given situation before selecting the one.