React VS Svelte...10 Examples

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 1.1K

  • @Xe054
    @Xe054 ปีที่แล้ว +3602

    Thanks, now I can put Svelte on my resume.

    • @theohallenius8882
      @theohallenius8882 ปีที่แล้ว +78

      Every employer should consider Svelte if they want anyone to jump into code and be productive

    • @MSTRCMDR
      @MSTRCMDR ปีที่แล้ว +41

      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

    • @writingpanda
      @writingpanda ปีที่แล้ว +2

      😂😂😂

    • @electrolyteorb
      @electrolyteorb ปีที่แล้ว +12

      ​@@MSTRCMDRthere is this Indian Exam preparation site that uses Sveltekit.... I think they watched Fireship or something 🤔

    • @The__Leo69
      @The__Leo69 ปีที่แล้ว +14

      I put it after 100 seconds video itself. 🙂

  • @ayndqy
    @ayndqy ปีที่แล้ว +1407

    You can pass components as props in Svelte and render them using special element.

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 ปีที่แล้ว +15

      Still verbose and sometimes buggy

    • @irlshrek
      @irlshrek ปีที่แล้ว +68

      @@andreilucasgoncalves1416 can you elaborate?

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 ปีที่แล้ว +28

      @@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

    • @komi5018
      @komi5018 ปีที่แล้ว +23

      can you provide use case for this where cannot handle ?

    • @shapelessed
      @shapelessed ปีที่แล้ว +2

      @@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.

  • @pesterenan
    @pesterenan ปีที่แล้ว +817

    I consider myself a React developer, but seeing these comparisons makes me understand why Svelte is so awesome!

    • @FreehuntX93
      @FreehuntX93 ปีที่แล้ว +34

      Which means you are a bad developer :)

    • @pesterenan
      @pesterenan ปีที่แล้ว +45

      @@FreehuntX93 noooooooooo xD

    • @MrMudbill
      @MrMudbill ปีที่แล้ว +10

      @@FreehuntX93 Why?

    • @expensivecats
      @expensivecats ปีที่แล้ว +8

      @@MrMudbill Because it looks so ugly and you can't even pass components as props.

    • @medaltechie7178
      @medaltechie7178 ปีที่แล้ว +62

      @@expensivecats 🤣🤣🤣....you are just too pained that svelte is better

  • @baka_baca
    @baka_baca ปีที่แล้ว +185

    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

    • @raddragons
      @raddragons ปีที่แล้ว +12

      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

    • @johnnyblack4261
      @johnnyblack4261 4 หลายเดือนก่อน +1

      As the saying goes, less is more!

  • @crazyravioli_4203
    @crazyravioli_4203 ปีที่แล้ว +376

    I prefer React because it reminds me of my previous job as a java developer.

    • @shubitoxX
      @shubitoxX ปีที่แล้ว +42

      😂😂😂

    • @cyberducc
      @cyberducc ปีที่แล้ว +17

      RIP 😂

    • @irlshrek
      @irlshrek ปีที่แล้ว +3

      Oof hahah

    • @MichaelMantion
      @MichaelMantion ปีที่แล้ว +4

      You poor thing.

    • @007arek
      @007arek ปีที่แล้ว +17

      How? As a Java developer svelte looks more like a template engine.

  • @AnirudhIsOnline
    @AnirudhIsOnline ปีที่แล้ว +68

    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 👍

  • @Martiansfromthemoon
    @Martiansfromthemoon ปีที่แล้ว +139

    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

    • @Daijyobanai
      @Daijyobanai ปีที่แล้ว +8

      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.

    • @pi17
      @pi17 ปีที่แล้ว

      What hackathon btw?

    • @jorgeramirezamora
      @jorgeramirezamora ปีที่แล้ว +12

      Is a little weird because we React devs are used to suffer

    • @tarunsharma8442
      @tarunsharma8442 ปีที่แล้ว +1

      @@jorgeramirezamora indeed 😭

    • @jingle1161
      @jingle1161 ปีที่แล้ว

      "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....

  • @lwinklly
    @lwinklly ปีที่แล้ว +407

    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

    • @echoptic775
      @echoptic775 ปีที่แล้ว +58

      No javascript framework comes even close to features of laravel

    • @BeepBoop2221
      @BeepBoop2221 ปีที่แล้ว +29

      ​@@echoptic775go on

    • @hakim_jazuli
      @hakim_jazuli ปีที่แล้ว +18

      ​@@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...

    • @ea_naseer
      @ea_naseer ปีที่แล้ว +9

      ​@@hakim_jazuliisn't the SSR problem solved by "laravel + frontend JavaScript framework"?

    • @ThePandaGuitar
      @ThePandaGuitar ปีที่แล้ว +21

      It's nice to be young

  • @asatorftw
    @asatorftw ปีที่แล้ว +346

    Svelte literally saved my web development passion.

    • @Ricardoromero4444
      @Ricardoromero4444 ปีที่แล้ว +4

      Wait till you try elm

    • @TheOne13337
      @TheOne13337 ปีที่แล้ว +18

      @@Ricardoromero4444 I puked little

    • @ccgarciab
      @ccgarciab ปีที่แล้ว +7

      ​@@Ricardoromero4444Elm is (was?) nice, but the governance got screwed, didn't it?

    • @YuriG03042
      @YuriG03042 ปีที่แล้ว +2

      elm has been dead for a while now

    • @nomadtrails
      @nomadtrails ปีที่แล้ว

      @@Ricardoromero4444 Wait till you try Elixir

  • @alichamas63
    @alichamas63 ปีที่แล้ว +83

    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.

  • @stijndcl
    @stijndcl ปีที่แล้ว +245

    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.

    • @shapelessed
      @shapelessed ปีที่แล้ว +40

      @@LongJourneys Browsers already have support for components, but the implementation is utter garbage.

    • @doc8527
      @doc8527 ปีที่แล้ว +43

      "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.

    • @doc8527
      @doc8527 ปีที่แล้ว +11

      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.

    • @theprovost
      @theprovost ปีที่แล้ว +5

      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!

    • @gufoscuro
      @gufoscuro ปีที่แล้ว +11

      @@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.

  • @dheerajs2838
    @dheerajs2838 ปีที่แล้ว +106

    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.

    • @DevTram
      @DevTram 11 หลายเดือนก่อน

      That's great to know

  • @razmakaz8736
    @razmakaz8736 ปีที่แล้ว +436

    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.

    • @chauhanvats3
      @chauhanvats3 ปีที่แล้ว +27

      How did you find svelte jobs?

    • @yhz2K
      @yhz2K ปีที่แล้ว +9

      how did you find massive ecosystem of reactjs for Svelte ?
      React Libraries are in 100000s while Svelte ????

    • @clementseiller1255
      @clementseiller1255 ปีที่แล้ว +67

      @@yhz2K You probably do not need as big of an ecosystem because you have the vanilla js ecosystem which is huge already.

    • @henil0604
      @henil0604 ปีที่แล้ว +35

      @@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.

    • @GoldenBeholden
      @GoldenBeholden ปีที่แล้ว +13

      @@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.

  • @nyashachiroro2531
    @nyashachiroro2531 ปีที่แล้ว +47

    More of these comparisons please 😊

  • @Lemmy4555
    @Lemmy4555 ปีที่แล้ว +9

    After 3 years of experience with Svelte, i would certanly refuse a React job that pays me 50% more. The joy to work with Svelte worth much more.

  • @nagarajansubramani
    @nagarajansubramani ปีที่แล้ว +6

    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!.

  • @cheese-grater255
    @cheese-grater255 ปีที่แล้ว +47

    Another comparison between between Next and Nuxt or Vue and React would be awesome as well.

  • @inDefEE
    @inDefEE ปีที่แล้ว +55

    Using svelte and sveltekit for a side project that unexpectedly had some success and I needed to get a small app together quickly. I figured it'd be worth it to learn something new as opposed to just using what I already know (React).
    Man it's like a dream. Going back to React at my job feels awful.

    • @weebslime
      @weebslime ปีที่แล้ว +9

      I really wish people would start using svelte instead of react at my workplace

    • @verified_tinker1818
      @verified_tinker1818 ปีที่แล้ว +2

      What’s the side project, if you don’t mind me asking?

    • @inDefEE
      @inDefEE ปีที่แล้ว

      @@verified_tinker1818 it’s a lead generation tool for chefs!

  • @MegaRandomizor
    @MegaRandomizor ปีที่แล้ว +15

    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.

  • @mikesantiago_
    @mikesantiago_ ปีที่แล้ว +16

    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.

    • @WolfManThoughts
      @WolfManThoughts ปีที่แล้ว

      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.

  • @kinershah464
    @kinershah464 ปีที่แล้ว +4

    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.

  • @Ataraxia_Atom
    @Ataraxia_Atom ปีที่แล้ว +7

    Ive never used React, but ive been really enjoying learning and using Svelte.

  • @ccgarciab
    @ccgarciab ปีที่แล้ว +13

    Something that I liked a lot in Svelte is auto scoped CSS. Feels like it should be the default at a browser level.

    • @zachhopkins6162
      @zachhopkins6162 ปีที่แล้ว +2

      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.

    • @kaedriz
      @kaedriz ปีที่แล้ว +1

      @@zachhopkins6162 What do you mean? Did you used 'scoped' attribute or 'module'? Because these 2 limit tag to only that SFC.

  • @DamonMedekMusic
    @DamonMedekMusic ปีที่แล้ว +46

    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.

  • @rubelexia
    @rubelexia 11 หลายเดือนก่อน +3

    this is the best video i've seen so far about frameworks in general. congratulations.

  • @JackMCGamerAnimations
    @JackMCGamerAnimations ปีที่แล้ว +2

    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.

  • @pierbover
    @pierbover ปีที่แล้ว +52

    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.

    • @maskman4821
      @maskman4821 ปีที่แล้ว +1

      great point 👍

    • @YuriG03042
      @YuriG03042 ปีที่แล้ว +3

      why is it wrong? seems like a 1:1 comparison since useEffect will also perform side effects once the element has been mounted

    • @beyondfireship
      @beyondfireship  ปีที่แล้ว +10

      Good call, that is an important distinction.

    • @gladideg1
      @gladideg1 ปีที่แล้ว

      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.

  • @fernandoarteaga9805
    @fernandoarteaga9805 ปีที่แล้ว +41

    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

    • @fernandoarteaga9805
      @fernandoarteaga9805 ปีที่แล้ว +5

      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

    • @FulanoDeTal333
      @FulanoDeTal333 ปีที่แล้ว +4

      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...

    • @askeladden450
      @askeladden450 ปีที่แล้ว +7

      If you like tailwind philosophy, Skeleton for svelte is amazing. I also find Chakra for React much better than material ui.

    • @theprovost
      @theprovost ปีที่แล้ว

      IBM Carbon for Svelte is great !

  • @OwO-.
    @OwO-. ปีที่แล้ว +18

    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

  • @santanu29
    @santanu29 ปีที่แล้ว +1

    Solid js home page has your video link to get an idea in 100 seconds. Great man.

  • @dosomething6975
    @dosomething6975 ปีที่แล้ว +7

    I'm actually glad you made this. Been on the edge of learning svelte and this finally convinced me! Cheers 🍻

  • @beinyourguard
    @beinyourguard ปีที่แล้ว +45

    it is clear that svelte is easy to implement, while react survives due to its ecosystem and community.

    • @ko-Daegu
      @ko-Daegu ปีที่แล้ว +2

      sveltekit got good eco-system too

    • @TheGargalon
      @TheGargalon ปีที่แล้ว +12

      svelte is approaching that critical mass where the ecosystem will be large enough that it won't be a factor anymore in those comparisons

    • @danvilela
      @danvilela ปีที่แล้ว

      @@TheGargalon nah.. not that great.. I had to build a lot of stuff on my own on my last svelte project :/

    • @nomadtrails
      @nomadtrails ปีที่แล้ว +5

      ​@@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?

    • @danvilela
      @danvilela ปีที่แล้ว

      @@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

  • @brunog.campos3236
    @brunog.campos3236 ปีที่แล้ว +3

    It would be awesome to have a video like that comparing React and Vue, with examples

  • @Aezur20
    @Aezur20 ปีที่แล้ว +7

    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.

  • @nwekoder
    @nwekoder ปีที่แล้ว +23

    Time to learn Svelte
    If i can request something, i want to see PWA tutorial😊

    • @ko-Daegu
      @ko-Daegu ปีที่แล้ว +1

      true i know nothingof pwa

    • @Spomf
      @Spomf ปีที่แล้ว +1

      Fireship has a PWA tutorial in his 100 seconds playlists (but it's 8 minutes).

  • @misaelpereira9679
    @misaelpereira9679 ปีที่แล้ว

    Svelte is a clear winner here, no space for discussions

  • @shyamaghara
    @shyamaghara ปีที่แล้ว +17

    Pls do a similar Solid vs Svelte comparison as well. Thanks!!

  • @a99g
    @a99g 3 หลายเดือนก่อน +1

    Glad that I learned web development on svelte and made my first 3 projects including a personal website 🙏

  • @shapelessed
    @shapelessed ปีที่แล้ว +7

    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...

  • @sunithkumar2632
    @sunithkumar2632 ปีที่แล้ว

    I am a backend developer and was once FE, I love this guy.
    Never misses any Js technology update

  • @SteveLombardi58
    @SteveLombardi58 ปีที่แล้ว +8

    This is awesome. I bought your Sveltekit course. I'm an Angular dev looking to expand my knowledge and really don't "get" React.

    • @punishedbarca761
      @punishedbarca761 9 หลายเดือนก่อน

      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.

  • @mikle1404
    @mikle1404 ปีที่แล้ว

    13 bucks for a Fireship Sveltekit+Firebase crash course? That's an absolute steal in my book. Bought it instantly. Awesome work, as always!

    • @karuchiu
      @karuchiu ปีที่แล้ว

      I don't have the 13 bucks. I would have bought it

  • @maxijonson
    @maxijonson ปีที่แล้ว +11

    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

    • @lunafoxfire
      @lunafoxfire ปีที่แล้ว +16

      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).

    • @realdaly
      @realdaly ปีที่แล้ว +3

      @@lunafoxfire I couldn't agree more

    • @MuhammadSyamililham
      @MuhammadSyamililham ปีที่แล้ว

      Bokeh

    • @baldcoder_
      @baldcoder_ 11 หลายเดือนก่อน +1

      ​@@lunafoxfirethis 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.

  • @MasterQuestMaster
    @MasterQuestMaster 7 หลายเดือนก่อน +1

    I like that Svelte templating is basically Handlebars, but with more features.

  • @upsxace
    @upsxace ปีที่แล้ว +3

    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.

    • @JaLikon65
      @JaLikon65 ปีที่แล้ว +2

      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 :)

    • @lunafoxfire
      @lunafoxfire ปีที่แล้ว +2

      @@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.

    • @upsxace
      @upsxace ปีที่แล้ว +1

      @@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.

    • @upsxace
      @upsxace ปีที่แล้ว +1

      ​@@lunafoxfire 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?

    • @lunafoxfire
      @lunafoxfire ปีที่แล้ว +2

      @@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.

  • @underguysports_1359
    @underguysports_1359 ปีที่แล้ว +1

    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.

  • @pankajsharma9801
    @pankajsharma9801 ปีที่แล้ว +3

    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.

  • @sonofdarvin
    @sonofdarvin ปีที่แล้ว +2

    I have played with Svelte a lot more than with React, since I started learning web dev. Svelte is hands down one of the best things to happen to web dev. One problem though is the availability of tutorials and community backing as compared to React.

    • @nomadtrails
      @nomadtrails ปีที่แล้ว

      the official svelte tutorial is really all you need, its incredibly good

  • @armoredchimp
    @armoredchimp ปีที่แล้ว +6

    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.

  • @zFGiveNLATAM
    @zFGiveNLATAM ปีที่แล้ว +1

    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.

  • @hanes2
    @hanes2 ปีที่แล้ว +2

    We really need a Nuxt vs next , thanks

  • @LuisBlancoAustin
    @LuisBlancoAustin ปีที่แล้ว +1

    Wow! Svelte's syntax is so easy to grasp. I had no idea Svelte was so awesome!

  • @theohallenius8882
    @theohallenius8882 ปีที่แล้ว +27

    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.

    • @nikdanilov2854
      @nikdanilov2854 ปีที่แล้ว +1

      why you so mad with React lil bro, just move on

    • @paradiseexpress3639
      @paradiseexpress3639 ปีที่แล้ว +15

      @@nikdanilov2854 he already did lil sis.

    • @FulanoDeTal333
      @FulanoDeTal333 ปีที่แล้ว

      @@paradiseexpress3639 LOL😄

  • @Callumkloos
    @Callumkloos ปีที่แล้ว

    Those pitchfork men at 9 seconds in must be some of the best footage ever shot in history

  • @fueledbycoffee583
    @fueledbycoffee583 ปีที่แล้ว +10

    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

  • @marksouzacosta
    @marksouzacosta ปีที่แล้ว +1

    When you finish reading this, a new and revolutionary JavaScript Framework that will change the world will have emerged.

  • @johnrio
    @johnrio ปีที่แล้ว +3

    Keep preaching the good word 🙏

  • @VKD007
    @VKD007 ปีที่แล้ว +1

    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.

  • @semikolondev
    @semikolondev ปีที่แล้ว +10

    Ok, i'll learn Svelte now.
    I feel dumb using react, i'm not gonna lie.

    • @theohallenius8882
      @theohallenius8882 ปีที่แล้ว +10

      Don't feel dumb, it's just that React is an overengineered mess

    • @bluecup25
      @bluecup25 ปีที่แล้ว +2

      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.

    • @BabyPigmanRobot
      @BabyPigmanRobot ปีที่แล้ว

      @@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.

    • @Saurabhkumar-bn3dl
      @Saurabhkumar-bn3dl ปีที่แล้ว +3

      ​@@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.

  • @hnazmul
    @hnazmul ปีที่แล้ว +2

    Feeling proud to be a svelte developer.

  • @irlshrek
    @irlshrek ปีที่แล้ว +5

    IN MY OPINION slots make much more sense than components in properties

  • @michaelpumo83
    @michaelpumo83 2 หลายเดือนก่อน +1

    If you like the Svelte option, try Vue too. Because it's so similar but IMO has a nicer style. Vue has slots, directives and async mounted etc.

  • @fatih.tavukcu
    @fatih.tavukcu ปีที่แล้ว +34

    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.

    • @qwertyuio53
      @qwertyuio53 ปีที่แล้ว +5

      I mean, unless you didn't read it, it was clearly stated in vue's docs...

  • @Metruzanca
    @Metruzanca ปีที่แล้ว +2

    I personally prefer Solidjs mainly because I like components as functions and all the benefits that come with it. But if I were to get the chance to make an app in solid or svelte I really wouldn't complain. Both are great fun and come with tons of simplicity.

  • @krzysztofkwiatkowski8087
    @krzysztofkwiatkowski8087 ปีที่แล้ว +2

    Your rock! I'm learning it right now! 🤩🤩

  • @patricknelson
    @patricknelson ปีที่แล้ว

    8:23 What really gets me, even though “React is just JS🤪”, Svelte’s capability to “await” and “then” right there in its template feels so much more natural… to a pure JS developer… than what you see there on the left.

  • @kaosce
    @kaosce ปีที่แล้ว +3

    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

  • @arjunsonip
    @arjunsonip ปีที่แล้ว +1

    Wow, I feel like I can start a project in svelte just by watching 8mins of your video.

    • @irlshrek
      @irlshrek ปีที่แล้ว +1

      I literally learned svelte and sveltekit and was up and running all within a weekend! Super intuitive and amazing documentation

  • @AlbertCloete
    @AlbertCloete ปีที่แล้ว +24

    Looks a lot like Vue to me. And yes, quite a bit nicer than React in my opinion.

    • @theohallenius8882
      @theohallenius8882 ปีที่แล้ว +6

      Vue 3 looks a lot like React though, and I liked Vue 2 the most

    • @quintencabo
      @quintencabo ปีที่แล้ว +13

      @@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

    • @AnwarulIslamYT
      @AnwarulIslamYT ปีที่แล้ว +11

      @@theohallenius8882 how? in my opinion vue3 is more readble than the OptionsAPI. CompositionAPI with is really made it more JavaScripty

    • @fueledbycoffee583
      @fueledbycoffee583 ปีที่แล้ว +1

      @@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

    • @ko-Daegu
      @ko-Daegu ปีที่แล้ว +1

      @@AnwarulIslamYT the whole option composition thing i think missed the mark with making vue a simple alternative like evan wanted originally

  • @minikame2272
    @minikame2272 ปีที่แล้ว +1

    I will be the no doubt millionth person to say that Svelte lets you pass components as props no problem. Only snag is you need to use a special element tag

  • @NoFailer
    @NoFailer ปีที่แล้ว +16

    I am surprised you didn't mention the React Context API which is used for sharing data/props on a global level.

    • @kammitch3131
      @kammitch3131 ปีที่แล้ว +2

      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.

    • @askeladden450
      @askeladden450 ปีที่แล้ว +11

      Because that is an absolute hell to work with on anything but the simplest use cases. Zustand is a billions times better.

    • @moodynoob
      @moodynoob ปีที่แล้ว

      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.

    • @beyondfireship
      @beyondfireship  ปีที่แล้ว +8

      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.

    • @beefbox
      @beefbox ปีที่แล้ว +2

      Good luck using context for global state. You will rerender your app a trillion times.

  • @dokick2746
    @dokick2746 ปีที่แล้ว +1

    Svelte is by far the best framework out there and no one can convince me otherwise. (I've never written one single line of code in JS or did anything in WebDev)

  • @i3looi2
    @i3looi2 ปีที่แล้ว +9

    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.

  • @nomadtrails
    @nomadtrails ปีที่แล้ว

    It's not a contest, but every single thing is better in Svelte!

  • @sajawalhassan1f12
    @sajawalhassan1f12 10 หลายเดือนก่อน +5

    "React doesn't have something built in for managing state"
    React Context: Am I a joke to you?

  • @yannick5099
    @yannick5099 ปีที่แล้ว

    Really love these kind of compact videos.

  • @memento728
    @memento728 ปีที่แล้ว +23

    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.

    • @merovingen4546
      @merovingen4546 ปีที่แล้ว

      as far as I know, shared context is not reactive, so it's not about state

    • @MrLOPIU22
      @MrLOPIU22 ปีที่แล้ว +6

      @@merovingen4546 it is reactive if your context returns states as values

    • @stephengruzin
      @stephengruzin ปีที่แล้ว

      I used useContext in my react project, but then I heard that useContext does a lot of unnecessary re-renders when the context changes.

    • @moodynoob
      @moodynoob ปีที่แล้ว

      ​@@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.

  • @hamzahaddad4194
    @hamzahaddad4194 ปีที่แล้ว +2

    It will be interesting to show limitations of svelte

  • @martinlesko1521
    @martinlesko1521 ปีที่แล้ว +5

    Vue vs Svelte when ?

  • @sebastianscarano9418
    @sebastianscarano9418 11 หลายเดือนก่อน +1

    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

  • @7heMech
    @7heMech ปีที่แล้ว +3

    I have to warn everybody that wants to try svelte:
    You wouldn't want to write in anything else after trying it.

  • @thomasandersen6025
    @thomasandersen6025 ปีที่แล้ว

    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!

  • @pomdevv
    @pomdevv ปีที่แล้ว +3

    At 7:03 , when he says 'subscribe', the subscribe button lights up on desktop youtube ! Is that a new feature ?

  • @AbWischBar
    @AbWischBar ปีที่แล้ว +2

    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.

    • @bobbradleybell
      @bobbradleybell ปีที่แล้ว +1

      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.

  • @Chillycloth
    @Chillycloth ปีที่แล้ว +4

    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

    • @J3R3MI6
      @J3R3MI6 ปีที่แล้ว +2

      Why? What makes you say that?

  • @harvanchik
    @harvanchik ปีที่แล้ว

    You've convinced me to buy the Svelte Kit course. Thank you!

  • @bryson2662
    @bryson2662 ปีที่แล้ว +6

    "I'm not here to tell you one is better than the other" and proceeds to show how much svelte is in every way

  • @talhaibnemahmud
    @talhaibnemahmud ปีที่แล้ว

    Thanks. Now I'm gonna use Svelte for most of my side projects

  • @Pictor13
    @Pictor13 ปีที่แล้ว +3

    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.

  • @CodeByNumbers
    @CodeByNumbers ปีที่แล้ว

    Having used React, Vue, Svelte in several production projects, I have found SolidJS is the winner

  • @maxcohen13
    @maxcohen13 ปีที่แล้ว +4

    _"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.

  • @bevik12
    @bevik12 ปีที่แล้ว +2

    You really made me put Svelte and Jotai on my learning list. Like it is not enough long already. 😁

  • @artemstratienko4842
    @artemstratienko4842 ปีที่แล้ว +3

    Thanks for your content, Jeff!

  • @darkimpressive3258
    @darkimpressive3258 3 หลายเดือนก่อน

    Bro 😂
    The way you do your video is entertaining
    And informative at the same time
    Your sarcasm is very good

  • @eaglebirdiepar
    @eaglebirdiepar ปีที่แล้ว +77

    Spoiler alert. Svelte Is better.

    • @Dev-kw8co
      @Dev-kw8co ปีที่แล้ว

      Why is that 😂

    • @alexwilkinsgames
      @alexwilkinsgames ปีที่แล้ว +4

      @@Dev-kw8co I mean...his video is basically bias...

    • @thedelanyo
      @thedelanyo ปีที่แล้ว +6

      ​@@alexwilkinsgamescan you create a React bias video vs Svelte?

    • @erickmoya1401
      @erickmoya1401 ปีที่แล้ว +5

      ​@@thedelanyojajaja best answer. Do you have anything good to say about react?

  • @doxologist
    @doxologist ปีที่แล้ว +1

    This was great! I'm more keen to try out svelte now

  • @Jorrit_200
    @Jorrit_200 ปีที่แล้ว +19

    "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*

    • @JackiePrime
      @JackiePrime ปีที่แล้ว +3

      Well that’s just untrue. I’m only half way through the video and he’s mentioned 3 positives of react over svelt.

    • @Jorrit_200
      @Jorrit_200 ปีที่แล้ว +3

      ​@@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.

    • @JackiePrime
      @JackiePrime ปีที่แล้ว +1

      @@Jorrit_200fair enough

    • @qwertyuio53
      @qwertyuio53 ปีที่แล้ว

      To me though, if your are really angsty about react for some reason, the only realistic alternatives are vue and angular...

  • @ricoaw500
    @ricoaw500 ปีที่แล้ว

    I'm 3 years using react and never using svelte but I can say svelte is awesome from this video

  • @bluecup25
    @bluecup25 ปีที่แล้ว +10

    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.

    • @maelstrom57
      @maelstrom57 ปีที่แล้ว +1

      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.

  • @raging666
    @raging666 ปีที่แล้ว +1

    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!