React VS Svelte...10 Examples
HTML-код
- Опубликовано: 10 июн 2024
- The ultimate guide to Svelte for React.js Developers with 10 code examples for both JavaScript frameworks. Find out if SvelteKit is better than Next.js...
SvelteKit Course fireship.io/courses/sveltekit
Next.js 13 Course fireship.io/courses/nextjs
Full Svelte vs React Article fireship.io/lessons/svelte-fo...
#javascript #webdevelopment #programming
Thanks, now I can put Svelte on my resume.
Every employer should consider Svelte if they want anyone to jump into code and be productive
Coming from vue ive built a small app for fun in svelte and i loved it - hope to use it as an income source one day
😂😂😂
@@MSTRCMDRthere is this Indian Exam preparation site that uses Sveltekit.... I think they watched Fireship or something 🤔
I put it after 100 seconds video itself. 🙂
You can pass components as props in Svelte and render them using special element.
Still verbose and sometimes buggy
@@andreilucasgoncalves1416 can you elaborate?
@@irlshrek I don't remember very well about the bugs they gave, that was a long time ago. If I'm not mistaken it was about {...props}, errors with transitions and the {#key}.
In react you can pass Something while in svelte you have to pass the component. So you would have to create a file to have the Something
can you provide use case for this where cannot handle ?
@@andreilucasgoncalves1416 It's still useful. I wrote a small router library for Svelte that uses this with custom component that takes in your page component.
I consider myself a React developer, but seeing these comparisons makes me understand why Svelte is so awesome!
Which means you are a bad developer :)
@@FreehuntX93 noooooooooo xD
@@FreehuntX93 Why?
@@MrMudbill Because it looks so ugly and you can't even pass components as props.
@@expensivecats 🤣🤣🤣....you are just too pained that svelte is better
I've rewritten a side project from React to Svelte and loved that I had code that was easier to maintain, read, and write really quickly. My bundle size was really tiny too even though I actually added more functionality than what I had in React.
Simply blown away by how good Svelte actually is by comparison
I ended up doing the same to a side project of mine. The react iteration was the first serious code project i'd ever completed, and i don't know HOW i powered through that with little to no previous experience! That being said, the svelte iteration is much more maintainable (partially due to me actually knowing what i was doing though) and i still work on it regularly
Svelte literally saved my web development passion.
Wait till you try elm
@@Ricardoromero4444 I puked little
@@Ricardoromero4444Elm is (was?) nice, but the governance got screwed, didn't it?
elm has been dead for a while now
@@Ricardoromero4444 Wait till you try Elixir
I'm a (late) gen z web developer. Svelte & Kit were my first frameworks, and "enlightening" some of my friends that have only ever used raw php and jquery is incredible
No javascript framework comes even close to features of laravel
@@echoptic775go on
@@echoptic775
laravel have fundamental problem that all php frameworks shares...
too reliant to ssr... unless you are willing to add inertia to your dependencies or use caching periodically...
not saying it's bad or anything... it's just when not all of your pages needs full refresh from server, full ssr on all pages is just a waste of server resources...
therefor going for laravel sanctum/breeze is more lenient to frontend backend separation...
@@hakim_jazuliisn't the SSR problem solved by "laravel + frontend JavaScript framework"?
It's nice to be young
I used Svelte at a hackathon a year ago. I was able to produce a pretty stellar looking app using purely my knowledge of React and Angular. It's really impressive how well it works. My only gripe is that it is a little bit weird to wrap your head around at first if you're a hardcore React dev. This video is an excellent side by side comparison
coming from a few years of Angular development, I found Svelte much easier to learn than React, templating in HTML, controller logic in JS, scoped CSS in components, it all made a lot more sense to me.
What hackathon btw?
Is a little weird because we React devs are used to suffer
@@JERZAMORA indeed 😭
"My only gripe is that it is a little bit weird to wrap your head around at first if you're a hardcore React dev"
Well, if you can wrap your head around React....
I switched from react to svelte when sveltekit 1 got released last year.. my code base is much smaller, simpler, and faster. Cant recommend svelte enough.
That's great to know
I actually tried learning react a few years back and it was complicated that i just gave up.
Late last year i tried svelte and sveltekit. It was so easy and made so much sense with file based navigation and svelte is just like writing html and when you need dynamic value or reactive components. You can just use curly braces and write javascript. Great video 👍
I was in professional React teams for years and can confidently say that Svelte is much much better. Simpler, less boilerplate, actually enjoyable. I'll atill use React happily, but Svelte is my special happy place.
I prefer React because it reminds me of my previous job as a java developer.
😂😂😂
RIP 😂
Oof hahah
You poor thing.
How? As a Java developer svelte looks more like a template engine.
My career has led me from Pure JS to jQuery to Bootstrap to React to, as of recently, Svelte. I can't go back to React. It just feels so clunky in comparison. React's recent additions to the core have been disappointing and unnecessarily complicated where Svelte just works. 100% of my projects this year have been in Svelte, even at work, and I don't regret ditching React at all.
How did you find svelte jobs?
how did you find massive ecosystem of reactjs for Svelte ?
React Libraries are in 100000s while Svelte ????
@@yhz2K You probably do not need as big of an ecosystem because you have the vanilla js ecosystem which is huge already.
@@yhz2K you probably dont need huge ecosystem for svelte because it already comes with the feature you need 80% of the time. Although svelte lacks good UI libraries, but recently i came across shadcn-svelte which happens to work fine.
@@clementseiller1255 Exactly. Svelte does not mind if you manually manipulate the DOM, so I've found pretty much any vanilla js library to work without issue.
React does have a far bigger ecosystem, but a lot of those libraries are "-react", to make an arbitrary library _work_ with React. Svelte doesn't have these, because they're not necessary. Everything just works out of the box. However, there are some QOL packages that would be nice for Svelte, and having more choices for UI libraries wouldn't hurt either. Daisy and Skeleton are two that really come to mind, other than that you're sadly still a bit on your own.
@@LongJourneys Browsers already have support for components, but the implementation is utter garbage.
"Everything just works out of the box.", trust me, it doesn't,
It really depends on what project you are working on, I almost thought you were being sarcastic at some point.
The Svelte ecosystem is far away comparing to React/Vue/Angular. A lot of UI libraries are being so inconsistent. People just randomly implement libs in their own svelte ways which made them hard to use and debug. If you are working on complex web app, not the generic blog website. You will have hard time to use Svelte even the basis looks so promising, but that's it after the initial honey phase.
One of biggest regrets is to use Svelte in production (not my decision) for one of the company projects I had work on, it ends up porting a lot of React libs as workaround or hacking here and there because Svelte ecosystem is not ready. A lot of things are not just about let's reinvent the wheel by ourselves.
Just give Svelte more time to grow up, it's good, just need more time. If you foresee you will build something complex, involves text editor, dnd or something similar, go for react/vue/angular or whatever. Don't do Svelte, at least for now. God knows how many components I had to reinvent at that moment that doesn't exist on the ecosystem because many OS svelte libs I went through just never meet the semi quality what React have.
Also, after working with Svelte quite amount of time, if you truly went through the lifecycle, how dollar sign, store and Svelte syntax works with complex amount of logics. At certain point you will find for some of scenario React is actually better in terms of readability and control, where Svelte is a bit of messy. You will appreciate how different frameworks made their decisions. There is no such a silver bullet, but I do wish svelte being a better bullet.
There Is the IBM Carbon Components library for Svelte too. The look is a bit 'corporate', but the collection of components and the ease of use is fantastic!
@@doc8527 "At certain point you will find for some of scenario React is actually better in terms of readability and control, where Svelte is a bit of messy" respectfully, that sounds more like poor implementation rather than Svelte itself. Sorry, but If you write Svelte with the React mindset, of course the result will be a master-crap.
That comparison of useEffect with onMount is wrong. In Svelte you write init code just inside the script tag since it will only execute once (unlike React components). OnMount is for when you want to trigger code right after the element is mounted to the DOM.
great point 👍
why is it wrong? seems like a 1:1 comparison since useEffect will also perform side effects once the element has been mounted
Good call, that is an important distinction.
Also keep in mind that any return function in an async onMount won't be called when the component is unmounted. This is type checked in v4 I believe.
More of these comparisons please 😊
Svelte v Solidjs
Vue vs React
Another comparison between between Next and Nuxt or Vue and React would be awesome as well.
I'm actually glad you made this. Been on the edge of learning svelte and this finally convinced me! Cheers 🍻
this is the best video i've seen so far about frameworks in general. congratulations.
Ive never used React, but ive been really enjoying learning and using Svelte.
React feels that is was created by somone who was thinking not in how to make the library easy to use but how to make my code as smart as possible. (and i mean it in the worst way possible). i love how easy to read is svelte and thats why just choose between vue3 or svelte. Both are so similar in how easy they are to pick. i would not touch reach with a 10 inch stick
When you build highly complex large scale projects, thats where SvelteKit really shines. Its so easy passing data around and reading code. Its just so intuitive and I hope everyone leaves React behind. React can make you hate your life, Sveltekit is just an awesome experience and I hope more companies use it for all their coding projects from now on.
I really appreciate the effort and information you provide in each one of your videos Jeff, thanks a lot!
As a student studying computer science, trying react as my first framework was very overwhelming and confusing. Even after developing a solid background in js, html and css; react still felt confusing. I chose to learn svelte and developed a project with it which I spent more then 200 hours on. After rly learning svelte I feel like I understand the component architecture and I can apply my skills to any web frameworks. I still haven’t learned react but I have learned flutter, and built apps using Sveltekit.
I came to know about Svelte from my friend. I knew React but I also knew it was a pain. I went through few official tutorials of Svelte and instantly started liking the framework. It's an awesome framework.
I even created a full stack app using Svelte in the front end.
It's hard to go back to React once you experience the simplicity of Svelte. I think only reason you will consider React or Vue will be merely for job opportunity. But for me, personal projects, Svelte/SvelteKit or Go/Svelte combination all the way. But I have to admit though, I notice that React renders a little bit faster than Svelte at least in "development mode". I rewrote a same project from React to SvelteKit and that's what I just noticed, but it does not bother me that much though.
I have coded in React for a lot of years. And i have seen how redux and other important libraries in React got updated from React Class to React Hooks. I have seen the transition and it was really frustrating as a react developer to keep learning new libraries every now and then to do the exact same thing you did 3 years ago. Which is why I really love the simplicity of Svelte. React requires writing a lot of code to do some simple things. However, with svelte you get the exact output you want by writing less codebase. Which is why i really love it for it's simplicity and easy of use.
Really love these kind of compact videos.
That's perfect, Jeff! Thank you for your work! 🙏🏻
Pls do a similar Solid vs Svelte comparison as well. Thanks!!
Time to learn Svelte
If i can request something, i want to see PWA tutorial😊
true i know nothingof pwa
Fireship has a PWA tutorial in his 100 seconds playlists (but it's 8 minutes).
Solid js home page has your video link to get an idea in 100 seconds. Great man.
I am a backend developer and was once FE, I love this guy.
Never misses any Js technology update
Something that I liked a lot in Svelte is auto scoped CSS. Feels like it should be the default at a browser level.
Yes! This pissed me off in Vue when I couldn't debug a graphical bug. No idea why a component where everything else is scoped to said component literally by design and by definition of 'component framework' but would suddenly be default global in one section of it (the style) makes no sense.
@@zachhopkins6162 What do you mean? Did you used 'scoped' attribute or 'module'? Because these 2 limit tag to only that SFC.
Hey Fireship, it could be really nice if you talk about which UI/UX library we ‘can use’/‘better fit’ which each framework, i.e. react, svelte, vue/nuxt3, angular.
This is really important, I think the most important, when building a frontend
I think this is why angular with material is a real option. Because once you break the learning curve, it’s really easy to create great apps, really quickly with angular and material
vuetify for Vue, Material UI for Solid JS... MUI for React, I love material UI, easy and very well supported... would not be surprised if there is a material UI library for Svelte, Svelte looks very very interesting, I am deciding between Solid JS and Svelte to redo my portfolio site (PHP, MVVM, KendoUI, very outdated) ... one of the reasons, and to your point, why I am deciding on Solid JS, is because a Material UI library exists for Solid JS. However I am VueJS developer and vite and nuxt make SSR easy for SEO purposes.. I love VueJS, but some times it can get a bit frustrating as well especially at scale with SSR...
If you like tailwind philosophy, Skeleton for svelte is amazing. I also find Chakra for React much better than material ui.
IBM Carbon for Svelte is great !
You've convinced me to buy the Svelte Kit course. Thank you!
Wow! Svelte's syntax is so easy to grasp. I had no idea Svelte was so awesome!
This is awesome. I bought your Sveltekit course. I'm an Angular dev looking to expand my knowledge and really don't "get" React.
I know this was 7 months ago, but I just finished porting our legacy angular frontend to sveltekit and it flies man. Codebase is like 70% smaller, super readable and all the rxjs functionality is pushed to stores with ease. Definitely reccomend.
It would be awesome to have a video like that comparing React and Vue, with examples
I like that Svelte templating is basically Handlebars, but with more features.
Was waitint long enough, thanks Jeff
Your rock! I'm learning it right now! 🤩🤩
it is clear that svelte is easy to implement, while react survives due to its ecosystem and community.
sveltekit got good eco-system too
svelte is approaching that critical mass where the ecosystem will be large enough that it won't be a factor anymore in those comparisons
@@TheGargalon nah.. not that great.. I had to build a lot of stuff on my own on my last svelte project :/
@@danvilela hmmm to be honest, don't you also have to build your own stuff in React on any serious projects? Like sure, you can just roll MUI everywhere and get some project going, but working at a real company or developing a new startup, you need bespoke components that fill your design team's specific brand/ux and meet the application's core requirements. Svelte has a ton of fantastic low-level ui libraries that you can build on top of to get a running start, and that's all that is actually reasonable to use anyway in a professional setting.
The entire statement has a certain smell to it "I had to build stuff on my own :/".... well, yeah, duh.... you're an engineer, right?
@@nomadtrails no not that. I mean that most Svelte libs that I tried is abandoned. One example: headless UI. I won’t rebuild that.. other ui ones are also abandoned, there are wayy less stuff available.. its just a general feeling using the thing that the community is waaaaay smaller
This was great! I'm more keen to try out svelte now
Svelte is a clear winner here, no space for discussions
Loved the video. I think the dev world is missing a lot of content that already assumes I'm a software engineer. When I want to know the difference between React and Svelte, I want to know how the go about solving the common problems, what are the things they do well, what they do badly, how the tooling and ecosystems are, and that's about it.
I think the best way to explain Svelte is that it is very much like React but without all the boilerplate and better performance, just with a smaller ecosystem
Thanks. Now I'm gonna use Svelte for most of my side projects
Thats it. this video did it over for me. I don't feel like my head is spinning circles trying to figure out how to write some simple code for a web app... I'll just use svelt from now on. thanks!
Keep preaching the good word 🙏
Svelte actually looks very good and almost makes me want to learn yet ANOTHER JS framework 😅 However, I think React's ecosystem would be very very hard to leave without a familiar place to move
React's ecosystem is 99% trying to fix bad things about React, lol. Svelte makes using existing vanilla js libraries easy so you are not locked into a single ecosystem. Using vanilla js in React possible but not convenient (which is why, like, half of React libraries are just wrappers for vanilla js libraries, lol -- the other half are state management libraries because doing that out of the box with React is pain).
@@lydianlights I couldn't agree more
Bokeh
@@lydianlightsthis seems like the trendy thing to say these days. What exactly is broken in React and fixed by the ecosystem?
And don't just throw in state management (I can see it coming) if you don't tell me what exactly is wrong there. And if you think devs actually need things like Redux for big projects, that's on you not React.
The only library I cannot work without is React Query, and that's mostly for its caching and deduping features nothing else.
I love Svelte, absolutely love it, but it's no where near as battle tested as React, and the ecosystem of component libraries alone is enough to make me think twice at this point.
Excellent comparison, Svelte is great.
13 bucks for a Fireship Sveltekit+Firebase crash course? That's an absolute steal in my book. Bought it instantly. Awesome work, as always!
I don't have the 13 bucks. I would have bought it
We really need a Nuxt vs next , thanks
Could you compare them but including testing? In react it is really easy because you can just test individual logic, hooks and components rendering but testing Svelte templates seems complicated
You really made me put Svelte and Jotai on my learning list. Like it is not enough long already. 😁
People argue that the ecosystem is a big thing. Yeah, it totally is, but don't let anyone stop you from doing what you want to do. If you want to use Svelte, then use it. Don't worry about others saying "React is better because of the ecosystem." That doesn't matter, and the only thing that matters is you love what you do, so stop using something just because of its popularity, knowing that you'll be miserable, or use something that you love, and don't care about what others say.
I'm a noob self-taught developer (started about 7 months ago) finishing up my learning of vanilla CSS/JS/HTML (along with learning some IT and cloud stuff to be really well-rounded and maybe eventually do full stack), and I'm planning on learning Svelte instead of React first. I'm not just learning front-end and my priority is on getting out good projects to set myself apart, rather than just following the industry standard path. But I will 100% eventually learn React eventually if it continues to be as dominant.
I used both React and Svelte.
I gave up on React after two weeks of learning this dumpster fire.
I am still using Svelte and even convinced my company to use it...
Feeling proud to be a svelte developer.
Ive used all frameworks and libraries :- React, Next, Svelte, Vue, Solid. and i was amazed how simpler svelte is but syntax is kinda weird sometimes.
Solid seems a good option. But when REACT FORGET ( Compiler ) comes in it would be hard to pick those. Except SSR things.
Feels like Svelte code is more cleaner easier to maintain and learn in comparison of React. For me I am trying to learning React and I feels lot of challenges in error handling, state management.
Now I start feels like I can give Svelte a try.
Thanks for your content, Jeff!
Svelte has soem magic in the background but its so powerful. Once you understand how it deeply works, it's just awesome and way more easy to read.
Decoupled templates from scripts.
I appreciated the href="/heaven" attribute at 2:58. If this isn't dark programmer humor, I don't know what is. I hope my dad says hi to your dad up there. Thanks for the fantastic content as always!
And 'Hi mom' is on the 'home' route :')
I think Vue has the best template IF/Conditional solution and implementation.
It's concise and easy to read as Svelte, but moved another extra step further.
It's easy to see where Vue 3 with composition api and script setup is inspired by 😂 I was waiting for Svelte 4 to implement my App, now I don't have any excuses left.
I mean, unless you didn't read it, it was clearly stated in vue's docs...
02:59 I'm so sorry Jeff, I didn't know your Dad had passed away.
I love how every video of yours always has a **Hi Mom!** tucked in somewhere, but was the first time seeing the Hi Dad!.
I like Svelte's approach.
Ok, i'll learn Svelte now.
I feel dumb using react, i'm not gonna lie.
Don't feel dumb, it's just that React is an overengineered mess
Then you use it on a real full scale application for 6 months, it inevitably becomes messy and you run into its own limitations, you start hating it, a new shiny framework appears, you feel dumb for using Svelte, you switch to the new framework, the cycle repeats.
@@bluecup25 Nope. I hate React because it IS an overengineered mess, but always loved (and still do) working on Vue or Svelte projects. Have been working on Vue/Svelte projects for years.
@@BabyPigmanRobotStrange, because I tried using svelte for a large project and ended up going back to next.js. Maybe over engineered is the way for me lol. Mostly because I spent a good amount of time using nestjs.
Svelte looks awesome, ngl, but as a React programmer, I don't quite get it why people complain about it that much. I think React is very stable and efficient once you understand it's cycle well, and the way you're supposed to do things on it. Maybe it's a negative side of React to have to adapt to it, but to me React looks crazy powerful and easy to do almost anything once you get it and pick the right libraries. It might be a wrong idea of mine, but seems like most people that complain about React just didn't fully understand "the React way" yet.
And yes, if we talk about performance, obviously any other of those new frameworks can perform better indeed, but so far I never had a case where React performance was holding me back, so that's pretty much whatever. In some few cases i had to add a useMemo(or React.memo) or two, and that's it, problem solved.
It's not like using useMemo/React.memo is hard anyways lol. It's super easy.
I think it's less that React is necessarily *hard* per se, and moreso that React has a bunch of leaky abstractions that you just have to know and that end up decreasing your codes clarity. To me, literally every time I've seen a React vs. Svelte comparison, the Svelte code looks just so much easier to read. That coupled with the added performance just makes Svelte a killer combo.
All this said -- I still respect React for its place in the evolution of UI frameworks! It was and continues to be a monumentally important framework, obviously. But I do think that the newer kid on the block is actually better this time. Just me 2 cents though :)
@@JaLikon65 Yes, this so much. React is a garbage pile of leaky abstraction. It requires soooo much knowledge from the dev to not immediately shoot themself in the foot with stuff like useEffect and useContext. Especially when stuff starts interacting in complex ways. I know react very well, but there is so much mental overhead that comes with it that people tend to forget once they are good at it.
@@JaLikon65 No one is talking about being better though. I believe there is more frameworks besides Svelte that are "better" than React, and If I just wanted better I'd be using solidJS already, but no frontend framework libraries are as mature as the react ones. Anyways, my point was that the React complains don't seem valid to me. I don't have much problems with "code clarity" for example. Since I learned that I can do custom hooks, my react code looks pretty clean imo, and I can't think of that many "leaky abstractions" react has. React is basically state, context, useeffect, props, create custom hooks and learning the different techniques to render conditional/situation stuff i guess? Add the annoying router from the original CRA or the few additional layers that u will have to learn if you pick NextJS instead, and thats it. You can now do almost everything, and the rest is better handled by libraries(example: http requests). If you start learning other frameworks, you will also have to learn their own abstractions, so you will still lose time and do lots of mistakes. The only difference is that react doesn't let you code the vanilla way, but once you accept it, it becomes easy.
@@lydianlights useContext api could be less confusing not gonna lie. useEffect is nothing too out of this world. The problem is that people use useEffect more than they should sometimes. You do shoot yourself in the foot indeed, but you don't shoot yourself in the foot when you're learning svelte?
@@upsxace useEffect is like... "oh I wanna use this intermediate function to do something... oh why is it using old state values whenever I call it... oh I better add it to the dependency array... oh why is my component infinitely rerendering... oh I have to use this useCallback hook instead of a plain function...". I just always think about the boilerplate I had to write to get lodash's debounce() to play nicely with React, lol.
I think it's not that Svelte lacks complexity, just that it's a lot easier to get to the root of the issue imo.
I think React is definitely powerful and was ahead of its time and was an important milestone, but I am glad something better is coming along. One thing I think is actually very good about React that people don't talk about is its emphasis on one-way data binding. That is one of the things React enforces that truly does help reduce complexity immensely and I wish Svelte and Solid has a more opinionated stance on that. One-way binding is more opt-in in those frameworks and not actually enforced by the structure of the framework itself.
Also I didn't mean to write an essay, whoops lol.
It will be interesting to show limitations of svelte
I started svelte 2 days ago it's fking easy and easy to learn. love it
IN MY OPINION slots make much more sense than components in properties
Vue vs Svelte when ?
Awesome!
Would love a Svelte VS Vue now :D
Thank you bro for telling me about jotai.
Looks a lot like Vue to me. And yes, quite a bit nicer than React in my opinion.
Vue 3 looks a lot like React though, and I liked Vue 2 the most
@@theohallenius8882 How? Script setup is great! So much better than Vue 2 and you can still do all your Vue 2 stuff in Vue 3
@@theohallenius8882 how? in my opinion vue3 is more readble than the OptionsAPI. CompositionAPI with is really made it more JavaScripty
@@AnwarulIslamYT Composition api IMHO was created as syntax sugar for react people. I am currently using vue3 with options API and i feel alot bettern than using comp API. the thing with options api is that the logic is "sloted". You cannot put methods here then some data, then other methods way below. Is all placed in their respective place making navigation easier
@@AnwarulIslamYT the whole option composition thing i think missed the mark with making vue a simple alternative like evan wanted originally
I am surprised you didn't mention the React Context API which is used for sharing data/props on a global level.
I was just about to comment on this. I’m confused as to why it wasn’t mentioned. Idk if that was a sponsor shoutout or what but definitely weird that it wasn’t talked about for global level.
Because that is an absolute hell to work with on anything but the simplest use cases. Zustand is a billions times better.
He used Jotai which is a vastly superior option to Context. Context has more boilerplate, is more annoying to optimize and as your app scales, you need to deal with placing contexts at the correct level.
Ignoring Context altogether and using Jotai as a replacement (a 2kb lib) is the correct approach. Context is fine for very simple use cases, but is pretty uncommon for any serious web app.
I almost included it. Svelte and React both have context APIs that are almost identical, but they're best for specialized cases where you need data scoped at specific levels of the component tree. I would not use context for global state management.
Good luck using context for global state. You will rerender your app a trillion times.
Amazing comparison :)
Thank you. Thanks to your video I now appreciate Vue even more
"I'm not here to tell you one is better than the other" and proceeds to show how much svelte is in every way
"React doesn't have something built in for managing state"
React Context: Am I a joke to you?
Those pitchfork men at 9 seconds in must be some of the best footage ever shot in history
Really great summary
I wish you could update this video to create a comparison between react, svelte 4 and svelte 5, given that with runes and snippets many things will change, with some things being now more similar (but not quite the same) as react
06:29 - React has a primitive way of sharing state -> useContext, its kind of clunky with having to use the Provider wrapper, but for most simpler use cases (i.e. having a few global state variables) I´d say its fine and I would use it over an external library.
as far as I know, shared context is not reactive, so it's not about state
@@merovingen4546 it is reactive if your context returns states as values
I used useContext in my react project, but then I heard that useContext does a lot of unnecessary re-renders when the context changes.
@@stephengruzinSpecifically, Context is hard to optimize for re-renders as your app scales. If your context is a simple object, every consumer is going to re-render when that object changes, even if that consumer cares about only one field.
The solution is to put each field into its own Context. Which is really laborious to do for complex data.
Fireship did the correct thing by using Jotai. Most state management libraries (redux, zustand, etc) will only trigger re-renders when the slice of data from the state you're reading has changed.
After trying several frameworks I eventually settled on Svelte and never looked back. Of course there are fewer companies that use Svelte and I'd be more desirable employee if I worked with React 24/7, but guess what? After working with Svelte for a while React simply sucks, and you couldn't pay me enough to go back to React voluntarily. I use Preact from time to time with Astro for fun but writing everything in React is like shooting yourself in the foot.
why you so mad with React lil bro, just move on
@@nikdanilov2854 he already did lil sis.
@@paradiseexpress3639 LOL😄
Awesome video man🤘
Worked a lot in Svelte. Nowadays a lot in NextJS, but I've always loved Svelte.
Svelte will dethrone React and will become the only framework anyone will want to use. I say within 2 years this will happen. Theres nothing that can beat it
Why? What makes you say that?
I have to warn everybody that wants to try svelte:
You wouldn't want to write in anything else after trying it.
Svelte might have become my favorite web coding script without even writing a single line of code in it. I was wondering if I should learn it, now I have to learn it now.
it was great. keep going 💪
I'm glad my gut made me avoid React for the past decade (I also despise big corps); it felt contrived, complicated, verbose, even tho the huge hype; 've never got convinced by arguments, never felt like learning it (apart for the conceptual level; because of course React was a game changer, at the time).
Also it pushed too much for functional-programming (when nobody asked for that, and everybody had to adapt to it, because "now that's the industry standard").
Finally, JSX approach was always wrong (put HTML into JS) and not easy to maintain (still, imho, coming from favoring SoC & graceful-degradation).
I've dated Vue in the meanwhile; other valid alternative.
Svelte seems a lot easier to learn, more to the point, and focusing on DX, providing more or less the same technology.
Finally JS world is starting to go the right direction (imho).
And am curious if HTMX is the next step.
Spoiler alert. Svelte Is better.
Why is that 😂
@@Dev-kw8co I mean...his video is basically bias...
@@alexwilkinsgamescan you create a React bias video vs Svelte?
@@thedelanyojajaja best answer. Do you have anything good to say about react?
It's not a contest, but every single thing is better in Svelte!
thanks for the explanation brother
"I'm not here to tell you which one is better"
*Proceeds to show me every reason known to God why Svelte is objectively better than React, and 0 positives for React*
Well that’s just untrue. I’m only half way through the video and he’s mentioned 3 positives of react over svelt.
@@JackiePrimemy comment wasn't at all serious. Yeah, he does name some positives for React, but most of them are subjective, and I think in most of these cases, Svelte offers a just as good if not better alternative. So to me, the video came across as extremely positive to Svelte. I was just trying to make a funny about that.
@@Jorrit_200fair enough
To me though, if your are really angsty about react for some reason, the only realistic alternatives are vue and angular...
_"The only way to truly find out which one is best is to build something with both of them and decide for yourself."_
I did, and the winner is Svelte. Now you can all go home.
The fact I can use my beloved If and each is GOAT.
I just love Svelte and currently help a client built an enterprise web solution with it. Data heavy.
Svelte is super performant, compact, and simply a joy to work with conceptually.
Three years back, I was a desktop app developer, mainly using Microsoft’s WPF or its follow up technologies. I still love WPF, especially the data binding implementation. I know that many hate it but actually all web frameworks more or less now work in similar ways, Svelte actually very very similar.
But before desktop, I was mainly web developer, just in a time before even jquery. Plain HTML, CSS and JavaScript. Moving back to web I started with React. I grasped the concepts but found I it heavy and tedious. Especially data binding or as it is called state management.
Before I could dive too deep into React, a colleague pointed to Svelte, I tried it and never looked back.
Good to read this, mate. Almost the same for me. I work with heavy data-viz projects, svelte performance is a blessing. I met a lot of react devs whose projects were really laggy because of react re-render after every change. Btw, right now i'm using Tauri & Sveltekit to build desktop apps, results are super performant. Combining Rust with Svelte is dope.
I'm just gonna stick with React for now. Even if it is more verbose, it is clearer what it does. Svelte is too much black magic for me, and I have no idea to what extent I can trust the compiler to handle all the edge cases.
That's simple: you can trust the compiler 100% of the time. Your mistrust is really interesting as it shows the abuse React has put you through.