DEV Community

loading...

Discussion on: What you prefer svelte or react?

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 !! πŸ‘πŸ˜Ž