DEV Community

Cover image for What you prefer svelte or react?
Taimoor Sattar
Taimoor Sattar

Posted on

What you prefer svelte or react?

Svelte is getting popular nowadays, as it provides a small bundle size. But svelte is not popular as compare to react as the jobs posting favor mostly react. Moreover, Gatsby and Next.js are built over React.

It is hard to pick between these two, what is your thought on that? Is it good for a personal project?

Top comments (30)

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

Personally, I prefer neither, but I guess I'm a bit old fashioned by 'modern' web developer standards (I don't use TypeScript either, and ironically have yet to deal with a bug in my code that would have been caught by TypeScript).

Honestly, my thoughts barring that perspective are:

  • If you're just starting out, use neither. In fact, stay away from full app frameworks completely, and ideally away from stuff like jQuery too. Make sure you actually understand how JavaScript works and how the web API's work first, then start looking at stuff that abstracts that away, and you'll end up a much better developer in the long run. I can't count the number of bugs I've seen in software (not just web apps, but software in general) that got introduced because someone had no idea how the underlying platform actually worked.
  • Beyond that, the choice for me would come down to whether I'm doing something that truly needs React. Svelte is smaller, faster, and generally easier to work with with other frameworks than React is, so I'd pick it in preference to React in almost all cases I could.
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ
Collapse
 
rhymes profile image
rhymes

Svelte seems very easy and self contained. It seems to be created with the idea of lowering complexity and it compiles to code that doesn't require a runtime. Maybe that's enough to give it ago!

This might help:

Collapse
 
blindfish3 profile image
Ben Calder

Svelte! It's looking pretty good in terms of bundle size and performance; but I'm also really enjoying the experience working with it (despite my current editor not doing too well with syntax highlighting etc). It's just so straightforward to use:

  • minimal boilerplate
  • I much prefer the approach to defining HTML output
  • it should be really easy to onboard junior devs who will already be familiar with using HTML; and <script> and <style> tags :D
  • it provides some really useful optional functionality - e.g. transitions; window events (scroll) etc.

At the moment it's still rather young; so the only downside is persuading colleagues that it's a better choice than React.

Collapse
 
rdazvd profile image
Rafael de Azevedo • Edited

Svelte has conventions that can be considered a bit idiosyncratic, but are justified by its "keep it simple" philosophy. It is indeed comparatively performant (even though it is only significant in edge cases such as JS apps that are intensively reactive, targeted at low latency networks or embedded devices). Because Svelte's "compile step" strategy has generated a lot of discussion, it might influence future changes in how other view libraries (including React) deal with DOM manipulation.

The biggest downside of Svelte is that it lacks maturity. But I like its approach very much, and hope the industry sets a special place for it in the future.

PS: as a reinforcement of a point present in other replies to this post, I'd like to stress that if you are an aspiring developer, you are better off not getting caught up with questions of this sort. Ideally, people just starting out concentrate their efforts in becoming familiarized with core Web technologies (the HTML/CSS/JS triumvirate) and how they relate to abstractions such as Svelte or React

Collapse
 
juancarlospaco profile image
Juan Carlos

Between Svelte and React, then Svelte.
But I actually use Nim instead anyway.

Collapse
 
hexrcs profile image
hexrcs

Nim, the system language? I'm tempted to learn it but how is it related to UI development?

Collapse
 
juancarlospaco profile image
Juan Carlos

Compiles to JS/WASM, is similar to Svelte. But Templates/Macros/Types ❀️

Thread Thread
 
hexrcs profile image
hexrcs • Edited

Cool, saw the Nim Website Creator project on your GH, looks pretty neat! One of the reasons that I want to learn Nim is that the compiler spits out C code, which sounds amazing for portability.

Collapse
 
taimoorsattar7 profile image
Taimoor Sattar

Svelte Docs has something hard to understand. No clear writing about dynamic pages in svelte. or create a blog page etc.

Collapse
 
lingtalfi profile image
LingTalfi • Edited

Svelte.
(php developer opinion)

I'm used to do my js widgets using jquery. That works well, and I had nothing to complain about.
But one day I had a quite complex widget to do, and I wanted to try implement an mvp pattern in js, just for fun and to make my code more clean and organized.

I first did the es6 version, so I learned how to use node with babel to be able to use es6 classes while keeping cross browser compatibility. Being able to use fetch/await/etc... was very cool and it was an improvement already, my widget was cool at that point.

My widget at that point was using handlebars templates and jquery ui dialog/sortable, select2, to achieve what it needed to.

But then I stumbled upon this react speech: youtube.com/watch?v=x7cQ3mrcKaY.
This video claimed that maybe using templates such as handlebars was a bad idea, and that there was a better way. As I'm a big fan of clean code, that video got my interest and I gave react a try.

In fact I re-wrote my whole widget (a file uploader widget like plupload, work in progress) using react.
What I found so cool with react was the data binding idea: basically I could get rid of my handlebar template and think of it as a set of variables called "state" in react. The nice thing about this thinking is that you declare the variable once, and they remain as they should in your widget.

Since I had my previous es6 widget version to compare with, I was delighted to see that my code was getting more compact and more organized, easier to maintain. So I was a big fan of react at that point.

But soon I realized that if I dived more into react, I would be forced to use react all the way. In fact, I realize that react has very strict rules, and it hardly cohabit with other code style.
So basically, I felt that I had to "choose": either use react, or use the web stuff that I love.
At first I thought: woa the react community is active, they basically have rewritten almost any project I can think of for react. But then I thought: well that's because they don't have the choice: when you start using react, it doesn't cooperate well with your existing code.

To me that's the biggest drawback with react, it's too strict and doesn't let you keep your code style. So either you choose the web, or you choose react (that's how I felt).

At that point I was desperate because I had spend a lot of hours learning react, the toolchain (what a pain this thing), and in the end I was faced with this choice: should I drop all my previous knowledge of js widget creation and dive into react, or should I keep using the other web technologies and drop react?

In the end, I thought that although react helped me write more efficient code, and more organized code, the web approach (as in react vs the web) is more flexible, as I can always write react like code if I want using vanilla js. The only thing I can't do (easily) is the virtual dom performance boost that react gives you.

I was ready to give up react, and regain more flexibility, until I stumbled upon this svelte video:
youtube.com/watch?v=AdNJ3fydeao&fe..., which basically had the same hype that react had, but even more so.

It of course caught my interest and I re-wrote my widget for the third time (currently working on it).
I can already tell you: svelte solved all the problems I had with react: it cooperates very well with my old widget code. I can still use jquery if I want, I can still use the web if I want, it's faster than react, because it doesn't use an artificial virtual dom, but instead compiles the code with vanilla js.
Faster, and much lighter (as the compiler only includes the feature your code actually use).

Basically, svelte gives you the power of data-binding in your app without extra cost, period.
This power is extremely beneficial for code organization, readability and efficiency. My widget js now looks so cool with svelte, much fewer lines, much cleaner.

Plus, you can merge svelte syntax into your existing html code, whereas react "forces" you to use jsx (what a pain in the ass when I re-think about it).

Plus, svelte has scoped css natively, and it lets you use the three things: html, js and css in the same file, extending the idea of react to use js and html in the same file.

To me, svelte killed react no question about it.

In fact, in my head it's pretty clear: first there was the web (jquery, all libs), then came react that brought the idea of data-binding (but the implementation was clumsy/complex) then came svelte, which brought data-binding the right way.

I might occasionally re-use my old web only approach for small widgets, but as soon as I need data-binding in my code, svelte will be my goto tool from now on. There is no going back to react ever.
React is dead technology (personal opinion of course).

Collapse
 
csaltos profile image
Carlos Saltos

Thanks for sharing !! ... it’s a very valuable experience !! πŸ‘πŸ˜Ž

Collapse
 
amycheng profile image
Amy Cheng

Svelte is great for personal projects! I find it was easier to get up and running with Svelte than it was with React. However, Svelte might not scale well, if only because React has better tooling. React has things like Storybook, Redux. It plays well with GraphQL and Styled components. Those tools help solve problems like managing a large UI library and data flows. Svelte just doesn't have those tools (yet).

Collapse
 
taimoorsattar7 profile image
Taimoor Sattar

It has good performance and also small in size; but limited in docs. Gatsby and Next.js are built on react; it is easy to create blog and website. But in svelte, creating dynamic pages for blog post is quite difficult task.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Totally agree. JSX makes me want to vomit every time I see it