React or Svelte: Which JavaScript Framework Should You Be Using in 2022?

Introduction

For frontend development, it is usually the battle of the Javascript frameworks.

Almost every year, new Javascript frameworks emerge with features that promise to outperform previous frameworks and libraries, especially the big three; React, Vue and Angular.

One such recent Javascript framework is Svelte, and it has caught the attention of companies and developers.

Before we proceed, I’d like to introduce you to a cool plugin, Copycat, that cuts down your development time by almost 35% by converting your Figma files to up-and-running React projects! Not only that, but it also has support for your favorite tools like Typescript, Bootstrap, and TailwindCSS, amongst others! Check it out here!

So, what is Svelte? What makes it stand out? Should you be using it?

This article discusses and compares Svelte to the industry standard, React, and answers the above questions.

What Is React?

React needs no introduction. After Node.js, it is the most used Javascript library, used by millions of websites worldwide.

React is a versatile, efficient, and adaptable Javascript library founded by Jordan Walke in 2011.

Facebook declared the library open-source in 2013, and it shot to the top of popularity ratings.

React, recognized as the most widely used library for creating both sophisticated and simple single-page apps as well as amazing interactive user interfaces, has captured the hearts of millions of developers all over the world. And also for a good reason.

Some of its outstanding features include;

• JSX
• Virtual DOM
• Component-based Architecture
• One-way Data Binding
• Declarative UI, amongst others

If you’re a beginner or developer looking for resources to get you started with React; here at CopyCat, we have a blog filled with robust, beginner-friendly React resources for you. Check it out here!

What Is Svelte?

Svelte is an open-source front-end compiler developed by Rich Harris and maintained by members of the Svelte core team. It ranks as the second most loved web framework and most loved Javascript framework in 2022 on the Stack Overflow Developer Survey.

It is also the front-end framework that has sparked the most interest since 2019.

Svelte offers a unique approach to creating web applications. It carries out its optimizations at compile time using its compiler as opposed to other Javascript frameworks that do the majority of the optimization work at runtime.

This method produces smaller application bundles and higher performance in addition to a more user-friendly developer experience for those with no prior knowledge of the contemporary tooling environment.

Svelte basically adds a few modifications to HTML and JavaScript. Otherwise, it largely adheres to the traditional web development model of HTML, CSS, and JS. In comparison to some of the other framework possibilities, it may need less learning of new concepts and technologies.

To learn more about Svelte, check out this video by Traversy Media – https://www.youtube.com/watch?v=3TVy6GdtNuQ

React and Svelte: Similarities

Both React and Svelte, though different, share some similarities;

• Svelte and React are two well-liked front-end frameworks.
• They are similar in that they both employ components, but they handle state and rendering in distinct ways despite both being built on JavaScript i.e. you will be writing Javascript code.
• Open-source initiatives distributed with the MIT license.
• They are both used to create user interfaces.
• HTML and CSS knowledge is required to use either.
• Node 8+ and npm are required to use either.
• Both can be used without restrictions for commercial projects.

React and Svelte: Differences

The major difference between Svelte and React would be the fact that Svelte is a JavaScript-based front-end compiler that is free and open-source, while React is a JavaScript front-end library that creates user interface elements using a variety of third-party components.

Almost every other difference between both tools relies on this simple difference. Having established this, let’s proceed with a detailed technical comparison of both tools.

React and Svelte: A technical comparison

A developer’s choice between both tools depends entirely on their preferences and the goal of the project itself. With this in view, here’s a comparison to guide your decisions and choice of framework.

Check out this video comparison on Youtube – https://www.youtube.com/watch?v=R5ukigGKpmo

Svelte vs React: Documentation

Both tools have great documentation. However, the React documentation is more comprehensive and explanatory, with multiple interactive tutorials and examples, due to its large number of contributors.

Svelte, although a fairly new tool, has pretty neat documentation itself. It has a tutorial section as well as an interactive playground where users can practice and see the output of their code in real time.

Svelte vs React: Syntax

React uses JSX, a JavaScript(JS) extension, as its syntax. React’s complexity is also a result of the fact that it combines HTML and JavaScript code.

Those who are unfamiliar with JavaScript may find it challenging to comprehend this.

However, because of its significantly simpler syntax, Svelte is simpler to learn. Svelte employs JavaScript classes, whereas React uses JS functions.

Classes can help Svelte code become more readable and concise.

Svelte vs React: Learning Curve

Because of its vast community and unique syntax, React has a challenging learning curve. It can be hard getting the hang of its component-driven approach if you’re a beginner developer with no previous computer science knowledge.

Because Svelte is a more recent framework, it is not as popular as React. However, it is simpler to understand than React due to its straightforward syntax.

React devs will need to use complicated components even if they merely want to create simple applications.

Svelte vs React: Performance

Performance is where Svelte really shines.

You see, the Document Object Model (DOM) is responsible for updating our app when we make changes to our code.

Every time there is a change to the code, the DOM updates, which consequentially slows down the performance of the app. However, by serving as temporary memory storage for UI changes, React’s Virtual DOM accelerates this procedure. Updates are postponed via a process referred to as the reconciliation process(also known as the virtual DOM diffing) until rendering and updating can be done efficiently.

When the app’s code is run, React leverages Virtual DOM to decompile it. Thus, React operates more quickly than conventional JavaScript languages because of the vDOM.

Svelte, however, goes a little further in terms of efficiency by disregarding the VDOM reconciliation procedure.

Svelte functions as a compiler that implements reactive programming for DOM rendering, i.e. with Svelte, you can quickly compile and convert any UI elements into incredibly clean code that updates the DOM.

It performs the majority of its work during the compilation process that happens during build time, in contrast to JS frameworks like React, which break down the app code utilizing a virtual DOM during runtime.

Svelte is therefore thought of as more reactive than React, as a serverless-first framework.

Svelte vs React: Community

Due to its popularity as one of the most utilized JavaScript platforms worldwide, React has a sizable developer community. To keep the JavaScript library usable, the community of React devs produces tutorials, guidelines, updates, components, and more.

React developers are in great demand due to the fact that a major company like Meta (Facebook) supports the framework.

Although Svelte is not very prevalent, devs who use it report major satisfaction with the tool, as shown by this survey.

Compared to the 320k+ active React developers on Reddit, the Svelte community is relatively small, with only 17k+ developers.

Svelte vs React: Bundle Size

Another unique feature of Svelte is that, when gzipped, its bundle size is significantly smaller than that of React, which is important for achieving faster loading times, improved responsiveness, cheaper bandwidth costs, and faster loading and UI render times.

Svelte’s GZipped version is 1.6 KB, but React’s GZipped version (with ReactDOM included) is 18.4 KB (considering React v18.2 and react-router-dom@6.4.1).

Svelte vs React: Developer Experience

Svelte did an excellent job of simplifying and cleaning up the mess that several frameworks may leave us with.

For example, Svelte allows us the convenience of skipping file imports and exports by doing it for us and saving us lines of code. Svelte also comes with in-built animations and effects as opposed to using React, with which you have to use third-party animation libraries.

Using simple JS, HTML, and CSS, the majority of what we see in Svelte is reminiscent of the traditional web development approaches.

React, on the other hand, needs more sophisticated programming skills, such as JSX and CSS-in-JS, to develop even the most straightforward interfaces.

Svelte vs React: Tools, Plugins, and Libraries

Due to React’s popularity, there are many tools and libraries available. Its extensive component library enables a quicker development process.

However, because Svelte is a more recent framework, there are fewer packages available. To build a more powerful application, you might need to spend money on third-party applications. The number of supporting plugins and packages is, nonetheless, growing rapidly.

Svelte vs React: Reusability

Reusing the components is possible with React. In Svelte, nevertheless, this is not feasible. Additionally, nesting components is not possible with Svelte.

Svelte vs React: Code Maintainability

Svelte’s code is easier to read and maintain than React’s. One must acknowledge that Svelte’s structure is just that much smoother, which is quite helpful when you need to define hundreds of components.

Having said that, React is tremendously useful for leveraging various pieces of code in multiple projects, which can significantly enhance teamwork and code sharing. If you hire fresh React engineers, you can expect them to catch up with the code relatively quickly, saving the team a ton of time and effort.

Installation and Scaffolding

Open two separate terminals on your local machine and run the following commands on each;

For Svelte,

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

For React,

npx create-react-app my-react-project
npm start

When you run both installation commands, we notice that the Svelte command runs faster. This is because, with Svelte, you’re not installing a utility per se, you’re cloning a Svelte template.

Another difference in the installation of both tools is that Svelte runs on Port 8080, while React runs on Port 3000.

Component Organization

React and Svelte both have different approaches to component organization

Svelte

Svelte components, in contrast, to React components, let you create code in a fashion that resembles writing old-school HTML, CSS, and JavaScript.

All your Javascript code goes into script tags which are usually declared at the top of your svelte file like so;

<script>
</script>

//HTML goes here

<style>
</style> 

You can enter the HTML for your component below the tags, exactly as in a typical HTML document.

After that, you can include styles inside style tags underneath your HTML. It’s important to note that each component’s styles are specific to that component only. This implies that you can style tags differently in each component without worrying that the styles would conflict when the component is imported.

React

The basic structure of a React component looks like this;

function MyComponent() {

}

export default MyComponent;

This program builds a MyComponent() function and exports it as a basic functional component. A very significant distinction between Svelte and React is that you do not export your components in Svelte.

The component organization with React gets trickier as the application grows, and that’s why plugins like CopyCat are important to take away the burden of component organization and save you development time.

State Management

Svelte

In Svelte, the state is initialized by creating a variable like so;

let name = Joe;

DOM updates in Svelte are triggered by the assignment of variables. This is possible because of Svelte’s reactive declarations, which automatically perform recomputations on state values. You can learn more about this here.

React

React v16+ provides a useState hook to initialize the state in React applications. The hook is first imported into the file where it is to be used. Then the state is initialized within the component just above the return block like so;

import {useState}, React from "react"

function App () {
	const [color, setColor] = useState('#000000');

	return(
		//JSX goes here
	)
}

Read more on the useState hook on the useState hook here.

Svelte vs React: Testing

 React code can be tested with ‘end-to-end’ tests, which involve using a simulated browser environment to test a React application. As a result, your app’s value grows while the time-to-market (TTM) is reduced.

Unit testing is available in Svelte via Svelte’s testing library. Svelte will provide you with cleaner, less bloated, and compressed code because the library itself has considerably fewer complex calculations and is much smaller in size when compared to React.

What companies use React?

React is used to create user interfaces by widely successful organizations, including Facebook, Instagram, Salesforce, Discord, Shopify, Skype, and Pinterest.

Companies prefer React to design the front end of their web apps due to the availability of a large number of React developers globally.

React is a popular choice among developers and businesses because it is fast, simple to use, and scalable.

What companies use Svelte?

Major corporations rely on Svelte for their websites, including Yahoo, Rakuten, Bloomberg, Facebook, Square, ByteDance, Spotify, Reuters, The New York Times, Apple, Ikea, and Brave, amongst others.

Companies choose Svelte because it automatically compiles the application’s code to clean JavaScript while coding.

As a result, the performance of programs created in Svelte is not hampered by framework abstractions.

When To Use React?

React is a versatile component library that excels at state management. As a result, websites and applications that utilize React components can communicate data without reloading the page. React is best suited for user interfaces that need a lot of interaction from the user.

Examples include;

• video streaming applications
• web applications
• mobile applications
• desktop applications
• e-commerce sites
• JAMstack sites

React is helpful when;

• You want to hire developers easily
• You want access to a large community of developers for support
• building user interfaces that scale
• optimizing for code reusability

When To Use Svelte?

Given how closely its code resembles Vanilla JavaScript, Svelte is recognized for being straightforward. Svelte enables developers to accomplish their goals with less code. Therefore, If website developers want to create an extremely minimal package size, they should use Svelte.

Svelte-written programs are practical for usage in low-capacity or low-power devices. Svelte provides you with more control over state management, routing, and designing specialized infrastructure.

Svelte is helpful for;

• DOM manipulation
• reactive frameworks
• developing markets.
• Faster development
• More maintainable code
• Exceptional performance without the virtual DOM
• Compact bundle size

FAQ

Is Svelte good for big applications?

The compiler design of Svelte allows for incredible UX and DX tradeoffs. Its lack of libraries and plugins compared to other frameworks may be a turnoff for you. In general, there isn’t anything that React can’t accomplish that Svelte can’t.

Svelte can therefore be adopted for large-scale web applications.

Is Svelte better than React?

Both frameworks have their pros and cons, as discussed above. The factors you’re optimizing for with your application, however, determine which is the better tool for you.

Can Svelte be used with React?

Yes. Svelte can be used with React by use of a utility called svelte-adapter. This simple tool enables the use of Svelte components within React or Vue components.

It provides adapters for both React and Vue that let you give props and react to events in ways that make sense for each library.

Is learning Svelte worth it?

Yes. There’s a recent widespread adoption of the framework by major companies, so its potential is very high. Usage of svelte has increased from 8% in 2020 to 20% in 2022. Svelte now has a 94% awareness rate, up from 75% previously. In the previous three years, Svelte has also been rated as the most loved JavaScript framework.

Final Thoughts

When the project needs are well-defined, the debate between Svelte and React is simple to understand.

Knowing HTML, CSS and Javascript are useful when using both tools in building user interfaces.

Use Svelte in your applications for a reduced bundle size, maintainable code, and excellent performance without the VDOM. Because of the framework’s simplicity, Svelte allows developers to build a web application easily.

Maintaining the stability of your application is simple with React, as React developers have a vibrant community that aids in resolving questions and issues found during development.

At CopyCat, we have a blog filled with well-articulated and easy-to-understand articles for React developers. Check it out here!