DEV Community

loading...
Cover image for What you prefer svelte or react?

What you prefer svelte or react?

taimoorsattar7 profile image Taimoor Sattar ・1 min read

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?

Discussion

pic
Editor guide
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
Collapse
jfbrennan profile image
Jordan Brennan

Riot is great! So simple, but still really powerful if you need to architect something big. Vue Single File Components and Svelte are a close second. I give React about 1 hour of my time every 6 months or so and I just leave shaking my head going "WHYYYY?!?!?"

Collapse
jonrandy profile image
Jon Randy

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

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
v0idifier profile image
void

one point I see that no one is making is performance. React is stupidly slow (any react app on my computer is slow). Svelte is really fast. And it's simpler to code with it.

Collapse
taimoorsattar7 profile image
Taimoor Sattar Author

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
v0idifier profile image
void

where's the lack of docs on svelte? it has plenty of docs in many different forms. also, you're not supposed to create dynamic pages for a blog. Use Jekyll, ffs.

Thread Thread
taimoorsattar7 profile image
Taimoor Sattar Author

Svelte Docs is good; I mean the stuff like Graphql, typescript is the future improvement of svelte.

Thread Thread
v0idifier profile image
void

well, after using graphql a lot, I hate the ecosystem. it's not flexible at all. I'm talking about the official Apollo things. the docs suck. and about typescript, it's a valid point although I don't use it.

Thread Thread
csaltos profile image
Carlos Saltos

Svelte supports TypeScripts since months already.

GraphQL can be useful when you don’t have a solid backend service but otherwise just create an endpoint with what you need to request and that’s it ... you can even choose the language for the backend API server: Javascript, PHP, C#, Rust, Scala, whatever you like the most

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

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
lingtalfi profile image
LingTalfi

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
juancarlospaco profile image
Juan Carlos

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

Collapse
hexrcs profile image
Xiaoru Li 🇨🇳🇩🇪

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
Xiaoru Li 🇨🇳🇩🇪

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 Author

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

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
cubiclebuddha profile image
Cubicle Buddha

Yea without TypeScript support I wot be picking it up for anything other than hobby projects. Side note: since TS doesn’t lint html files it’s unclear when if ever it will support Svelte.

Collapse
bscott profile image
Collapse
gaui profile image
Gudjon

I prefer React. Svelte reminds me so much of Vue. The semantics are similar. But this HTML templating syntax is horrendous and gives me nightmares from AngularJS.

Collapse
wademartin profile image
Wade

I've used both and Svelte definitely is easier to learn and has a more enjoyable dev experience, from my perspective as someone quite young in their dev career. I also really like a lot of the inbuilt functionality that svelte has such as transitions, window bindings, reactive declarations and reactive statements. If I had just learned HTML/CSS/JS and was looking to learn my first framework, between react and svelte it would be svelte.

Collapse
jerliyah profile image
Jerliyah

Svelte!

Collapse
itsjzt profile image
Saurabh Sharma

I prefer svelte but use react for now.

Collapse
fuksito profile image
Vitaliy Yanchuk

Don't see any reason why I would need to switch from React to some other framework like Vue or Svetle

Collapse
csaltos profile image
Carlos Saltos

That makes me remember my grandmother when I changed her computer Windows 95 to Linux ... she asked: why ?

Collapse
giorgosk profile image
Giorgos Kontopoulos 👀

Svelte supports typescript since July 2020 svelte.dev/blog/svelte-and-typescript

Collapse
csaltos profile image
Carlos Saltos

Now Svelte supports TypeScript