Why Svelte is BETTER Than React | Prime Reacts 

I have to admit I’m surprised on how many people seem to be against Svelte. I’m not saying stake your professional life on it but for all intents and purposes it feels amazing to work with.

React winning makes as much sense as Java winning. They're not the best but they arrived early and enterprises don't want to migrate.

Svelte needs to win... for my sanity.

When you are so used to complexity simplicity feels like it's a lie, like it's magic. Whenever I hear people say they'll use React over Svelte they say Svelte is just too much magic and React is just JS. But the truth is all of these frameworks are doing some magical stuff under the hood that is irrelevant to building products. Maybe with React you need to know how it works under the hood because there's just a lot of foot guns but that's a non-issue most of the time. You can do well just knowing how to build stuff with React without necessarily understanding how it works under the hood. The other day I read a comment on Twitter where someone argued that they don't like Svelte because you can't write hooks in it. Why would you need to write hooks in Svelte? You can (since they are just functions that start with "use" basically). But why? Svelte is not React. Some people seem to fail to understand that. What would be the point of creating another framework that does what React already does? Svelte is Svelte and there's the Svelte way of doing things. Don't know why someone would expect React stuff in Svelte. This whole "the downside of Svelte is it's not React, nor does it work like React" thing needs to stop.

React devs wake up everyday and choose complexity

Svelte is awesome. I managed to convince our company to use it for a couple of SPA projects. Prototyping is super fast. The Builds integrate well with our existing system and our designer does not even need to learn anything new since we can just take the mockup pages she builds us and throw them into some components. With a few exceptions, everything is just vanilla HTML/JS/CSS . 😍 My personal favorite is the svelte/transitions. They make navigation so much clearer and all it takes is a"transition:[style]" attribute on whatever tag, you are removing are adding.

I'm so happy Svelte came out when it did. As someone who finds myself leaning more toward the backend, I love how I can still make decent front ends with svelte without much fuss.

The world is simply not ready for this masterpiece called Svelte

Svelte and Vue 3 are in fact very similar! 🎨 They both have a block for styling the component ➡ Vue 3 also has a State Management baked right into the framework 😄under one single API ref() Which works exactly the same as solid/store and svelte/store

I started with Vuejs and then went to react. I have the same arguments for why i chose Vue over react for personal projects React made me love Vue even more.

this is too well-timed with theo's last video

I feel bad for all the developers that know React sucks but still have to face it everyday at work. I use Vue btw.

Currently doing React project and I think its time for it die off. Syntax / patterns are pure nonsense at times.

I’ve been doing mostly front-for 20+ years now and Svelte is the only one that just clicked right out of the box.

I took about 3 to 5 react courses on udemy/youtube and still don't understand how react works. Then I found svelte and tried to code along with youtube tutorial and it just clicked. I love its straightforward and direct approach to front end dev.

Svelte(no kit) + Go(serving svelte using static) + SQLC + Postgres LOVE

With CSS i've learned to put a box around every single html element. Then when I'm done, i remove all the borders. It's the only way to actually know what your front end is doing. Once you've got the picture frame set up, you can make it look pretty.

Frontend development is hard because it involves a lot more art than other parts of a programming. The general public feels like they're experts in how things are supposed to work and front end devs have to deal with those expectations. Imagine that "this sucks, let me build a better one line" except it's not just from devs, but everyone that touches a device.

Man, that React Wrapper paragraph really hit home with me. I used AnimeJS in a React project and had to build a useAnime hook to wrap around the functionality of animejs. Not the biggest issue and fairly simple to setup.....but.....I like that in SolidJS I can just use the god damn library, similar to Svelte.

I absolutely agree with him on grid. It works well until you need to style it. Whenever I need to do design table. I rather create flex components with fixed width and length and some scroll overflow property.

I use Svelte for a private project for two years. Professionally, I have to work with ReactJS and it feels so wrong. Had to work on two bugs this week, and it is so annoying when you debug a component, and it gets initialized over and over again. React is the main reason I will switch my job in September and gonna work as a Svelte developer then. 😄

I posted a simple comparison on LinkedIn about form implementation in react vs svelte . 95% devs were agreeing with me but there we some which said : React is best cus of large community.😵‍💫

I'm not interested in React since the first day I saw it. That day I was AngularJS adopter and made good damn money out of it. But, when Angular 2 comes up, it make me give up on it, I still remember testing angular 2 for the Hello World, took 250Mb of node module, and taking quiite high computer resource. Then I said goodbye completely. Then Vue arise, it almost closer to AngularJS v1 and many AngularJS adopters were move to Vue. Now, I'm so happy with Svelte. It simple, sleek, no shit bullshit here and there. Everything just feels natural without steeper learning curve.

So it's clear, Angular 16 wins.

I'm not a pro dev but I love svelte for my side hustle projects. Sveltekit, SkeletonUI and SuperForms are a great way to get up and running quickly. My main issue is not being able to programmatically create routes, but I imagine that will come with time.

Svelte doesn't let me comment out component props, which really frustrates me every time I use it. Other than that, svelte is really nice.

When I saw Svelte 5 my eyes teared up, it's the most beautiful thing I have seen in 11 years working as a Fullstack web developer. I've seen and used ostensively AngularJS, Angular 2~17, Vue, React, Svelte, glossed over Solid and Qwik, Svelte 5 is so good, so clever, so absolutely awesome, I want it so much. Svelte 5 feels to me like "Web finally done right.", it's a masterpiece

Yeah, it's a good point people have come up with so many ways to overengineer and reinvent the same things over and over that not only is Frontend complex af now, it's also well removed from the actual bundle served to the client, so you actually have no real idea what you're pushing to production just that it works somehow. I really don't like it

100% agree on the state managment libraries. Using redux-toolkit is too much learning and writing to just abstract reducers. Async reducers? Maybe thats not a good idea idk If you really need app-wide context why not use cookies, session tokens, localstorage sqlite or anything there instead of having this clusterfuck of abstractions just to manage app state when 99% of the times web apps are glorified crud forms

I never used a table/grid library my whole life and i've managed to ship enterprise products featuring pagination/ordering/cool styling just with plain old table, css and some js :)

Looks like Theo's take on anything not crappy react with nested ternaries.

I am working on an internal service for our MVP (Aerial), it is built using Sveltekit and I can use most js libraries found in npm no problem. I had never been elated in writing code until I decided to use svelte. It is simply a js framework done right.

svelte stores are really good.

I have one project that deals with forms created by users and conditional validation also configured by users. Everything uses vanilla javascript; I only use one library for displaying PDFs and another for masked fields. There is a V2 using Angular, and it uses my cores. I don't do Angular yet; I am maintaining that project indirectly. I have to go into calls with the dev to explain how to create a proper wrapper for Angular...the thing "I don't know." I also have a nonexistent comment feature in V2 because it was already tough for me to do. It would be a monumental task in Angular, so it has been dropped. Also, my version is just faster for some reason. There is no loading screen because the form shows as soon as you land on the page. The Angular version has a nice 10-second loading animation! Fun how that works ^^

svelte is a compiler ,react is a library and i still dont know why they are in the top5 frameworks

Ohhhh boyyy do I have story for trading code for json... Now here I am an intern with a skewed vision of how easy react js, and i start working on creating a tab group UI component for the project. Now a tab group must have some data, let's add a data prop, it needs many buttons to run functions in the parent, BOOM add more fields... It needs to show modal pop ups and animations... Boom add more fields. This went on to the point what the tab group became a controlled component with the parent handling the entire logic, and that moment of 20 props hell it clicked.... What if, I just bundle up every thing into the data field with any type and call it a day. The code gets cleaner, I don't have to worry much about adding new props and I'll leave worrying about the code review to the future me... What's the worst that could happen?? The other interns seemed to like this idea and abused it to eternity till the point that the single component is conditionally rendering 5 different tab group styles and animations with the only way of adding new tabs was to abuse ?? on the json data. After the code reviewer went Duke nukem on our asses that week, we eventually settled on using tabData1 tabData2 ... With each prop having a type property specifying all the different implementations. And in true intern fashion, we left the company a month later

@Primeagen, hey, but what about "code as data" approach (read "Lisp")?

When people talk about the ecosystem what they really mean is "My job won't pay me to know about this"

Vue is amazing also. New vue3 is so ergonomic to use

7:17 at my current job, using React, someone thought it was a good idea to write the whole UI using a JSON file... Worked great (no) until you had to add new components and interaction on the website

Solidjs is the fastest when it comes to working with the DOM, followed by Vue and Svelte. Applications that don't use the virtual DOM (such those made using Solidjs and Svelte) run quicker overall, although they run slower on larger programs. Vapor Mode, a feature that Vue will soon leverage to become as fast as Solidjs, will make Vue3 and Nuxt3 the most integrated frameworks in terms of both speed and ecosystem.

I love using Svelte Native to make iOS and Android apps!

Most of these frameworks are for UI. Everyone is fighting one another for it.

"JS with CSS is a path to hell" I used vanilla-extract on couple of my recent projects, and I think I found a good balance between style-components' overabstraction and css modules "just-enoughness". You write your styles with TS, it's scoped, lazy-loaded along with the rest of your component code, you can manage themes and global variables, you have one code standard for all the project code, because 99% of it is TS, you have intellisense and you have build-time compilation of you TS styles into regular CSS. And overall for me it just feels the right way to work with CSS in your project.

Hey, it’s my submission! Thanks Prime!

And the wrapper libraries then lack in type definitions for the giant option objects and you wonder why something doesn't work. Its because you passed the wrong options without noticing because the option property just has the type "any". (I use a react wrapper for Apache ECharts. Not because that is the best solution, but because it was the first thing that did what I needed and I got to work. There are so many charting libraries! Its a jungle.)

Svelte is the boss! Svelte fan boy here. Also, you do not actually need a component library in Svelte. It provided a lot of features out of the box, like transition, animated and custom Create Events, and with Taiwind CSS, you're super packed.

I have never used svelte before but I am considering more and more to try it out and introduce it to out team. The only thing I hate about comparing svelte and react that react is kind of "out of date". I hate when somebody says react sucks, vue sucks, etc... I would state anything about a technology without truly understanding it. I truly believe that react is amazing and it was an important milestone in the FE world and because of that and because all the good and bad it brought to the table we managed to improve and go beyond what react can provide to us. I proud and happy that I work with react, I have learnt a lot but now we have "cooler kid(s)" in the block and we might want to consider to slowly migrate or start the newer projects using these technologies.

Absolutely love Svelte. I am lucky to be able use it at work. Waiting for the day Svelte slays the React demigorgon so that peace can be restored in the world

The first 6 seconds of this video are gold

i'm happiest with display: inline-block; and vertical-align: middle; you can do a lot with it.

People need to realize that frameworks are only tools to deliver it products and thus, deliver business value. Easier framework = faster development cycle = faster for delivering value to users and GET FEEDBACKS. Of course if the website is the main driver of your company, then you might want a more complicated solution for a complicated problem. But going simpler is almost never bad

I see the same argument all the time for SolidJS. "I would use it in a heartbeat if only the community were larger." Well the community WOULD be larger if more of you would just use it! Damn chickens and eggs.

I feel like all front-end tools will be easily convertable in the near future so a lot of these debates seem moot to me. Use the one that makes you the most creative and comfortable for you.

Question for the professionals. I just started learning front-end development at my job, and we're using React at the moment, but we're open to switching to Vue or something else entirely. Would it be a good idea to recommend Svelte to my team, or should I wait until it gains a bit more traction?

Did you realize how short is this video. Svelte is simple, understanding why Svelte is better is also simple.

Man, CCS3 and preprocessing like Sass/Less/PostCSS was all that's ever needed. Although I admit the svelte-style-block is nice, especially when used with PostCSS. People using and arguing for anything else just need to go back to 1995 and endure the AGE OF (TABLE) MISERY and styling attributes like font, bgcolor, background, color, foreground, fgcolor, cellpadding, cellspacing, border, etc, etc, etc... Especially Tailwind users. Those should live through those years at least 5-10 times.

I watched this video weeks ago and when you read "".. man.. I got hit very hard. It made me think a lot on what I've been doing for the past years. All the crap I've been brainwashed with. That's the one and only reason that made me switch from React to Svelte for my projects.

Never ending debate

I use Emotion and I love it. I don't use styled components, I use the `css` attribute. Same as the vanilla `style` but with TypeScript support. Best of the two worlds. Add the Emotion theme to the mix and you have the best styling solution in my opinion. Tailwind is also nice, but I'm not a huge fan of it even though it's quicker to understand sometimes.

Cool vid, great article, but last argument completely misses the point. One of the reasons React became so popular is that you never needed wrapper libraries! React exposed an escape hatch to the DOM using refs and this thing was a game changer (compared to the UI frameworks we had before). You basically could just copy the "get started" code from any JS library and put it in componentDidMount and you're done! Add appropriate cleanups, and there you go - you have some charts among your react components. I agree though that abundance of react wrappers is indeed a weird problem. I don't know why everyone started writing those. The beauty of react was that you didn't need an ecosystem of packages, everyone could just write pure js because it's so easy to adopt in react code.

man, this is just so on point, through and through 😂 ... not that I mind working with React at all - but I try to avoid piecing together a meta framework - just take what React provides and take ownership of the rest. It doesn't do much, but for most projects, that's fine. Preact does even less, and I like that even better. If your project does need all the features mentioned here, then yes, Svelte does seem to integrate those features a lot more fluently. I think some engineers get a little too excited about piecing together their own frameworks with React. 😏

This is excellent! The article and the reaction is spot on. React is totally overrated and Svelte/SvelteKit greatly under appreciated. Currently building a project with Svelte for the first time and I love it.

svelte sounds like vue with fewer steps

Svelte literally saved my passion for programming.

ping theo

Is a native mobile app development library built into svelte as well?

I would use svelte if it had vue3 composition API. I don’t mind DSLs for markup but modifying the JS syntax just feels weird.

I get your comment about using JSON instead of code for config, but what about when the config is dynamic? I deal with a LOT of dynamic grids at work. I'm just curious for you to expound on your "path to hell" comment.

Building tower adding more where most put most before in selfaffirming loop. Is logic of termites React Termite Hivet is on top. Everyone constantly learning new versions, improvements mindboggling amount of time wasted. They are tired, everyone wants this to stop and one thing to win and offload the pain. Except majority is in the thing guaranteeing this hell continuing... while others kill each other to become the next hell. Even if it's great and optimised it can't beat the Moloch. Inertia builds the Babel Tower itself

I love this channel -- hugely entertaining and informative. As for React, It's super easy to hate on it and no question Svelte is easier to pick-up and has better DX. Still, I found myself being more productive on React after giving Svelte, Solid, and Qwik an honest try because of ecosystem (Qwik is easily my favorite). I'm going to wait it out another couple years and see how things play out before re-evaluating switching off of React.

I literally know the person (he is React "dev"), who could not use library which had react and vanilla versions with Vue, because it doesn't had Vue wrapper :/

I'm using it in prod for a now large project. 👌 I also agree on state management. I feel like I hate them all. So much boilerplate

I use Svelte for my project. love it

Hear me out, since you already have css as backend, and you don’t like to write css in .css files and import it, you can now use styled-components to write your css on js files. So it would be Styled-components as a backend.

Man, this was a great article, god forbid the day someone compares Astro to React and Svelte, talk about obvious truly great experiences where things function as intended, that's the Astro life.

but, i can integrated react to symfony with hash router, svelte same not hash router?

Svelte rocks. Try it out and spread the word :)

styled-components was the worst idea ever

Svelte: Got em

Thank you so much for broadcasting this! Never in my life have I felt so understood when it comes to front end dev. Everyone is preaching the React gospel when it fact this library/framework does nothing but cause so many problems for projects, from state management issues, to rendering shenanigans, to stuffing everything in JS rather than separating concerns (I don't want my CSS in JS!!), to some of the messiest components on earth all because instead of adopting OOP, people just want shortcuts, making functional components with hooks and effects that mimic class methods but now we have to worry about one way data flow. This framework doesn't make sense and needs to die! You get a like, a subscription, and advocacy!

Svelte is amazing.

Can we just redo the entire web in C already?

8:33 ALWAYS FLEXXXINGH

What's so bad about styling in the same file as the JavaScript?

I love you so much Parmesan

3:00 - 3:30 that is why I love Lit

9:14 CSS in the backend.

The problem with React and Angular is employers pushing them as a requirement, and some vue. We need more svelte jobs or even vanilla js jobs.

1:42 Not brocolli?

i felt attacked when you was talking about state management lol

I'm using astro with svelte and i'm falling in love with front-end development again.

Htmx baby, the web is your component library:😂😂😂😂

The main question is now how to convince higher ups to rewrite our whole existing react application with sveltekit ? If this is solved then ultimately sveltekit will win as it will gain more acceptance and use

Next video: Why Svelte Over Rust

im glad that i can add jquery to my svelte project

Now pass state into styled components 😎

The way React does things seem outdated now compared to these new ways of doing things

Ok, I'll bite... Why is configuration in JSON as bad as you're making out? (assuming type definitions available)

Got 'em