React VS Svelte...10 Examples

Sdílet
Vložit
  • čas přidán 7. 05. 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

Komentáře • 1K

  • @Xe054
    @Xe054 Před 10 měsíci +3117

    Thanks, now I can put Svelte on my resume.

    • @theohallenius8882
      @theohallenius8882 Před 10 měsíci +75

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

    • @MSTRCMDR
      @MSTRCMDR Před 10 měsíci +40

      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 Před 10 měsíci +2

      😂😂😂

    • @electrolyteorb
      @electrolyteorb Před 10 měsíci +11

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

    • @The__Leo69
      @The__Leo69 Před 10 měsíci +13

      I put it after 100 seconds video itself. 🙂

  • @ayndqy
    @ayndqy Před 10 měsíci +1265

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

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 Před 10 měsíci +13

      Still verbose and sometimes buggy

    • @irlshrek
      @irlshrek Před 10 měsíci +58

      @@andreilucasgoncalves1416 can you elaborate?

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 Před 10 měsíci +26

      @@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 Před 10 měsíci +20

      can you provide use case for this where cannot handle ?

    • @shapelessed
      @shapelessed Před 10 měsíci +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 Před 10 měsíci +689

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

    • @FreehuntX93
      @FreehuntX93 Před 10 měsíci +25

      Which means you are a bad developer :)

    • @pesterenan
      @pesterenan Před 10 měsíci +37

      @@FreehuntX93 noooooooooo xD

    • @MrMudbill
      @MrMudbill Před 10 měsíci +8

      @@FreehuntX93 Why?

    • @jamescaramello6229
      @jamescaramello6229 Před 10 měsíci +6

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

    • @medaltechie7178
      @medaltechie7178 Před 10 měsíci +42

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

  • @baka_baca
    @baka_baca Před 10 měsíci +119

    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 Před 10 měsíci +9

      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

  • @asatorftw
    @asatorftw Před 10 měsíci +289

    Svelte literally saved my web development passion.

    • @Ricardoromero4444
      @Ricardoromero4444 Před 10 měsíci +4

      Wait till you try elm

    • @TheOne13337
      @TheOne13337 Před 10 měsíci +16

      @@Ricardoromero4444 I puked little

    • @ccgarciab
      @ccgarciab Před 10 měsíci +7

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

    • @YuriG03042
      @YuriG03042 Před 10 měsíci +2

      elm has been dead for a while now

    • @nomadtrails
      @nomadtrails Před 10 měsíci

      @@Ricardoromero4444 Wait till you try Elixir

  • @lwinklly
    @lwinklly Před 10 měsíci +374

    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 Před 10 měsíci +54

      No javascript framework comes even close to features of laravel

    • @BeepBoop2221
      @BeepBoop2221 Před 10 měsíci +28

      ​@@echoptic775go on

    • @hakim_jazuli
      @hakim_jazuli Před 10 měsíci +16

      ​@@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 Před 10 měsíci +9

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

    • @ThePandaGuitar
      @ThePandaGuitar Před 10 měsíci +15

      It's nice to be young

  • @crazyravioli_4203
    @crazyravioli_4203 Před 10 měsíci +333

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

  • @AnirudhIsOnline
    @AnirudhIsOnline Před 10 měsíci +56

    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 Před 10 měsíci +118

    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 Před 10 měsíci +5

      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 Před 10 měsíci

      What hackathon btw?

    • @JERZAMORA
      @JERZAMORA Před 10 měsíci +11

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

    • @tarunsharma8442
      @tarunsharma8442 Před 10 měsíci +1

      @@JERZAMORA indeed 😭

    • @jingle1161
      @jingle1161 Před 8 měsíci

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

  • @alichamas63
    @alichamas63 Před 10 měsíci +71

    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 Před 10 měsíci +237

    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 Před 10 měsíci +40

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

    • @doc8527
      @doc8527 Před 10 měsíci +40

      "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 Před 10 měsíci +10

      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 Před 10 měsíci +4

      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 Před 10 měsíci +10

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

  • @nyashachiroro2531
    @nyashachiroro2531 Před 10 měsíci +45

    More of these comparisons please 😊

  • @dosomething6975
    @dosomething6975 Před 10 měsíci +7

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

  • @rubelexia
    @rubelexia Před 4 měsíci +1

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

  • @dheerajs2838
    @dheerajs2838 Před 10 měsíci +90

    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 Před 4 měsíci

      That's great to know

  • @razmakaz8736
    @razmakaz8736 Před 10 měsíci +418

    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 Před 10 měsíci +26

      How did you find svelte jobs?

    • @yhz2K
      @yhz2K Před 10 měsíci +9

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

    • @clementseiller1255
      @clementseiller1255 Před 10 měsíci +64

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

    • @henil0604
      @henil0604 Před 10 měsíci +34

      @@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 Před 10 měsíci +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.

  • @pierbover
    @pierbover Před 10 měsíci +47

    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 Před 10 měsíci +1

      great point 👍

    • @YuriG03042
      @YuriG03042 Před 10 měsíci +4

      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  Před 10 měsíci +7

      Good call, that is an important distinction.

    • @gladideg1
      @gladideg1 Před 10 měsíci

      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.

  • @BRP-Moto-Tips
    @BRP-Moto-Tips Před 10 měsíci +1

    I really appreciate the effort and information you provide in each one of your videos Jeff, thanks a lot!

  • @cheese-grater255
    @cheese-grater255 Před 10 měsíci +44

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

  • @kinershah464
    @kinershah464 Před 10 měsíci +3

    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.

  • @Aezur20
    @Aezur20 Před 10 měsíci +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.

  • @santanu29
    @santanu29 Před 10 měsíci

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

  • @harvanchik
    @harvanchik Před 10 měsíci

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

  • @Ataraxia_Atom
    @Ataraxia_Atom Před 10 měsíci +7

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

  • @brunog.campos3236
    @brunog.campos3236 Před 10 měsíci +3

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

  • @alexanderm6187
    @alexanderm6187 Před 10 měsíci

    That's perfect, Jeff! Thank you for your work! 🙏🏻

  • @sunithkumar2632
    @sunithkumar2632 Před 10 měsíci

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

  • @shyamaghara
    @shyamaghara Před 10 měsíci +17

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

  • @nwekoder
    @nwekoder Před 10 měsíci +21

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

    • @ko-Daegu
      @ko-Daegu Před 10 měsíci +1

      true i know nothingof pwa

    • @Spomf
      @Spomf Před 10 měsíci +1

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

  • @doxologist
    @doxologist Před 10 měsíci +1

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

  • @yannick5099
    @yannick5099 Před 9 měsíci

    Really love these kind of compact videos.

  • @MegaRandomizor
    @MegaRandomizor Před 9 měsíci +11

    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.

  • @SteveLombardi58
    @SteveLombardi58 Před 10 měsíci +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 Před 2 měsíci

      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.

  • @ozten
    @ozten Před 8 měsíci

    You should do Svelte VS Solid next. Great video, thanks!

  • @LuisBlancoAustin
    @LuisBlancoAustin Před 10 měsíci +1

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

  • @fueledbycoffee583
    @fueledbycoffee583 Před 10 měsíci +8

    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

  • @DamonMedekMusic
    @DamonMedekMusic Před 10 měsíci +43

    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.

  • @mrwensveen
    @mrwensveen Před 9 měsíci +1

    Nice overview. I would like to have heard about the differences in programming styles/paradigms between the two. I feel React enables me to write functional-style code as much as possible with imperative code and side effects only in their designated areas. Maybe Svelte has some way to do the same?

  • @thomasandersen6025
    @thomasandersen6025 Před 9 měsíci

    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!

  • @ccgarciab
    @ccgarciab Před 10 měsíci +10

    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 Před 10 měsíci +1

      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 Před 9 měsíci

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

  • @krzysztofkwiatkowski8087
    @krzysztofkwiatkowski8087 Před 10 měsíci +2

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

  • @talhaibnemahmud
    @talhaibnemahmud Před 10 měsíci

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

  • @mikleta
    @mikleta Před 10 měsíci

    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 Před 9 měsíci

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

  • @fernandoarteaga9805
    @fernandoarteaga9805 Před 10 měsíci +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 Před 10 měsíci +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

    • @kennethdavila6261
      @kennethdavila6261 Před 10 měsíci +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 Před 10 měsíci +6

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

    • @theprovost
      @theprovost Před 10 měsíci

      IBM Carbon for Svelte is great !

  • @mikesantiago_
    @mikesantiago_ Před 10 měsíci +14

    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 Před 7 měsíci

      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.

  • @shateq
    @shateq Před 10 měsíci

    Was waitint long enough, thanks Jeff

  • @sebastianscarano9418
    @sebastianscarano9418 Před 5 měsíci +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

  • @johnrio
    @johnrio Před 10 měsíci +3

    Keep preaching the good word 🙏

  • @beinyourguard
    @beinyourguard Před 10 měsíci +41

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

    • @ko-Daegu
      @ko-Daegu Před 10 měsíci +2

      sveltekit got good eco-system too

    • @TheGargalon
      @TheGargalon Před 10 měsíci +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 Před 10 měsíci

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

    • @nomadtrails
      @nomadtrails Před 10 měsíci +4

      ​@@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 Před 10 měsíci

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

  • @viktorberczeli3009
    @viktorberczeli3009 Před 10 měsíci +2

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

  • @hnazmul
    @hnazmul Před 10 měsíci +2

    Feeling proud to be a svelte developer.

  • @i3looi2
    @i3looi2 Před 8 měsíci +8

    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.

  • @OwO-.
    @OwO-. Před 10 měsíci +15

    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

  • @Supafly6420
    @Supafly6420 Před 9 měsíci

    Love this intro!!!

  • @misaelpereira9679
    @misaelpereira9679 Před 10 měsíci

    Svelte is a clear winner here, no space for discussions

  • @kaosce
    @kaosce Před 10 měsíci +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

  • @artemstratienko4842
    @artemstratienko4842 Před 10 měsíci +3

    Thanks for your content, Jeff!

  • @Seanitzel
    @Seanitzel Před 10 měsíci

    Awesome!
    Would love a Svelte VS Vue now :D

  • @VKD007
    @VKD007 Před 10 měsíci +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.

  • @hanes2
    @hanes2 Před 10 měsíci +2

    We really need a Nuxt vs next , thanks

  • @armoredchimp
    @armoredchimp Před 10 měsíci +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.

  • @Callumkloos
    @Callumkloos Před 10 měsíci

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

  • @JackMCGamerAnimations
    @JackMCGamerAnimations Před 9 měsíci +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.

  • @maxijonson
    @maxijonson Před 10 měsíci +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

    • @lydianlights
      @lydianlights Před 10 měsíci +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 Před 10 měsíci +3

      @@lydianlights I couldn't agree more

    • @user-bd5nc2qk2u
      @user-bd5nc2qk2u Před 6 měsíci

      Bokeh

    • @baldcoder_
      @baldcoder_ Před 5 měsíci

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

  • @pankajsharma9801
    @pankajsharma9801 Před 10 měsíci +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.

  • @RusuTraianCristian
    @RusuTraianCristian Před 9 měsíci

    About the conditional logic section...in my previous job when using react, we were wrapping the code inside a function and simply call it in JSX. This made it from garbage looking code to extremely clean and...logic code. So..about that one, there are solutions. :)

  • @Derrickasaur
    @Derrickasaur Před 10 měsíci

    Worked with SvelteKit for many months on multiple projects, and created also a project called Svkeleton which Docker containerizes a ready-to-go SvelteKit installation with Tailwind JIT setup (because for a while in early SvelteKit days it was unstable and something as simple as getting Tailwind JIT working was a pain - I think the situation is better now). I love the convenience of all the features you shared, the syntax is decent too. My main gripe is that it its trying too hard to be a framework. When really the best part about JavaScript is modularity. It would be nice if they simply offered a set of 'Svelte modules apart of a DIY kit' that you can pick & choose from and compile/bundle in whatever chain alongside any number of other techniques you may already use to build sites with. For now I went back to closer to vanilla and am digging uhtml and his jsx2tag module which lets you write JSX without React.

  • @shapelessed
    @shapelessed Před 10 měsíci +6

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

  • @fatih.tavukcu
    @fatih.tavukcu Před 10 měsíci +36

    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 Před 10 měsíci +6

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

  • @MrVoju
    @MrVoju Před 10 měsíci

    Hi, great video and the Svelte course is really awesome. Do you consider adding a section to the course about error handling or monitoring? Like how to use Sentry with SvelteKit or how to display a 404 or 500 error page? Thank's for the grate content you create.

  • @underguysports_1359
    @underguysports_1359 Před 10 měsíci +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.

  • @semikolondev
    @semikolondev Před 10 měsíci +10

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

    • @theohallenius8882
      @theohallenius8882 Před 10 měsíci +9

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

    • @bluecup25
      @bluecup25 Před 10 měsíci +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 Před 10 měsíci

      @@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 Před 10 měsíci +2

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

  • @martinlesko1521
    @martinlesko1521 Před 10 měsíci +5

    Vue vs Svelte when ?

  • @indylawi5021
    @indylawi5021 Před 7 měsíci

    I like Svelte's approach.

  • @hamzahaddad4194
    @hamzahaddad4194 Před 10 měsíci +2

    It will be interesting to show limitations of svelte

  • @upsxace
    @upsxace Před 10 měsíci +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 Před 10 měsíci +1

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

    • @lydianlights
      @lydianlights Před 10 měsíci +1

      @@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 Před 10 měsíci +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 Před 10 měsíci +1

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

    • @lydianlights
      @lydianlights Před 10 měsíci +1

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

  • @NoFailer
    @NoFailer Před 10 měsíci +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 Před 10 měsíci +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 Před 10 měsíci +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 Před 10 měsíci

      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  Před 10 měsíci +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 Před 10 měsíci +2

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

  • @ankushagarwal7378
    @ankushagarwal7378 Před 10 měsíci

    Thank you bro for telling me about jotai.

  • @AnthonyDev
    @AnthonyDev Před 10 měsíci

    Excellent comparison, Svelte is great.

  • @irlshrek
    @irlshrek Před 10 měsíci +5

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

  • @sajawalhassan1f12
    @sajawalhassan1f12 Před 3 měsíci +4

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

  • @leocesar3599
    @leocesar3599 Před 10 měsíci

    Ok this video is gold, but now I need the exact same video, comparing React VS Vue, please!!

  • @nagarajansubramani
    @nagarajansubramani Před 10 měsíci +1

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

  • @memento728
    @memento728 Před 10 měsíci +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 Před 10 měsíci

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

    • @MrLOPIU22
      @MrLOPIU22 Před 10 měsíci +6

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

    • @stephengruzin
      @stephengruzin Před 10 měsíci

      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 Před 10 měsíci

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

  • @AlbertCloete
    @AlbertCloete Před 10 měsíci +25

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

    • @theohallenius8882
      @theohallenius8882 Před 10 měsíci +6

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

    • @quintencabo
      @quintencabo Před 10 měsíci +12

      @@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 Před 10 měsíci +11

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

    • @fueledbycoffee583
      @fueledbycoffee583 Před 10 měsíci +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 Před 10 měsíci +1

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

  • @bengoldstein3240
    @bengoldstein3240 Před 8 měsíci

    For your point on shared state: can you not use a React context for that? Out of the box functionality for exactly the problem you described

  • @raging666
    @raging666 Před 10 měsíci +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!

  • @Pictor13
    @Pictor13 Před 7 měsíci +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.

  • @theohallenius8882
    @theohallenius8882 Před 10 měsíci +25

    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.

  • @federicohoerth5101
    @federicohoerth5101 Před 9 měsíci +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.

  • @MightyKingKala
    @MightyKingKala Před 8 měsíci

    react still slaps everything and this video approves!

  • @bryson2662
    @bryson2662 Před 10 měsíci +5

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

  • @7heMech
    @7heMech Před 10 měsíci +3

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

  • @massimo6767
    @massimo6767 Před 9 měsíci

    "Hi dad" response mapped to the /heaven path... 💯

  • @stef4614
    @stef4614 Před 10 měsíci

    A video on the current state of front end tools in Python vs react and svelte would be interesting

  • @Chillycloth
    @Chillycloth Před 10 měsíci +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 Před 6 měsíci +2

      Why? What makes you say that?

  • @maxcohen13
    @maxcohen13 Před 10 měsíci +3

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

  • @GoWokeGoBroke1
    @GoWokeGoBroke1 Před 10 měsíci

    Thank you. Thanks to your video I now appreciate Vue even more

  • @kanways8
    @kanways8 Před 10 měsíci

    I started svelte 2 days ago it's fking easy and easy to learn. love it

  • @fernandoarteaga9805
    @fernandoarteaga9805 Před 10 měsíci +4

    How to destroy React in 10 steps 🤣😂