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.
Top comments (64)
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.
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.
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...
Finally someone giving the right answer to beginners.
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.
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!
Great article, well-written ... of course a simple code example like this does not prove that Svelte has all of the imaginable bases (use cases) covered like React has, but I'll just assume it has.
So we can conclude that Svelte has only pros, no cons, compared to React (except that React dominates "the market", but that's not really a characteristic of React itself but more a meta-characteristic).
The only "downside" of Svelte might be - that SolidJS might be even better? :)
Haha, I need to try SolidJS, been hearing great things.
Yeah, the real competition should be between Svelte and Solid, not between Svelte and React - but we're all "forced" to use React, even though it's inferior in almost all respects, because, well, it's the proverbial 900 pound gorilla in "the market" ... kind of saddens me, but oh well.
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
An effective way to learn something is to compare it to what you already know. Great comparison with React, it gave me a the gist of what Svelte is.
In all my time looking for jobs though, I have not seen a single job that had Svelte written anywhere (Canada). Interesting to see adoption by those big websites though. Excellent article!
It's slowly becoming more propular and easier to adopt. SvelteKit (next.js equivilant) has just been fully released out of beta (v1.0.0) so that should help with adoption.
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.
This is actually a really nice comparison.
Good to see that React gets more and more competitors which begin to reach the right level of stability and reliability to be a real competition.
This will lead to massive improvements in the React.js project, too, I can imagine.
I don't think Facebook wants React to be beaten by the new kids on the block and that they will rather choose to improve React to be much better in performance.
Also I wonder what else you could use at the moment as an alternative to React and in which cases?
What's currently good for creating different sized projects?
Small ones -> Svelte, ...?
Mid sized ones?
Enterprise level big ones?
Vue.js is a great alternative that has more and more usage in the real world.
The smaller ones like Solid and Astro are also creeping up.
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.
Your Svelte code breakdown section shows react snippet. Can you fix it?
Great catch, sorry about that.
Just edited it with the right sandbox.
There is a mistake in the article.
When comparing Svelte vs React I mentioned Svelte has a built in router and that is not true.
Will be doing a minor rewrite of that section shortly.
Sorry everyone!
Thanks for this detailed comparison 🙏
No problem!
Keep writing 🥳
Will do! 🫡
Great Article brother.
Appreciate it Sohrab!
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...
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.