1. 9
  1.  

  2. 3

    We started switching from react to svelte, recently, for some ligth projects and we’ve found it much better.

    • first, if you have some light experience with react or angular is very easy to pick up.
    • second it trims the fat and the boilerplate A LOT, and that feels great.
    • we found the team got really productive. We budgeted 100hours for the project and we got it done in 20ish.

    I don’t think it’s perfect, but for small apps as per OP, is definitely worth giving it a shot

    1. 2

      I still feel like I’m stuck in mid 201X regarding my frontend skills. To be honest I just don’t want to invest the amount of time it’ll take to get fluent in a “modern” stack, so some basic vue/react with bootstrap it is. And the moment you’ve started doing something for frontend, it’ll already feel like you’re outdated and behind (svelte)..

      1. 6

        Dude, don’t worry about it, that stack is 100% fine, and not outdated. Getting sucked into FOMO about JS frameworks and tooling is a total trap. If you’re not a full-time frontend engineer, use whatever gets the job done.

        Once you feel like learning something new would be a fun way to spend two weekends, go for it.

        Tailwind is awesome for example, but there’s not that much to it. It’s just some nice atomic utility classes, but that means you build all the component styling yourself (buttons, cards, …) instead of using the ready-made bootstrap abstraction.

        1. 2

          Wow didn’t fully read your comment and just now noticed we both mentioned tailwind! I’m so addicted to it!

          1. 3

            I agree, it somehow hits exactly the right level of abstraction. For me it nudges me into some possibilities I would never have tried with bootstrap or pure CSS.

            For example last year I had some really opinionated vision for a travel planner UI that would have been completely boring and bad with just prefabricated components: https://gllvr.com. I’m sure my implementation is still kind of rubbish for a lot of use cases, but I couldn’t even imagine doing it with bootstrap/bulma, etc.

            1. 3

              I really like the UI on that travel planner.

              I’m sure it has more to do with the way my background has warped my mind than with anything inherent to either approach, but I found it easier to build buttons/cards/etc with these utilities than I did to get the ready-made ones to look/work the way I wanted them to.

              I would have found it devilishly hard to get that striped component in your planner (where you click on the left side to type in where you’ll be sleeping or click on the right side to copy the previous night’s location) to be anything like what you made in bootstrap. I do suspect there are people out there who wouldn’t find it so, though.

              1. 2

                That’s a great UI!

                I agree, tailwind makes me more likely to experiment and try new things too.

                With bootstrap you’re too often locked in to how a certain component works, and it’s really hard to change the way components behave.

                It has given me a second wind with frontend stuff, and I’m actually enjoying making websites again!

          2. 3

            Vue, React, Angular, Svelte, and most frontend frameworks since React and Angular 2, are modern UI component frameworks. Once you understand components deeply, the learning curve for any of the others is much shorter. Svelte may be well designed and easier for beginners than most, but part of why people report picking it up in an afternoon is that they already understand components.

            The details differ between frameworks, especially with the direction React has gone with hooks, but despite the proliferation of frameworks in recent years, there’s been a substantial convergence on components since the days of Backbone, Angular 1, jQuery, Knockout, and all of the other not-quite-component frameworks. They may have been fewer in number back then, but the fundamentals varied widely across tools. The situation today is much more approachable despite the memes.

            1. 1

              I find react to be quite horrible if you want to use or do stuff that doesn’t exist for it as a lib. (Also don’t get me started on the amount of packages and reported CVEs in a hello world..)

              1. 1

                Really? I generally don’t use any React-specific libraries, and React itself I’m sure has few or no dependencies (I use Preact most of the time, so I’m not sure the state of React). Are you talking about create-react-app? I’ve never used it myself, it seems totally unnecessary.

            2. 2

              I’ve been using bootstrap for years, and I loved it but some things just didn’t feel quite right.

              I’ve recently switched to tailwindcss and it has made me so happy. Doing anything is just better and feels more fun. Also you don’t end up with loads of custom CSS.

              If you switch away from bootstrap I can almost guarantee your life will be better :)

              This is the post that finally changed my mind:

              https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

              EDIT: tailwind is really easy to learn if you’re worried about that. Also, the documentation is amazing

              1. 1

                That post, plus about 20 minutes with this tutorial persuaded me that I was interested in giving tailwind a real try.

                I found that having one workspace with two browsers tiled next to each other, one with my site and one with the tailwind docs, and a second with the code open, made it really fast and enjoyable to try things out. The search on the tailwind documentation is especially good, and the live updates that come with svelte running in dev mode are very snappy.

                It’s actually pretty high on my list to dig in and see just how those live updates work. There are a couple of spots in my own code where I could use a similar mechanism to very good effect, assuming it’s not leaning on some heavy mechanism that gets shaken out in the production builds.

              2. 2

                I was stuck with jinja + a little jquery for my front end. So state of the art 2008? It was starting to slow my ability to explore some ideas in a way I wanted to share. I don’t think I’d have been motivated to spend 30 hours exploring this for a couple of weeks if I had a good grasp of vue and bootstrap.

                The feedback from changing something on the server in dev mode to seeing it in the client is so much faster than it was when I was writing jinja templates and sending them in response to form submissions. That’s one of the major improvements of moving for me, and I think vue/react/bootstrap would’ve gotten me that also.

                This stack just lined up with my mental model a little better, which meant a lot as I was trying to learn a pile of “new” all at once. Tailwind’s utility structure combined with the way styles are scoped by default in svelte made it easier for me to think about my UI layout than it ever has been for web stuff.