Alish Giri

Posted on Jun 12 • Updated on Jun 14

Why I chose Svelte over React?

#svelte #react #javascript

Svelte and React are both used for Web development. React is a fantastic tool which has dominated the industry for a while now whereas Svelte is newer in the field and is gaining significant popularity.

Overview

When I first heard about Svelte I wanted to try it out and was surprised to see how less code you have to write to do the same amount of work in React.

Lets take a look at code below,

React

import { useState } from 'react';

const FormExample = () => {
  const [name, setName] = useState();
  const [age, setAge] = useState();

  function handleNameChange(event) {
    setName(event.target.value);
  };

  function handleAgeChange(event) {
    setAge(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="text" value={age} onChange={handleAgeChange} />
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

export default FormExample;

Svelte

<script>
  let name = "";
  let age = "";
</script>

<input type="text" bind:value={name}>
<input type="text" bind:value={age}>
<p>Name: {name}</p>
<p>Age: {age}</p>

You can clearly see how simple Svelte is.

Just from this example we can tell that React has a steep learning curve than Svelte.

Some of the learning curve of React includes:

Concept of JSX and Virtual DOM.
Different Hooks used for different purpose.
Next.js for Server-side rendering (SSR).
Handling bundle size as the app grows larger.
Rapid upgrades to the ecosystem, difficult to keep up.
Utilizing React Developer Tools for debugging.
React Router for navigation.

On the other hand Svelte just uses plain Javascript, HTML and CSS. In addtion, it only introduces few new syntax making is easier to learn.

<script>
  let count = 0;
  $: timesTwo = count * 2;

  function onClick() {
    count += 1;
  }
</script>

<button on:click={onClick}>Click me!</button>
<p>{count} x 2 = {timesTwo}</p>

<style>
  p {
    color: blue;
  }
</style>

Bundle Size & Performance

Svelte app has lesser bundle size than for React app which also contributes to the faster app load and improved performance in the production.

The production built of the Svelte app is lighter and surgically updates the DOM without relying on any complex reconciliation techniques and use of Virtual DOM which adds more code to the bundle as in React.

Conclusion

React is still the most famous tool for web development. Svelte is comparatively new and gaining popularity due to its ease of use.

When taking about cross-platform flexibility, Svelte also has Svelte Native like the way React has React Native for mobile app development.

Top comments (32)

gunslingor • Jun 13 • Edited

If that's svelt, I'll never use it. Ancient stuff, my guess your only discussing the templating aspect of svelt, and don't quite understand how to think in react. Templates are critical for this realm, but in the end we are programmers, html is a resource to be used, generated and maintained... its not the means by which we do it... so it's like shoving the process pipeline into the product, it's basically not unique at all just inverts the wrapper to html instead of js? I mean, one of the main advantages of jsx in functional components is you don't have to bind anything, it's already bound and you can focus on templating aspects of... the template... instead of variable binding.

James Luterek • Jun 13

JSX is both great and absolutely terrible at the same time. If you are a javascript developer it's awesome as everything is JS. If you are trying to build an application with a large team it's terrible. JSX makes it difficult for a designer or dev-1 to contribute to the project, instead everything must go through a more senior JS developer. This increases costs and slows down projects.

Templating has been around for a _long _time, but it's longevity is because it's useful.

There are definitely pros and cons to consider.

gunslingor • Jun 13

Sound argument. I do miss some things about the olden days. In the end, it really doesn't matter, code is for humans not machines, and what really matters is the data, how it's structured, how well its organized and performant. The main thing I miss is frameworks without workarounds, because the workarounds become the norm for apps too often. Forced organization is the goal on big teams, whatever the framework... and you need an engineer for that imho... someone beyond a senior js developer. There is great risk without, over designed products.

Alish Giri • Jun 13

I agree!

Stasi Vladimirov • Jun 13

Warning, this is either written by AI or the person who wrote it was drunk. Either way it’s a good example of someone trying to sound like an expert and has no idea what they are talking about…

Alish Giri • Jun 13

haha you read my mind. It is probably a bot!

gunslingor • Jun 13

I am an expert, I am drunk, and I absolutely don't know nothing bout no svelt... said the half human robot hybrid from france.

Ben Calder • Jun 17

Svelte is a component based front-end library - just like React - but tries to keep syntax as close to native as possible. It is getting a lot of praise over developer experience and is also highly performant.

Only possible downsides are the smaller community and assets (e.g. UI libs) since it's not as mature.

I'd highly recommend trying the interactive tutorial (learn.svelte.dev/tutorial/welcome-...) to gain a proper understanding before simply dismissing it 😅

gunslingor • Jun 17

Your probably right... but I kind of thought the article would make that unnecessary. Anywho, they all work... its never the tool but what you build with it in the end.

Alish Giri • Jun 13

Thanks for the feedback. But Svelte is a Templating Language. It is so elegant and minimalistic that it just looks like plain html, CSS and Javascript.

Also Svelte compiles the template at build time so it does not require a middleman, whereas React relies on runtime transformations.

gunslingor • Jun 13

Ok, cool. Then the title should be svelt over jsx right, not react? I know nothing of svelt, except this article, lol.

Alish Giri • Jun 13

Please try Svelte once and then you will agree on the title of this article. 😄

Rense Bakker • Jun 13

React has less hooks you need to learn, compared to svelte directives you need to learn and the only thing you have to learn about jsx is that it works and that you can use it inside JavaScript code 😛 jsx is actually much closer to the html spec in terms of attributes than svelte element directives.

Svelte just uses plain Javascript, HTML and CSS

Thats just not true. Because you use script tags in svelte, doesn't make the JavaScript you use there closer to vanilla. Infact it's the other way around. The js your write in React === vanilla JS.
You also learn more about important js concepts, like closures when using React, because all React components and hooks heavily rely on closures. In svelte the closures are hidden inside the framework in a blackbox, making svelte code appear like pure magic.

$: timesTwo = count * 2; <= that definitely won't parse as js.

Also, the input field comparison is not entirely fair, because making controlled inputs in React is different from what you're doing in svelte. React also supports uncontrolled inputs, which will make the code look much more similar to your svelte example.

Alish Giri • Jun 13

Thanks @brense. You have surely made some valid points.

And I want to further add few more things. React's hooks do have a greater learning curve than Svelte's HTML directives, this is at least what I found when working with Svelte. Not sure I can fully agree on what you have said about closures. It really depends on the project and its requirements. Closure is a technique/concept in Javascript and can be applied to Svelte app with no problem.

Also can it be that React has slightly complex setup like the way Angular 2+ had? I started web development with Angular 4 and I switched to React because I found it to be much lighter than Angular 2+. Now that Svelte is out, I am finding React to be much more complex lol. I think most developer who has tried Svelte will agree because my opinion is not biased.

And Yeah, Svelte is not entirely plain Javascript when you are developing, but it does compile to a vanilla Javascript during build process.

Finally, even without input filed comparison Svelte tend to use less code than React. Please do try Svelte once and see what you think.

Once again thanks for your feedback.

Boris • Jun 13

@brense

$: timesTwo = count * 2;

I think it qualifies as a label statement: developer.mozilla.org/en-US/docs/W...

I think the intent is to use valid JS syntax while the compiler does some magic with it, but I'm really not sure, heard it once in an interview with Rich Harris, the creator of Svelte.

d.s.e • Jun 15

Before I discovered Svelte, I was evaluating Vue in comparison to React.
Vue Code is very well structured and easy to write AND read compared to React, which requires way more code to achieve the same. I also never liked the JSX style of mixing JS and HTML.
What finally brought me to Svelte besides the simplicity was the performance aspect. It has a similar code structure like Vue, but due to the compilation to plain JS without any virtual DOM the spedd gain was amazing.

If I had to start a new web application, I would always prefer Svelte for the frontend. Unfortunately most projects still demand using that old React stuff; I assume it's because project managers know nothing else.

the hengker • Jun 18

omg that is a beauty of svelte !

Radhe Kishan Soni • Jun 14

Eye catching titles these days.

Tablepad • Jun 18 • Edited

Great

Kaushal • Jun 14

I wonder if all these comments were same type of comments when react came out and people were using jquery or php for web development. Or new angular came out when people started using react. or vue came out when react became popular or nextjs came out i mean the list goes on. But people are expressing their opinions thats good it will give the creators more feedback on what to do and fix

Juan F Gonzalez • Jun 16

Add the fact that Svelte is about to get even better to use with the introduction of Runes. Less boilerplate to write and less "magical" effects (something that React is plagued with).

Alish Giri • Jun 16

Thanks for pointing it out. I did not know about Runes until now.

I will definitely have a separate article about it once I am comfortable using it.

Juan F Gonzalez • Jun 16

Sure thing! Give it a go. I think you'll like how simple it becomes.

Kamto Eddy • Jun 14

Hey,
in the last snippet, I think the variable doubled is undefined

<p>{count} x 2 = {doubled}</p>

Alish Giri • Jun 14 • Edited

Your are right! I have replaced doubled with timesTwo. Thanks.

Abd Alhak Shkhashero • Jun 13 • Edited

From the code above (which has noticable mistakes in both React and Svelte) I can tell that Svelte isn't worth trying (at least for now). However if you like the syntax, I really encourage you to check Vue if you haven't already. It's wayy more popular, has been around for a while, and has a large community. Happy coading 🌷

Md. Hazzaz Bin Faiz • Jun 15

I've been working on both react and svelte projects. There are pros and cons. I am not talking about technical stuff.

But working on a react project takes more time then doing same work on svelte project.

Svelte saves my time more then react.

Alish Giri • Jun 15

Yes, it does @hazzazbinfaiz. Thank you.

Harmeet Singh • Jun 17

Advocates for alternatives to React often overlook that React achieves its goals without introducing a new mini-language in many ways. Vue.js’s directives didn’t appeal to me, and I find Svelte’s similarly unappealing. Perhaps the next framework will be the true React competitor.