In the web development world, sometimes it can feel like a new frontend framework comes out every day! Most come and go, but one thing is for sure: Svelte is here to stay.
That does not necessarily mean you should drop everything and learn it today, though! Always chasing the latest trend can leave you distracted and overwhelmed.
This post will answer should I learn React or Svelte? once and for all.
You'll see some code examples that explain why React developers go bananas for Svelte, but we also have to be realistic.
React has been around a lot longer. There are more libraries, support, and jobs available.
Can Svelte still replace React? Let's find out!
- 📍 What is React?
- 📍 What is Svelte?
- 📍 5 differences between React and Svelte
- Svelte has smaller bundle sizes
- Svelte is easier to learn
- Svelte compiles with pure HTML, CSS, and JavaScript
- React has way more libraries
- React has React Native
- 📍 Is React a library or a framework?
- 📍 Comparing a React and Svelte project line by line
- 📍 Is Svelte Faster than React?
- 📍 When to switch from React to Svelte
- 📍 The Verdict
What is React?
Let's start with the one you’ve probably already heard about, React.
React is a progressive JavaScript frontend framework (or library depending on who you ask) that helps you build complex web UIs.
Created in 2013 by Facebook (now Meta) it was able to take a foothold in the frontend web development space pretty quickly.
React at its core is concerned with state and rendering state, which means to use it you have to add other libraries to handle client-side functionality and routing.
What is Svelte?
Svelte is also a front-end JavaScript framework with a focus on simplicity and speed.
It takes a more behind-the-scenes (magic) style approach where it interprets very basic-looking JavaScript code and handles UI and state management for you:
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Svelte was created in 2016 by a developer from New York Times, Rich Harris, for handling complex charts and graphs in a performant way. It grew from there into a highly loved competitor to the likes of React and Vue.
5 differences between React and Svelte
1. Svelte has significantly smaller build bundle size
The deployed bundle size of the identical (in functionality) applications we built below is 41.2 kB for React vs 2.1 kB for Svelte. That is almost a 20x reduction 🤯
To get these numbers I built an app with the same functionality in both Svelte and React. We will dive into those apps in React vs Svelte code breakdown section.
I built an identical app with React and Svelte. Look how much smaller the Svelte bundle is!
2. Svelte is easier to learn because of its simple syntax
Svelte takes a more behind-the-scenes magic approach, allowing you to write very low amounts of boilerplate or syntax sugar to accomplish complex bindings. The templating syntax is just HTML with some extra, which is considerably different and easier to learn than JSX (the React equivalent).
React reactive variable declaration:
Svelte reactive variable declaration:
Svelte looks like plain JavaScript but it has the exact same functionality as React. Updating the Svelte variable will automatically update the UI element it is placed in.
3. Svelte complies with pure HTML, CSS, and JavaScript
Svelte compiles the code you write into basic HTML, CSS and JavaScript. It does not need to be bundled with your code like React!
React.js needs to be present in a bundle to do all the proper virtual DOM diffing and creation, Svelte does not use a virtual DOM to handle UI. Instead, it opts for basic JavaScript element creation functions like document.createElement.
4. React has way more libraries and packages built for it
React has been around for 3 more years and is also the de facto king of JavaScript frameworks currently 👑. Because of this, it has a ton of user and company-created packages.
The user-created packages are usually just to make things like routing, and state management easier or add a slider, lightbox, etc. These are not critical as Svelte has solid options and is compatible/adaptable to most JavaScript plugins.
Where it can get a bit more difficult is some integrations will create React packages well before any other framework. I’ve mostly run into this while working on Web3 projects on Solana and Ethereum.
5. React has React Native
React Native is one of the most highly used and supported cross-platform frameworks. It gives the ability to use React for creating iOS and Android applications. All from one code base. It has a ton of libraries, support and learning resources due to its maturity.
Although there are alternatives for Svelte like a NativeScript adaption called Svelte-native, these do not have the same reliability and feature set as React-native.
Is React a library or a framework?
Although React is often referred to as a framework, it can be argued that it is more of a library due to its scope. It specifically handles managing the state of a UI and keeping it in sync with the state of data in the app.
Because of this, it requires 3rd party libraries to handle app routing (React Router), UI creation (JSX), and state management between components (Redux).
Svelte on the other hand has all of the above features built in and is therefore more of a complete solution for UI management.
You can see most people agree that it is a library but there is still some debate 👇
Is React a library or a framework?12:52 PM - 29 Nov 2022
Comparing a React and Svelte project line by line
The best way to compare two pieces of web technology is to dive in and build with them. Building the exact same application can help to see how each library/framework handles different features.
We will take a look at:
- Conditional rendering
- Template looping
- Updating state
- Event hooks
What are we building?
Coding is thirsty work so we will be building a simple web app that allows a user to track how many cups of water (or 🍺) they are drinking throughout the day.
With the added bonus of showing a history of each cup that was drunk and when.
We will keep the UI simple to focus more on the underlying framework. (See UI below)
React
To breakdown the code first lets dive into some React concepts and terms 👇
React has several types of syntax that you need to learn. Hooks, state, and templating (JSX) are the main ones.
Hooks - allow you to tap into the lifecycle of the app
State - allows you to update UI elements based on changes in data. It ties ‘state’ (or more simply variable) changes to UI updates
Templating - allows you to use variables and JavaScript directly in the HTML
Styling with React components is typically handled from a separate .css (or .scss) file.
React code breakdown
Variables are set using the useState hook which allows for the variables to be updated and the UI to render those updates dynamically.
useEffect is used to set today's date on load of the application.
The JSX template is using basic {} notation as well as standard JavaScript function right in the HTML allowing for variables to be displayed and arrays to be looped over (using .map).
Svelte
Svelte takes a different approach with a much more ‘behind-the-scenes magic’ style. Logic in looks mostly like pure JavaScript. In the background that code is doing almost the same thing that the React code does.
Svelte still has hooks like onMount and onDestroy but simply assigning a variable and having it fully reactive and accessible in the template (HTML) doesn’t require any special syntax sugar.
Another big difference is you can write CSS/SCSS right in a Svelte component. This is just an option though as you can still import styles just like in React, but I’ve noticed that most Svelte projects use in-style components.
Svelte code breakdown
The code above instantiates a cupsOfWater array sets a new date variable to the current date.
A function is declared that creates a new date and stores it in a variable called cup which is then prepended to the cupsOfWater array.
The template section is much closer to HTML with some added functions. Again using {} notation you are able to reference any declared variable from the <script> section. You are also able to use event listeners (like on:click), conditionals (like {#if}) and looping with {#each}.
Explore and play with the code yourself here:
Is Svelte Faster than React?
Yes, all the way from fasting HTML generation to a faster build and development environment, Svelte outperforms React by a significant margin.
- generating HTML
- updating UI based on state
- First contentful paint
- Time to interact
- Speed Index
All of these see a measurable difference with Svelte having the edge. The larger and more complex your application is, the more the difference will be noticed.
A great performance comparison can be seen in an article from Zeitspace.
Is Svelte better than React?
When starting a new project Svelte has enough going for it that it should always be a consideration.
Having said that, React is still absolutely dominating Svelte in usage. This can lead to issues with 3rd party plugin support, hiring, and longevity of the project.
To counter that though, the very accessible nature of Svelte’s syntax makes it very easy to pick up, especially for React developers. This is something that companies can lean into when hiring for a Svelte project (don’t limit yourselves to Svelte developers).
When to switch from React to Svelte
Svelte is an amazing option for building a complex website or web app. Many established companies have started using Svelte for internal and external applications:
- 1Password
- Avast
- Chess.com
- Alaska Airlines
- Fusion Charts
- Rakuten
- GoDaddy
- IBM
- Square
- The NYT
- Philips
- And more according to svelte.com!
This doesn’t mean that you have to put your current React apps into the trash though!
So when is it the right time to reach for Svelte?
If your app/website:
- Requires a small bundle size because of bandwidth constraints
- Needs to be as fast as possible
- Needs to be built quickly
When is not the right time to reach for Svelte?
If your app/website:
- Relies heavily on 3rd party integrations/tools
- Will also be converted into a mobile application
These are quickly not becoming an issue but do require some research and due diligence before diving in.
The Verdict
This article has given you an overview on:
- How Svelte is different from React
- What makes Svelte better than React
- How Svelte code compares to React
- Where Svelte still falls short
With these comparisons under your belt, you should be able to make a decision on if you want
- Learn more about Svelte
- Use it for your next personal or work project
The best advice I have though is to jump in and try to build something in Svelte. If you’ve come from React I can almost guarantee you that you’ll appreciate the simplicity and speed.
Oldest comments (64)
Your Svelte code breakdown section shows react snippet. Can you fix it?
Great catch, sorry about that.
Just edited it with the right sandbox.
React in the end also uses basic DOM manipulation (if you dive into the framework code). I haven't used Svelte yet, although its something I'm tracking... I'm really not a fan of this weird looking template style comments inside your HTML code... It's seems to me like a step back to the days of ugly PHP template engines. However I'm just one person and unfortunately it seems I'm incapable of convincing people that this is a bad idea :(
haha, as I remember, before PHP template engine as Smarty, I had to mix HTML and CSS within PHP script files, exactly as same as what React devs have to do today: write HTML and CSS with JS script 😅
Uhm, and with svelte you're not? The difference is, in React you're only writing JavaScript (and jsx) it all follows JavaScript rules, you dont have to learn any weird syntax logic, like with smarty or svelte.
and with React, to handle state you need the weird hooks which comes with weird rules AND to use them properly without re-rendering mayhem you need to memorize
There are a lot of different state management solutions for React. If you dont like what is currently offered, you can easily write your own, its all standard JavaScript. Yes there are some hooks you should probably learn about when you want to properly use React but there's no weird syntax, its all basic JavaScript and JSX.
I learned Svelte before React, and now React feels unnecessarily complex every time I use it 🙈
I sort of disagree with the "React has more libraries" part by the way. You can use any JS library with Svelte.
So phrased differently, you could say "React requires libraries to be wrapped before usage"
Yeah it's always tough for me to go back to a React project after working in Svelte!
The trade-off is now you need to maintain a custom svelte-react wrapper.
imo, generally, more code, more problems.
Guess what now you need documentation, tests and more!
SolidJS and/or Marko for 2023. Check out Ryan Carniato on YouTube to find out why.
Interesting I'll for sure check it out!
I should probably also mention that Ryan is active on dev.to
dev.to/ryansolid
Svelte definitely looks cleaner and the idea of smaller bundles is appealing!
Great post, @mikhailkaran!
Appreciate all the help from you and team on the post!
Pleasure, simplicity and beauty are very important.
"Pleasure" is non-technical term, not easy to measure but very important.
Almost 10 years ago I had dilemma, what next modern language to learn: Python vs Ruby.
Then I examined list of popular ruby projects and list of popular python projects. And what I've found:
So, I decided Python is more fun to use. And yes, after many years with Python I still think I did right choice. It's pleasure to use Python both for work and for fun. And I work more efficiently when it's pleasure to work.
Also I think Python won this race and now much more popular. Because of "pleasure".
Now, I have little more then "hello world" experience with most popular frameworks and I'm impressed with Svelte and working with it. Clean, simple, easy. This is very important. And I think these defines future.
That's a great article & now that I've learned quite a bit about React I'm going to take a look at Svelte. Thanks for sharing.
Hey, i'm going to take a look at svelte for my project.
What do you'll recommend for create a school website from react and svelte
The svelte documentation has a great tutorial built in it! svelte.dev/tutorial/basics
If you need something a bit more guided I've created a Svelte for Beginners course on Udemy: udemy.com/course/svelte-for-beginn...
Solid.js for me.
But why not Angular? Although its high learning curve, Angular is a real framework and offers all you could need in native way (expecially state management and HTTP methods). IMHO Angular is the only choose in medium/big projects.
I think you're comparing react and svelte kit. Because svelte doesn't have routing baked in by default and svelte on it's own will render on client side, etc. Svelte kit is what adds most of the bells and whistles you were taking about in favor of svelte, just like NextJs for react.
Don't learn one framework, instead learn the concepts and patterns behind all of them – and the differences that can help you choose the right tool for the job.
No framework or library is a silver bullet. But the right choice can save you a lot of hassle.
By the way, svelte is great for smaller apps, but inexplicably doesn't scale too well. Try Solid.js.
Finally someone giving the right answer to beginners.
Not the first time seeing such an answer, but it is kind of overwhelming without the right knowledge. Would be grateful if you could specify some of the core concepts and patterns that you're talking about
You are right; I reached the same conclusion last Thursday and I'm already on it. The article is actually almost ready, but I want to proof-read it a few times after getting it out of my head, so I'll publish it next week. In it, I elaborate on state, effects, memoization, reactivity and templating.
Awesome! Eagerly await for the article 🔥
And here it is: dev.to/lexlohr/concepts-behind-mod...
I think 1. Learn JavaScript fundamentals really well and then 2. Learn framework fundamentals (any framework)
That will make it easy to switch to whichever one is needed.
what do you mean by " svelte is great for smaller apps, but inexplicably doesn't scale too well. Try Solid.js." why does svelte fail for larger apps? what does solid have that svelte doesnt and more importantly what is your affiliation with solidJS?
Have a look at this: dev.to/this-is-learning/javascript...
I'm not sure why this is the case - I would submit a PR to Svelte if I knew how to fix this.
Svelte outsourcers a lot of complexity into its wonderful transpiler. Solid only uses its transpilation for efficient templating and re-uses its reactive system for everything else.
And why is it important that I am part of the Solid.js community? I have merely stated an observed fact. You can test it for yourself.
Thank God, Zuckerbucks has a competitor in the rear view mirror. Not to mention Wasm. React just like the others is opinionated. Ridiculous in this day and age.
Svelte. There is no other answer. Svelte returns us to plain JS where we can use any library we want and we are not locked in to whatever is available for a framework. React has to go! It's anti patterns are a cancer on web development.
Thanks for this detailed comparison 🙏
No problem!
Svelte is way better than react, has less boilerplate, easier to maintain and easier to learn. If I am to build my personal project, Svelte is the way to go for me.
Same.