DEV Community

Cover image for Why I chose Svelte over React?

Why I chose Svelte over React?

Alish Giri on June 12, 2024

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 ne...
Collapse
 
gunslingor profile image
gunslingor • 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.

Collapse
 
cmacu profile image
Stasi Vladimirov

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…

Collapse
 
alishgiri profile image
Alish Giri

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

Collapse
 
gunslingor profile image
gunslingor

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.

Collapse
 
jluterek profile image
James Luterek

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.

Collapse
 
gunslingor profile image
gunslingor

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.

Collapse
 
alishgiri profile image
Alish Giri

I agree!

Collapse
 
blindfish3 profile image
Ben Calder

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 😅

Collapse
 
gunslingor profile image
gunslingor

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.

Collapse
 
alishgiri profile image
Alish Giri

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.

Collapse
 
gunslingor profile image
gunslingor

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

Thread Thread
 
alishgiri profile image
Alish Giri

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

Collapse
 
brense profile image
Rense Bakker

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.

Collapse
 
alishgiri profile image
Alish Giri

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.

Collapse
 
schmoris profile image
Boris

@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.

Collapse
 
dse profile image
d.s.e

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.

Collapse
 
uciharis profile image
the hengker

omg that is a beauty of svelte !

Collapse
 
tablepad profile image
Tablepad • Edited

Great

Collapse
 
radhesoni profile image
Radhe Kishan Soni

Eye catching titles these days.

Collapse
 
kaushal01 profile image
Kaushal

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

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

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).

Collapse
 
alishgiri profile image
Alish Giri

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.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

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

Collapse
 
kamtoeddy profile image
Kamto Eddy

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

<p>{count} x 2 = {doubled}</p>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alishgiri profile image
Alish Giri • Edited

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

Collapse
 
abd_alhak_shkhashero profile image
Abd Alhak Shkhashero • 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 🌷

Collapse
 
hsinghbettermode profile image
Harmeet Singh

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.

Collapse
 
alishgiri profile image
Alish Giri

It is understandable Harmeet.

The only reason I liked Svelte is because of its performance and bundle size.

Collapse
 
hazzazbinfaiz profile image
Md. Hazzaz Bin Faiz

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.

Collapse
 
alishgiri profile image
Alish Giri

Yes, it does @hazzazbinfaiz. Thank you.

Collapse
 
juliocamposswork profile image
Julio Campos

Agreed, but i like more Vue is similar to Svelt

Collapse
 
devved2017 profile image
ved

Father is coming called htmx