15 votes

Why Svelte is our choice for a large web project in 2020

12 comments

  1. [6]
    ryanatkn
    Link
    Author here - I'd be happy to respond to any questions or feedback. Reddit has been a tough experience heh. Reposting what I said on Hacker News:

    Author here - I'd be happy to respond to any questions or feedback. Reddit has been a tough experience heh.

    Reposting what I said on Hacker News:

    This isn't written to hype a battle in the holy war. Frontend frameworks are a positive sum game! Svelte has no monopoly on the compiler paradigm either. Just like I think React is worth learning for the mental model it imparts, where UI is a (pure) function of state, I think the frontend framework-as-compiler paradigm is worth understanding. We're going to see a lot more of it because the tradeoffs are fantastic, to where it'll be a boring talking point before we know it.

    9 votes
    1. [5]
      skybrian
      Link Parent
      Nice writeup! I think many people have framework fatigue and aren't going to move quickly, but this looks like a good one. In the "aligns with the web platform" section, you might want to add a...

      Nice writeup! I think many people have framework fatigue and aren't going to move quickly, but this looks like a good one.

      In the "aligns with the web platform" section, you might want to add a link for further reading about animation; that sounds interesting. Also, the paragraph about concurrent mode is a bit unclear if considered as a standalone paragraph; I think you're saying that Svelte doesn't have any special concurrency mode? Is there something you can link to about how Svelte works with the event loop?

      One disadvantage of being a compiler might be incompatibility with other compilers. Typescript is one example of that, but maybe there others?

      4 votes
      1. ryanatkn
        (edited )
        Link Parent
        Followup - I added this paragraph about compiler incompatibility. Thank you for the feedback!

        Followup - I added this paragraph about compiler incompatibility. Thank you for the feedback!

        Many, many languages compile to JavaScript to target the web platform. Some languages are a natural fit with certain frameworks — for example ClojureScript and ReasonML have great React integrations. The Svelte compiler requires script tags to be JavaScript, so any language you want to use through preprocessors must satisfy that constraint, and integrating an unofficial language with Svelte’s markup (for e.g. typechecking) requires more specialized tooling. Svelte is written in TypeScript and work integrating it for users is in progress.

        5 votes
      2. [3]
        ryanatkn
        (edited )
        Link Parent
        Thanks! I added a link to framer/motion about how it bails out of React's rendering cycle. I tried to improve the latter concurrent mode section but I don't think I addressed the issue you're...

        Thanks!

        I added a link to framer/motion about how it bails out of React's rendering cycle.

        I tried to improve the latter concurrent mode section but I don't think I addressed the issue you're talking about. I'll revisit soon.

        That's a good point about compiler incompatibility. Some languages that compile to JS don't work with labels for example, like ReasonML, so we're unlikely to see them cross over with Svelte. Svelte will probably standardize on TypeScript and JavaScript and leave other experiments to the community. This is interesting to compare to React, which has great integrations with languages like ClojureScript and ReasonML. Vue doesn't have these though (in any reasonably popular capacity), so React's crossover adoption is owed to its functional philosophy not just its runtime nature.

        3 votes
        1. [2]
          skybrian
          Link Parent
          Yeah, on animation I meant explaining how Svelte approaches it. I already know why the React approach is awkward and I'm interested in alternatives. But I'm just kibitzing. If I were still doing...

          Yeah, on animation I meant explaining how Svelte approaches it. I already know why the React approach is awkward and I'm interested in alternatives.

          But I'm just kibitzing. If I were still doing web development, I would look into this myself.

          3 votes
          1. ryanatkn
            Link Parent
            I added this link to the text. Goes into more about how it uses CSS by default, but you can opt for JS. svelte.dev/tutorial/custom-css-transitions Thank you for the suggestion!

            I added this link to the text. Goes into more about how it uses CSS by default, but you can opt for JS. svelte.dev/tutorial/custom-css-transitions

            Thank you for the suggestion!

            4 votes
  2. [3]
    mat
    Link
    Meh, frameworks. Never used one I didn't end up hating, and I always run into issues where the designer(s) haven't considered the thing I want to do, or worse and has happened several times,...

    Meh, frameworks. Never used one I didn't end up hating, and I always run into issues where the designer(s) haven't considered the thing I want to do, or worse and has happened several times, actively wants to avoid exactly what my client wants to happen. Then there are bugs. I'd rather create and solve my own than run into other people's (I once ended up spending hours on LKML after tripping a freakin' kernel bug from inside Django).

    My experience has always been that it's easier and - over the course of a whole project - faster to just write my own code, and that goes double for large, complex projects. Also frameworks always come with a huge performance cost and I hate that. Burning cpu cycles just for my own convenience seems like a dreadful waste.

    Bear in mind that I am (a) Old and (b) quite a few years out of the web dev game.

    7 votes
    1. ThatFanficGuy
      Link Parent
      I'm neither of those, yet somehow, we're on the same page.

      Bear in mind that I am (a) Old and (b) quite a few years out of the web dev game.

      I'm neither of those, yet somehow, we're on the same page.

      8 votes
    2. ryanatkn
      (edited )
      Link Parent
      Svelte is more like an unframework. Its previous tagline was "the magically disappearing framework", and now they have the cheeky "cybernetically enhanced web apps". It's a compiler that turns...

      Svelte is more like an unframework. Its previous tagline was "the magically disappearing framework", and now they have the cheeky "cybernetically enhanced web apps".

      It's a compiler that turns your components into imperative code that performs similarly to hand-written vanilla JS, while also giving you all of the powerful affordances of a modern component framework. The tradeoffs of the compiler paradigm lead to great UX and DX both, while runtime frameworks tend to degrade the UX along multiple axes in service of the DX.

      Most websites have little to no interactivity and don't gain much from using components, but large state-heavy interactive apps like ours benefit hugely from composable reactivity.

      6 votes
  3. deciduous
    Link
    I was going over a few different frameworks for a new project at my job and I found svelte to be pretty great. While I ultimately went with something else due to many of the disadvantages listed...

    I was going over a few different frameworks for a new project at my job and I found svelte to be pretty great. While I ultimately went with something else due to many of the disadvantages listed here I'm super positive about it.

    There's a good chance that the frontend of my next personal project uses svelte since I found it a lot easier than React/Vue (both of which I like).

    6 votes
  4. rmgr
    Link
    I need to put together a data driven forms type application at some stage for work and I've been eyeing React/Redux for a little while. I've got plenty of time for research as it's sort of a V2 of...

    I need to put together a data driven forms type application at some stage for work and I've been eyeing React/Redux for a little while. I've got plenty of time for research as it's sort of a V2 of what we're working on now that I'm trying to get my head around pre-emptively (until now we've been kind of just making shit up and rolling our own after being locked in to ASP.NET Web Forms)

    This has given me something else to consider now!

    6 votes
  5. drannex
    Link
    Thanks for writing this post - helped collect my thoughts on a lot of areas that nowhere else would write on! Svelte seems like what I wanted Nunjucks to turn into for years!

    Thanks for writing this post - helped collect my thoughts on a lot of areas that nowhere else would write on!

    Svelte seems like what I wanted Nunjucks to turn into for years!

    2 votes