React VS Svelte - Which one should you choose in 2024? ft Rich Harris

[@macieksitkowski]

"(...) a proper, unbiased evaluation of the two. I'm here with Rich Harris" XD

[@dgleitaocontratos]

yeah, that didn't make much sense...

[@ottergauze]

I love Svelte but this is pretty false advertising as an unbiased comparison. It's clearly promotion of Svelte.

[@chrikke]

@@ottergauze That's the joke. He is not unbiased, Harris made Svelte

[@mursie100]

Yeah that's the joke

[@kedzior-io]

I already like Svelte for its simplicity and pragmatism, but listening to Rich Harris talk about it makes me appreciate it even more.

[@mbokil]

I've used both React and Vue on projects but when I saw Svelte 5 with Runes I realized it was going to be cool. Super clean developer experience.

[@IvanKleshnin]

How template syntax and one-component-per-file requirement work out for you?

[@mbokil]

@@IvanKleshnin Works good. With Svelte 5 you can use Snippets feature and it is similar to having a named extra template in your file. Give it a try. Very useful.

[@mbokil]

@@IvanKleshnin Svelte 5 has Snippets feature which allows you to create a named template that can be used inside your file. You no longer need a separate file.

[@IvanKleshnin]

@@mbokil I know, but I'm not sure what % of cases, in which I end up with multi-component files, are covered by snippets. Also, Svelte components are surely convenient for CSS styling, but they assumingly provide fewer benefits for Tailwind. So it boils down to Templates vs JSX and I honestly don't like both.

[@xucongzhan9151]

@@IvanKleshnin SFC is not that big of a deal, really. I have worked with React, Vue, and Angular, and my colleagues and I don't really care that Vue uses SFC. It's just a pretty low-friction transition, to be honest. And even in Angular where nothing stops you from putting multiple component definitions in one file, I rarely find people do it.

[@TrostCodes]

Really wonderful questions from Sam in this, I love the follow ups.

[@tim_t]

9:58 this is exactly why I use Tailwind in React. I find that other styling approach compromises the “deletability”. I have no issues using vanilla CSS in SFCs like in Vue and Svelte.

[@kabukitheater9046]

tsoding said it better " the best code is the one that you can easily copy paste".

[@coolemur]

💯Deletability or furthermore "modularity". Easy to transfer to another place and it just works, easy to remove and it leaves no trace.

[@DoctorMandible]

I use Svelte professionally to create production apps. I converted from React. Very glad to hear Rich talk about upgrading the lazy data loading in Svelte. It's my biggest pain point. I was surprised to hear Rich say that React has an ecosystem advantage. One of the reasons I switched to svelte is that I can use any vanilla js library with zero fuss.

[@paul_major]

Same. A painful production-grade React project inspired me to look at Vue and Svelte. I went with Svelte and haven't looked back.

[@nymez6968]

What many people don‘t know you can already stream your data in SvelteKit from a +pager.server into your page and lazy load it. No need for onMount etc.

[@scottserage9022]

Any openings where you work? 😂 Only half joking 😉 Seriously though, if I could make as much as I do professionally working with Svelte instead of React, I would jump ship today. The trouble is finding something, plus I don’t have professional experience with Svelte so even if I found something I only have professional React experience.

[@TrostCodes]

This is excellent, Rich can do no wrong.

[@a7mdbest15]

Bro i believe you, but you cant say unbiased and the first thing you do is bringing rich harris lol.

[@shubhampawar7921]

That was the joke

[@aleattorium]

You still should watch it, his answer about what react does better is very honest

[@DoctorMandible]

The joke ________ Your head

[@a7mdbest15]

@@aleattorium I did, and I respect rich harris a lot, also Im a svelte fan

[@danvictorlofranco6700]

We can't deny rich diff influenced react to do compiling

[@mwlulud2995]

Svelte 100000%.

[@AxelRock]

Nice talk, the interview is well done, and Rich's voice so crisp on this mic. Loved every second of it. Thanks Prismic for the quality content, and Rich for everything 🧡

[@lelilimon]

24:50 Subscribe button glittered in rainbows on a phrase "subscribe to the Svelte philosophy". ♥

[@raventosh]

Great interview with great questions!

[@robotempire]

Really good interview execution by the interviewer. You pressed for clarity at the moments you needed to press, when I think a lot of interviewers wouldn't have.

[@apeegg]

Rich is too humble. Svelte beats React on almost every front(end)! The thing React has going for it is its big community and pool of pre-built libraries. That being said most things are "built to fit React". JSX is very much something that's forced onto web dev and should long term be frowned upon. Don't get me wrong. React when it bloomed brought fresh air and a certain way of thinking building frontend applications that's really good and healthy. But in all honesty the virtual DOM is just added bloat and many new additions to React are things to patch up React's lackluster performance. I've spent way more time in React-land than Svelte. But I feel though whenever I get to build and ship Svelte applications I write a third of the code in a third of the intended time period to complete the project and press release. There is simply less stuff you need to maintain and consider working with Svelte which is undeniably a big strength.

[@RyanSwearingen-s9p]

Rich is the 🐐

[@jaymason7097]

6:58 wow, you're so politically correct you can't even take a joke. And then Rich had to awkwardly redact his statement. C'mon man, chill out a bit, and have some respect for the person you are interviewing.

[@ivan.jeremic]

just learn react dude and chill out.

[@karim-gb5nx]

Priceless talk. Many thanks!

[@avi12]

Which one to choose in 2024: If you want to stay sane, choose Svelte If you want to find a job quickly, choose React

[@daleryanaldover6545]

I'm already adopting svelte 5 in my codebase. Pretty neat

[@farhanmurtaza16]

Excellence conversation

[@Animadroids]

Nice interview. We need proper documentation for managing server side data onto child components in svelte 5.We need to improve our understanding to be more productive with this new tool.

[@thedelanyo]

I think folks who are great React developers might struggle coming over to Svelte, probably due to their Reacty mental models. Unlike folks (like me) who started web development with Svelte, this feels natural especially with only prior knowledge of HTML CSS and JavaScript.

[@nikilk]

Starting web dev with either React or Svelte isn’t ideal. You start it with learning the foundational blocks. HTML, CSS & JS.

[@whoami724y]

​@@nikilki think OP meant svelte as the first framework after learning just html css and js. It also feels more natural for me as svelte was the first framework i learned, it feels closer to vanilla html and js

[@sunhyungkim5764]

Svelte is super simple and clean.

[@intricateweb1]

I love that he acknowledges AlpineJs

[@cim8097]

Svelte is the jQuery of JAMstack. I'm sold.

[@madgeek7447]

'maybe programming is not for you' love it

[@Necessarius]

I choose the slowest to ensure the client have the worst experience in a single aplication

[@rzr1191]

Runes are making me want to try Svelte again. The original way of handling reactivity and state felt too magic, this feels closer to idiomatic JS

[@rand0mtv660]

12:30 I agree. I've seen many junior developers who have very little knowledge of Javascript putting hours into React and then not being able to solve simple issues that require code outside of a React component because they don't understand where React code takes over. Can't blame them really. I also learned jQuery before learning Javascript so when it came time to do some vanilla JS stuff, I was just paralyzed because I basically couldn't do anything.

[@jiraiyah8941]

That’s an interesting progression that you had; from jQuery -> Vanilla JS. I’m close to 2.5 years of working professionally for the DoD, and I 100% agree with your Junior assessment. I felt the same way when thrown into a massive production code base written in an older version, post classes, react. Took me a minute to get up to speed and actually contribute in a timely manner. 😭

[@zwozoa5630]

Me rn. Too busy getting crutched with react and nextjs that I lost my touch w/ vanilla.

[@edsanville]

This guy comes from JOURNALISM? He must be the world's most brilliant journalist or something.

[@alan-overthenet]

Thanks for this. I really like Svelte, but there aren't many good learning resources, compared to React, Vue and Angular.

[@sadunozer2241]

Man clicking go to definition works in svelte, it’s how developing works.

[@sadunozer2241]

I’m a full stack developer who worked on production apps big and small using react and angular. It’s so much easier to work with svelte because it’s all compile time. Compilers are dumb, they do basic parsing and pre-defined optimizations, so when I look at a svelte component, not only is it nicer, leaner etc… it’s also 1000% easier to reason about what the fuck happens when this component renders. Which is pretty much impossible with react and angular. React with its constant updating scopes is the dumbest thing humanity came up with… did you guys never look at a game or its performance problems?

[@sinasalahshour]

18:06 actually in the react one you can simply render [1,2,3,4,5] and there's no need to map over it and render each item in a fragment

[@Frostbytedigital]

Sure you can but mapping is significantly less jsx.

[@majorhumbert676]

​@@Frostbytedigitalwhat do you mean? "JSX" is not an adjective. How can it be shorter than {[1,2,3]} In React, that's literally all you need to write. There's no need for JSX or mapping, or even a component.

[@Orbit_bd]

T

[@FilipeFreire]

I like the view of "we're not actually competing, but occupying different niches in the market". Although... the truth is that a man's gotta eat, and React jobs are way more prevalent that Svelte jobs. So, if I identify myself more with Svelte, at the end of the day, I still gotta learn React and be miserable in it if I'm to eat snacks on a regular basis. ¯\_(ツ)_/¯

[@TheStickofWar]

you say that, but I can tell you I work for a very good salary with Svelte in a decent size company (250+). You don't need to know React to have restaurant trips here and there anymore - industry is slowly realising that Angular, Vue, React, Svelte and even Solid are all options.

[@luiscarlosjayk]

I'd rather choose Leptos nowadays

[@ChristiaanBvanZyl]

React for slicing time, Svelte for slicing space 🤯

[@insight-informer]

Astro + Svelte with markdown is a great combo for static blogs and such. It gives you the ability to create markdown components you can implement into your markdown.

[@armanrozika]

wordpress it is can't get easier than that

[@randypenajimenez3893]

If you like Angular, go with Angular, if you like Vue go with Vue, if React go with React, if Svelte go with Svelte, there is no perfect technology, they all work. The most important thing in software development is to solve problems.

[@wizardoflightnings6841]

No, that's not right, as a result, there is a better technology in comparison with others. I can't say what exactly is better about frameworks. I assume that React. Vue, sometimes they say it is not completely covered by typescript, sometimes they say it is, but it turns out not completely. Angular, they say, don't write small applications, it's redundant. I compared the modeling software: Maya or Cinema 4d is what you need, depending on the profession. 3D max is a piece of feces, Modo is neither here nor there. Houdini - you need to know why you need it.

[@majorhumbert676]

18:30, the example is unfair for several reasons: 1. You don't need to import React 2. You can omit the curly braces and the return statement, and instead just put the fragment directly after arrow 3. You can write instead of 5. You don't need to have the export default, because you don't need to have a new file for every component. The Svelte example doesn't convey that you necessarily end up with an extra file. 6. You don't need to create a component for this snippet. Just insert the array where you need it. 7. You don't even need to map over the array, because a React node can be an array of numbers! A fair example of React code would be: {[1,2,3]} Which is shorter than the Svelte example!

[@lesaverman]

What you missed entirely was the thought which was previously stated about when you learn react you’re not learning JS… you’re learning react. Everything you just said is because of your knowledge of react. The svelte example is just easier to understand whether you know the framework or not. Thats the point they are making. Someone who doesn’t know react knows zero of what you just said. Someone who doesn’t know svelte can immediately read that and know what’s going on if they are a professional dev. It’s okay to admit that 😂

[@ChristGuitare]

Maybe the move is actually to choose none of the two because we've been doing it wrong for years. For a new project in 2024 I'd go for most use cases for a MPA with htmx or equivalent because I feel like heavy frontend stateful logic is actually quite rare, but the need for a good UX and SSR really common. We should move away from the complexity of SPA with json API when we can. It does not mean SPA with React, Vue or Angular should disappear. It's just that I've seen several projects with an architecture revolving around micro frontends SPA that can also be rendered with SSR, and hydrated with REST APIs, and it feels like waaaay too much complexity for something that could have been solved with a simple backend service serving the correct piece of html to the client. But I like those frontends technologies too, and I've been working professionally with React and Vue a lot, and I'd love for the opportunity to try Svelte more or give Angular a try again.

[@abdushakoor0099]

"study the enemy" perfect

[@TheCodeCreative]

React vs. Svelte Rap Battle: kzbin.infovw3d7Bh6zR0?feature=share

[@AmxCsifier]

Rich how much react have you written in your life Enough to know it suc..... nah too harsh .. Enough to be pretty familiar with how....

[@icedlee337]

i wish my company would use Svelte instead of React. Personally, the only thing React has going for it is React Native IMHO.

[@majorhumbert676]

Depends on what you're building. I wouldn't create an application in Svelte. A website perhaps, but not an app.

[@tafudiso]

Swelte is absolutely no-go for a huge web application. its a completely different world, which swelte in current state can´t handle.

[@armanrozika]

@@tafudiso for now yes, you will be pulling your hair out looking for libraries, and solving your specific case which might not already encountered by anyone else. This in fact will slow down the production. But maybe in the future, svelte will have many developers and communities that build for svelte. But for now, meh

[@swapnil1]

great

[@ethannr1]

Why not Vue?

[@HugoDuprez449]

Svelte is so good if you want to build end-to-end solutions! Go React if you want to become an engineer, go Svelte if you want to become an entrepreneur !

[@arianitteamaxess674]

whaaat?!

[@ikhsanfadillah9689]

i agree. i am react developer. but i want to use svelte for my side project.

[@abhisunkara]

15 seconds in and I have trouble believing this will be unbiased.

[@s4ndeep1203]

Vue obviously

[@user-ah0]

Vue is worse Svelte

[@s4ndeep1203]

@@user-ah0 Svelte5 is vue 🥸

[@yukitachi2307]

If you want to be broke and unemployed, go with Svelte. If you actually want to land a job or make money in SE, then you know who currently owns the job market.

[@jwoods9659]

@Parmenideano-sp5hl React is not good, 99% of companies are still using class components. Next.js is NOT stable and you spend all this time learning a FRONTEND. As a newbie I spend most of my time building from the backend up. I wanted to learn how to code. The JS ecosystem is just a mess and 90% of the time you don't need it.

[@jwoods9659]

@Parmenideano-sp5hl That was deep... I felt that god. Laravel, Ruby on Rails, GO all that was made to build companies on. No one is doing that on just React.

[@yukitachi2307]

@Parmenideano-sp5hl Thanks for validating

[@yukitachi2307]

@Parmenideano-sp5hl Thanks for validating. Stay away from that broke / unemployment line

[@arianitteamaxess674]

@@yukitachi2307 what are you sniffing? true, that there are more react jobs out there. but that doesn't mean you will not be broke. as a matter of fact, if you want to become rich you have to come up with your own big thing, in which case the language and framework doesn't matter as long as the product is fact and responsive. and in the area where I live, react is being replaced with vue or svelte. most of vue and svelte jobs are to migrate code from react

[@remcore_]

Sad to see such a click-baity thumbnail in an already divisive landscape.

[@RezetRoy]

Angular

[@폴폴-i8i]

I'm looking forward to the merge of Wiz and Angular. Angular's recent progress since v16 is quite impressive. I think Google knows better than Vercel or Meta how the web development shoud be.

[@JohnPywtorak]

19:20 flawed code example, arguably bogus. I agree with what is said there, but find the example extremely lacking to back it up. If you know anything about React you’d see why. Credibility out the window after that.

[@matteodeltreste8688]

What's wrong with that example?

[@majorhumbert676]

​@@matteodeltreste8688 The example is unfair for several reasons: 1. You don't need to import React 2. You can omit the curly braces and the return statement, and instead just put the fragment directly after arrow. 3. You can write instead of 5. You don't need to have the export default, because you don't need to have a new file for every component. The Svelte example doesn't convey that you necessarily end up with an extra file. In React, you can put the component in an existing file and not export it. 6. You don't need to create a component for this snippet. Just insert the array where you need it. You wouldn't create a component that looks like this. 7. You don't even need to map over the array, because a React node can be an array of numbers! A fair example of React code would be: {[1,2,3]} Which is shorter than the Svelte example!

[@majorhumbert676]

​@@matteodeltreste8688, in React, you'd simply write: {[1,2,3]} That's shorter than the Svelte example! See my comment to the video for a longer explanation.

[@Learnwithjoseph]

but one thing we have to now is that react is not manged by one person while the one is what is if he shut it down, since its his framework what if

[@Prismic]

Just like React, there is a full core team for Svelte. If Rich stepped away they would pick it up, just like how he made Rollup and for years it’s been maintained by someone else and continues to thrive.

[@Learnwithjoseph]

@@Prismic not really 😞

[@arianitteamaxess674]

@@Learnwithjoseph one company vs one person, what's the difference? both can decide to kill their products

[@폴폴-i8i]

​@@arianitteamaxess674 It shows that one person is sometimes better than one company.

[@georgebeierberkeley]

I know jquery is dead but...seems like a more straighforward way of manipulating the DOM. Also -- given how long Visual Studio takes to compile, I'm reluctant to include another compile step. But..probably just being a dinosaur.

[@kriffos]

Vite is fast, I can tell no difference when compiling a React, Svelte or Vue project and the incremental builds are really quick. Just Angular really falls behind in compile times. But maybe the dinosaur aproach is not always bad, I would not chose jQuery today but I think htmx is a viable choice.

[@폴폴-i8i]

I know jquery is great, but we have already passed that era and will never go back.

[@safarly]

Vue 3 far more powerful, simple, and much more developer friendly than both

[@hamm8934]

Svelte really just seems like Vue with Vercel money behind it. I know people love it, but I've yet to see much of a benefit/difference from switching from Vue, especially once Vapor mode comes out. To each their own :)

[@jyjyjyj3]

React because jobs market

[@aberbaCodes]

It's matured with a bigger ecosystem too. Reacts problem is over engineering looking at the new direction

[@everythingisfine9988]

​@@aberbaCodes I'd say React's problem is legacy. They still have to maintain the old way of doing things which compromise performance significantly. Someone's going to come up with a real easy import to swap out React code for Solid.js code (because solid is syntactically similar to react). That would checkmate svelte's future

[@RezetRoy]

So? You prefer your ass ruptured because of jobs market?

[@i.j.5513]

React, Svelte, Vue are not languages - they're frameworks / libraries that are written in JS / TS language

[@HeyDan1983]

I feel like the interviewer is a react fanboy...

[@Gohealt]

Frontend just crazy stupid. Good follow up questions though!

[@tobychidi]

NUXT

[@matiasbojko9652]

Literally starts with "unbiased"? xd

[@freeideas]

I don't understand. I feel like the whole world is passing me by. I have written many web apps with plain old javascript reading and writing to server-side rest APIs. This is so simple that it seems doing the same with svelte, react, vue, next.js, etc would be 5x as complex. People tell me, "yeah for small apps this is true, but for large apps you need a framework", but I still don't understand... a large app is many small 1-page apps that share the same server data, right? Maybe you guys are talking about a many page app that runs with one load of html/css/js? Even so, you could just make many independent divs, all but one of which is invisible, and it would be the same as a many-simple-1-page-apps, except it would technically be one page load. What am I missing here? Feel free to make me feel bad. I want to understand.

[@freeideas]

OK I just thought of where I might be living my life wrong: maybe these collections of UI controls which look special and different from the standard, and are color-coded to match each other are why you want to use the framework under which the ui controls are published. Even so, I think a .js file and .css file could be made to do the same thing without the framework. I have not gotten so far into the beauty of things that I can judge which is better, but maybe the need for these frameworks has something to do with custom controls.

[@freeideas]

replying to myself again; I used to work with a next.js dev, and if the app was anything but one of the classic next.js examples, i could write it in half the time with plain html/js/css. He thought I was doing something deeply wrong; as if there is some kind of rule.

[@armanrozika]

@@freeideas i could write what you build using plain js/html/css in 1/10 time faster using react, small, big, even if it's just a hello world. And yes, the whole world is passing you by

[@tafudiso]

what kind of stupid nonsense is the "javascript is not a good language for describing user interfaces" It was never suppose to be ????????????????????

[@Prismic]

He never said it was supposed to be. He’s making a point about the need for things like JSX and svelte’s syntax being necessary.