React VS Svelte...10 Examples

Поделиться
HTML-код
  • Опубликовано: 25 дек 2024

Комментарии • 1,1 тыс.

  • @Xe054
    @Xe054 Год назад +3660

    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 Год назад +15

      I put it after 100 seconds video itself. 🙂

  • @ayndqy
    @ayndqy Год назад +1421

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

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 Год назад +15

      Still verbose and sometimes buggy

    • @irlshrek
      @irlshrek Год назад +69

      @@andreilucasgoncalves1416 can you elaborate?

    • @andreilucasgoncalves1416
      @andreilucasgoncalves1416 Год назад +29

      @@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 Год назад +833

    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 Год назад +46

      @@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 Год назад +63

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

  • @baka_baca
    @baka_baca Год назад +195

    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 5 месяцев назад +1

      As the saying goes, less is more!

  • @lwinklly
    @lwinklly Год назад +412

    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 Год назад +30

      ​@@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 Год назад +352

    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

  • @Martiansfromthemoon
    @Martiansfromthemoon Год назад +145

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

  • @AnirudhIsOnline
    @AnirudhIsOnline Год назад +69

    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 👍

  • @crazyravioli_4203
    @crazyravioli_4203 Год назад +382

    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.

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

  • @NotAllHeroesWearCapes-101
    @NotAllHeroesWearCapes-101 Год назад +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 Год назад

      That's great to know

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

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

  • @rubelexia
    @rubelexia Год назад +3

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

  • @nyashachiroro2531
    @nyashachiroro2531 Год назад +47

    More of these comparisons please 😊

  • @razmakaz8736
    @razmakaz8736 Год назад +437

    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.

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

  • @dosomething6975
    @dosomething6975 Год назад +7

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

  • @inDefEE
    @inDefEE Год назад +56

    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!

  • @Ataraxia_Atom
    @Ataraxia_Atom Год назад +7

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

  • @MegaRandomizor
    @MegaRandomizor Год назад +16

    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.

  • @a99g
    @a99g 4 месяца назад +1

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

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

  • @santanu29
    @santanu29 Год назад +1

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

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

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

  • @cheese-grater255
    @cheese-grater255 Год назад +47

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

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

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

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

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

  • @sunithkumar2632
    @sunithkumar2632 Год назад

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

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

  • @misaelpereira9679
    @misaelpereira9679 Год назад

    Svelte is a clear winner here, no space for discussions

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

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

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

  • @LuisBlancoAustin
    @LuisBlancoAustin Год назад +1

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

  • @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 10 месяцев назад

      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.

  • @darkimpressive3258
    @darkimpressive3258 4 месяца назад

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

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

  • @yannick5099
    @yannick5099 Год назад

    Really love these kind of compact videos.

  • @shyamaghara
    @shyamaghara Год назад +17

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

  • @harvanchik
    @harvanchik Год назад

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

  • @brunog.campos3236
    @brunog.campos3236 Год назад +3

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

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

  • @johnrio
    @johnrio Год назад +3

    Keep preaching the good word 🙏

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

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

  • @bevik12
    @bevik12 Год назад +2

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

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

  • @talhaibnemahmud
    @talhaibnemahmud Год назад

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

  • @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_ Год назад +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.

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

  • @krzysztofkwiatkowski8087
    @krzysztofkwiatkowski8087 Год назад +2

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

  • @MasterQuestMaster
    @MasterQuestMaster 8 месяцев назад +1

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

  • @hanes2
    @hanes2 Год назад +2

    We really need a Nuxt vs next , thanks

  • @Callumkloos
    @Callumkloos Год назад

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

  • @pomdevv
    @pomdevv Год назад +3

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

  • @BRP-Moto-Tips
    @BRP-Moto-Tips Год назад +1

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

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

  • @doxologist
    @doxologist Год назад +1

    This was great! I'm more keen to try out svelte 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.

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

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

  • @hnazmul
    @hnazmul Год назад +2

    Feeling proud to be a svelte developer.

  • @fatih.tavukcu
    @fatih.tavukcu Год назад +33

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

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

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

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

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

  • @MrBlaDiBla68
    @MrBlaDiBla68 6 месяцев назад

    Thank you, for this very informative video. It reinforces my opinion that these types of frameworks force you to implement a "horribly" complex and divergent way for implementing everyday use cases like: Managing *minimal* UI updates, conditional UI updates, UI hierarchies, accessing global variables (state management) and async operations. IMO these everyday tasks can be much better solved by a a strictly separated MVC approach. So *not* by trying to squash together the view and controller models.

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

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

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

  • @marksouzacosta
    @marksouzacosta Год назад +1

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

  • @semikolondev
    @semikolondev Год назад +10

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

    • @theohallenius8882
      @theohallenius8882 Год назад +11

      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 Год назад +1

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

  • @alexanderm6187
    @alexanderm6187 Год назад

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

  • @artemstratienko4842
    @artemstratienko4842 Год назад +3

    Thanks for your content, Jeff!

  • @ye-1723
    @ye-1723 5 месяцев назад

    gives angular vibes in term of templating stuff :) well, I hope it gets its deserved popularity too

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

  • @BrianKoudijs
    @BrianKoudijs Год назад

    Worked a lot in Svelte. Nowadays a lot in NextJS, but I've always loved Svelte.

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

  • @michaelpumo83
    @michaelpumo83 3 месяца назад +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.

  • @irlshrek
    @irlshrek Год назад +5

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

  • @Turnips
    @Turnips 29 дней назад

    After working with Angular as my first frontend framework coming out of school. Now that I'm working with Vue, I'm enjoying single file components and Composition API. Compared to Angular, I find it easier to work.
    Now I want to get into svelte because I've heard such good things about it. 👀

  • @martinlesko1521
    @martinlesko1521 Год назад +5

    Vue vs Svelte when ?

  • @ulisesavila2879
    @ulisesavila2879 5 месяцев назад

    Thanks for helping me to ditch react and angular.

  • @sajawalhassan1f12
    @sajawalhassan1f12 11 месяцев назад +5

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

  • @kanways8
    @kanways8 Год назад

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

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

  • @hamzahaddad4194
    @hamzahaddad4194 Год назад +2

    It will be interesting to show limitations of svelte

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

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

  • @eaglebirdiepar
    @eaglebirdiepar Год назад +78

    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?

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

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

  • @linyijiang9324
    @linyijiang9324 Год назад

    The fact I can use my beloved If and each is GOAT.

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

  • @AnthonyDev
    @AnthonyDev Год назад

    Excellent comparison, Svelte is great.