Ask HN: What are the benefits of choosing Svelte over React?

4 points by RapperWhoMadeIt 2 years ago | 8 comments
  • montroser 2 years ago
    The two frameworks take completely different approaches to solving similar problems, so each comes with huge trade-offs compared with the other.

    In a sense, the Svelte framework runs at compile-time -- it takes your application source code, and uses its framework to produce a minimal JavaScript bundle that you ship to your end users.

    In contrast, the React framework runs at run-time -- you ship React along with your application to the end user, and they boot it all up and run it there.

    So, in terms of benefits, Svelte will be smaller and will likely run faster. As a bonus, it's much easier to learn.

    For downsides, Svelte can be harder to debug, and the community is smaller. But that said, React is a hot mess with so many ways to do all the things because all the existing ways are terrible and so then people make even more new ways again...

    • RapperWhoMadeIt 2 years ago
      Thanks a lot for the feedback. I am starting to get serious about learning the frontend side of things (coming from a backend/DevOps professional background). Especially the part of "React is a hot mess with so many ways to do all the things..." has made me prefer Svelte over React, and I really enjoy Svelte's idiomatic way of handling reactivity, I find it super intuitive. I guess I was just feeling insecure about putting so much time into Svelte, because I mostly only hear about people working with React.
      • montroser 2 years ago
        Yeah, at this moment there is a lot of momentum behind React, and so there are lots of jobs/opportunities out there.

        But just like jQuery had its time, and Angular, so too will React fade. And we will look back and think, "whoa that was crazy".

        Svelte's surface area is small enough and sane enough that I wouldn't feel bad investing there. You can just spend time getting stuff done instead of obsessing in React land about useEffect vs useCallback and nesting components 20 levels deep etc.

        If you want to keep the sanity of Svelte but go for a larger job market and community, Vue is also a pretty good option.

    • maiertech 2 years ago
      Developing with Svelte and SvelteKit feels like I am closer to standard Web APIs. Meaning I can learn lots of evergreen stuff that will not get outdated any time soon.
      • RapperWhoMadeIt 2 years ago
        Do you work with Svelte and SvelteKit professionally or primarily on side project? How do you deal with the breaking changes that have taking place within SvelteKit, i. e. SvelteKit still not being on a major stable version yet?
      • Glench 2 years ago
        Svelte has been a dream for me:

        * Styles are included so you don't need a whole other library for doing styling. Automatic component-scoped CSS is great. You can also include whatever your favorite compile-to-css language is.

        * It's faster than React because there's no virtual dom. I've run into performance issues a lot with React and not much with Svelte. Never used Solid though.

        * Less boilerplate. According to this talk, React components translated into Svelte components have around 40% fewer characters: https://www.youtube.com/watch?v=BzX4aTRPzno I've definitely noticed writing less code.

        * Less JS bloat!* The actual Svelte library gets compiled away so you don't need to include e.g. the entire React runtime. *(There _is_ a crossover point when you have many many Svelte components where the bundle size will be more because each components has self-contained duplicated code, but my understanding is that it's pretty high).

        * Use the HTML/CSS/JS/TS I already know. There's a little "magic" in the compiled reactivity system, but I've found it to be very minimal and easily understandable. I don't have to learn much to be very productive in Svelte.

        * The interactive documentation. It's stellar. VERY clear and I can change all the examples they give and play around with things to test my understanding. The REPL is also super useful when asking questions to other devs about Svelte: https://svelte.dev/repl/

        * Batteries included — Styles, animations, transitions, stores... all of these work really well together and I rarely have to go outside of Svelte itself.

        And SvelteKit is taking all this to the next level with making Svelte available throughout the full stack. Heck, I'm making a SaaS boilerplate built on top of SvelteKit because I love it so much: https://sveltesaas.com/

        Some drawbacks to Svelte:

        * It's not as popular as React so you're not as well supported when developing. Think Stack Overflow or other developers in your organization.

        * The reactivity system can be a little magic (for example you can't do array.push() to trigger a reactive update).

        * You have to learn the templating system instead of just using the JS you already know. A little unfortunate, but I honestly kind of like using templates better — I don't enjoy JSX at all. I found it only takes like a half hour to learn Svelte's templating anyway.

        • RapperWhoMadeIt 2 years ago
          Thanks a lot for the feedback! It helps to reinforce my decision to learn Svelte to see that other people see the same benefits as I do.

          I had a look at your blog, the article about your career transition into therapy was a very nice and insightful read!

          • Glench 2 years ago
            Glad you found my comment and article useful!