Reactive Variables Svelte vs React - Weekly Svelte

Become a Level Up Pro and take your web skills to the next level!

Svelte for Beginners

The best web development podcast out there
Syntax with Wes Bos and Scott Tolinski

[syntaxfm]

FYI Svensday is probably not going to be the final name. For now it's just going to be "Weekly Svelte".
Also, LMK what you'd like to see out of this weekly series. I'd love to do a whole episode diving into the "magic" of Svelte and look at the code that updates the UI.

[TannerBarcelos]

I love React, it got me my first job and it enabled me to pass my web dev electives with ease in my senior year of my CS degree. However, Svelte as I have come to learn more and more about it is simply amazing. To me, Svelte makes UI state and updates from some 'thing' happening more comparable to normal programming than what React requires with special functions for state management, etc. To update a variable in C++, Python, Java, TS/JS, it is all some variation of, for example, value++; If I do on:click{() => value++} in Svelte, this feels like plain programming but also makes svelte feel "normal" and close to event handlers in plain JS / DOM manipulation. Having to bring in some special function called a hook, which then requires users to learn what a hook even is, makes things more cumbersome but more importantly, MORE abstract and MORE separated from core programming and being closer to the language and control over your code. To me, Svelte does it all much better... and to preface this all - My current company, and my last one, both used React and I use React a lot. I do not not like it - I just love Svelte and think it is equivalent to Python versus Java just like @Victor Cozhuhari stated.

I think all this debate, and the issues that come with the arguments is that this is something radically different than what so many people are used to in React. It looks different, feels different, etc. Because many never leave that ecosystem, they are inclined to believe that all the Reacty ways of things are the only ways. And I get it, but I challenge anyone on the fence to give Svelte a try and you will never want to look back!

[RodrigoDAgostino]

I’m loving these series! Keep up the good work, Scott! :)

[kylerjohnson]

Can't get enough of your Svelte content! Thanks Scott!

[vitiok]

React vs Svelte reminds me of a situation with Java vs Python. I saw similar memes about them many years ago. Simple always overcomes complex. Even if it is a bit worse. But Svelte isn't even worse than React! I think in a few years Vue and Svelte will grow and React will slowly move towards the legacy projects.

[vladmacovei]

Very good points! This video might finally push me to try Svelte. Also, love the podcast!

As a interesting point regarding templating, i believe Vue actually uses valid html. Parsed nevertheless but valid.

[sven]

Oh cool! Svensday! Its exactly my day! 😁

[TeddyStanowski]

the one dislike is from a react fanboy

[Sisufyable]

In the meme, what is shown for react is just what the Svelte compiler adds. So that's the magic. The Svelte compiler adds the boilerplate reactive code for you.

Great video like always, been using svelte since 2 years in projects, so far i don’t think im going back to react, been doing amazing stuff with svelte, i recent built a CRM using sveltekit

[kyleshifflett]

Do you have any metrics on performance between your site that was build using React vs Svelte? I’d love to know :)

[HeyDan]

Everyone that criticize Svelte for "doing magic" must be a young dev who hasnt hear that much of the big old guys like C++, Java or C#. Those lenguages are also compiled, and by doing this, as a developer you get a higher level of abstraction, which means that you write less code in order to execute an specific task, let the compiler do the job, not the developer.

[jediampm]

Hi, Scott, finally someone that classify JSX what really is just another template engine, The only difference is written with js and xHTML ( because you write strict hml). I would be nice to see this same comparative with Angular and Vue.
So this leave another question how you classify react, library or framework ?
my opinion:

if react was really only view library, it would only exist with JSX ( the template engine), and the dev would manage the state without useState fn.

[bradgarropy]

Coming back from vacay with some spice! 🔥

[vitiok]

Templating language is always better! Because you can't mix it much with plain JavaScript. JSX in React does not force you to write clean code. That's the exact reason why there is a ton of smelly projects with the code that is completely unreadable.

[sumanthprabhu]

Me see this video, Me like Svelte, Me search on Job Listings, Me See no Svelte Postings, Me Go back to React, Me from India 🙃

[AlJey]

Another word for "magic" in programming is "convention". Conventions are both evil and unavoidable, all we can do is to try and minimize their number.
React was very convention free in the beginning, you could pretty much trace the entire rendering process. Not so much anymore.
And hooks, specifically, are entirely "magical" (I mean the way that they work internally).
If anything, by the very definition, Svelte is probably one of the least magical modern frameworks.

[vitiok]

Magic is bad. But only unexpected magic. If some kind of magic is a key concept of a framework with the behaviour expected by everyone using it then I see no problem with that

[jhonyortiz]

It's only in programming that "magic" is a problem. I'm learning react and let me tell you, react seems like magic. And if you don't want magic, just freaking look into the inner workings of svelte. It's not like react makes it clear what's going on under the hood. As a beginner, svelte is no more magic than react.

[falconmick]

React is still for me… but I’m the kinda guy who types “yarn run start” and “git push origin main”, so maybe that explains it