• TheHarpyEagle@lemmy.world
    link
    fedilink
    arrow-up
    41
    ·
    edit-2
    1 year ago

    Honestly, as a mainly backend dev wanting to do more full stack, webdev is frustratingly intimidating. I keep trying to look up best practices but there’s so little in the way of consensus. “Use JQuery, no use Vue! React is better, but also React is clunky and bad. Write pure js, no don’t that’s a waste of time, at least use typescript.” It’s all such a mess and I spend so long trying to figure out what to use. I’m trying to just pick something and stick with it, but I keep worrying that I’m not doing things the best way.

    • 9point6@lemmy.world
      link
      fedilink
      arrow-up
      19
      arrow-down
      3
      ·
      edit-2
      1 year ago

      I’d agree with you if you were saying this about 8 years ago, but IMO the post-jQuery-front-end dust has settled and the “best” (in terms of what most organisations end up choosing) hasn’t really changed in a while.

      • Typescript unless you’ve got a really good reason not to.
      • React if you have anything remotely complex.
      • Webpack (or one of the wrappers) to bundle it up.

      Sure, someone may like a React alternative, and that’s completely fine. But at the end of the day, most companies are using React because it’s basically industry standard at this point, and it’s got too much momentum behind it for that to change any time soon.

      I’d say the back end is where all the choice is these days

      • Strawberry@lemmy.blahaj.zone
        link
        fedilink
        arrow-up
        2
        ·
        1 year ago

        We must be in different organization circles because almost every frontend I’ve seen at my jobs or those of my friends at other organizations uses Angular

        • Phen@lemmy.eco.br
          link
          fedilink
          arrow-up
          4
          ·
          1 year ago

          I’ll be honest, I think it’s been years since I last saw anyone even mention Angular anywhere.

      • fidodo@lemm.ee
        link
        fedilink
        arrow-up
        2
        ·
        edit-2
        1 year ago

        Maybe I’m just too used to it, but with next.js static site generation I find react to also work really well for simple sites too. If you’re not dealing with state, react is basically just functions that return templated html. IMO it’s pretty sleek for static websites since tsx let’s you do basic templating with functions.

    • Kuresov@programming.dev
      link
      fedilink
      arrow-up
      7
      ·
      1 year ago

      As a previously front-end gone full-stack gone and settled in backend/infra… don’t bother. But if you have to bother, or really, really want to 🙂, pick a relatively popular thing (e.g. Vue), and learn that, ignore the rest. By the time you come up for air the new hotness will have changed anyways, and the wheel will have been reinvented twice. It’s a moving target, just learn the fundamentals with something and you’ll be good to go.

    • AVengefulAxolotl@lemmy.world
      link
      fedilink
      arrow-up
      6
      ·
      1 year ago

      If you just want to try frontend, not trying to get a job there are these frameworks you should try:

      • Solidjs (love it so far) for a web application so SPA with separate backends
      • htmx to have a decently interactive website, it can be integrated with any webserver
      • astro for generating static sites

      And i think everyone should use either Typescript or JSDoc for any bigger application.

      • beeb@lemm.ee
        link
        fedilink
        arrow-up
        6
        ·
        1 year ago

        Svelte is a happy middle ground between vue/react and SolidJS which is maybe too bleeding edge still

        • AVengefulAxolotl@lemmy.world
          link
          fedilink
          arrow-up
          4
          ·
          1 year ago

          Agreed on the svelte part.

          But I think solidjs has a real chance of taking over React, because its similar, meaning JSX and hooks, but without the footguns. After using React, its so much cleaner and easier to work with, i cannot recommend it enough.

          • dubbel@discuss.tchncs.de
            link
            fedilink
            arrow-up
            2
            ·
            1 year ago

            Thanks for recommending it, it does look really nice. I’ll definitely check it out when a fitting project comes along.

    • aubertlone@lemmy.world
      link
      fedilink
      arrow-up
      5
      ·
      1 year ago

      For sure don’t use jquery.

      React is industry standard, but not my favorite. That being said, even my personal projects I do in react. I’m happy with my current role, but if I wanna switch down the line there’s less openings for a dev with mostly Svelte (my favorite framework) experience.

      • TheHarpyEagle@lemmy.world
        link
        fedilink
        arrow-up
        3
        ·
        1 year ago

        Right now I’m working on a personal project with Vue because it happened to be the one I was hearing most about when I started. I’ve got one project that I’m definitely gonna finish at some point started in react, so maybe I’ll try out svelte on my next project.

    • haruki@programming.dev
      link
      fedilink
      arrow-up
      4
      ·
      1 year ago

      Wait until you meet “Platform Engineering”/DevOps. The sheer amount of CNCF projects and new tools out on a daily basis are on par with the JavaScript world.

    • icesentry@programming.dev
      link
      fedilink
      arrow-up
      5
      arrow-down
      1
      ·
      1 year ago

      The main issue is that frontend is complicated and it can do a lot of very different things. Frameworks exist to solve some issues that may or may not exist in your project.

    • Strawberry@lemmy.blahaj.zone
      link
      fedilink
      arrow-up
      3
      ·
      1 year ago

      jQuery is obsolete and insufficient if you’re looking for an easy monolithic framework. Angular, React and Vue are all good (disclosure, I haven’t used react), just pick one and learn it well and you’ll have a good foot in the door. If you already know JavaScript and don’t want to learn typescript, Vue can be used with plain JavaScript.

      • o_d [he/him]@lemmygrad.ml
        link
        fedilink
        arrow-up
        4
        ·
        1 year ago

        I’ve used all 3 although, not very much Angular so I don’t have much to say on it. Vue is the easiest to learn imo. It bundles in routing and state management so you don’t have to worry about picking supporting libraries for this. It’s a pretty standard template style with lots of helpers and some magic going on behind the scenes. React is better if you want to write JavaScript. I prefer it for this reason.

        • fidodo@lemm.ee
          link
          fedilink
          arrow-up
          3
          ·
          1 year ago

          Curious if you’ve used next with react. React itself has a scope rendering design goal and leaves the rest of the app to the community, and next sets up all the stuff around it for you and I think they did a really great job with the defaults they close, and it’s still fully extendable.

          • o_d [he/him]@lemmygrad.ml
            link
            fedilink
            arrow-up
            1
            ·
            1 year ago

            Yup! Next is the most mature and complete framework for React. If I need SSR and/or SSG with hydration, it’s my go to for now. It adds some complexity, so it can be overkill if you don’t need these things. My experience working with it has been excellent.

            • fidodo@lemm.ee
              link
              fedilink
              arrow-up
              1
              ·
              1 year ago

              It can be overkill if you need something simple that doesn’t match next’s defaults, but if the default settings of next work for your use case I found the base project setup very simple to use.

        • SnowdenHeroOfOurTime@unilem.org
          link
          fedilink
          arrow-up
          2
          ·
          1 year ago

          Do you need to support 15 year old browsers? Practically all the jQuery features I used (which was a lot) are now available in standard js

          • fidodo@lemm.ee
            link
            fedilink
            arrow-up
            3
            ·
            1 year ago

            Even if you do, you can still use most modern js features with transpilation.

          • severien@lemmy.world
            link
            fedilink
            arrow-up
            1
            ·
            1 year ago

            Yes, the features are there. Just the API is still horrible.

            As an example, make a hidden element visible (extremely common imperative operation).

            jQuery:

            $("#element").show();
            

            Native JavaScript:

            document.getElementById("element").style.display = '';
            

            I hope you’d agree that the native JS is certainly not an example of good API.

            • SnowdenHeroOfOurTime@unilem.org
              link
              fedilink
              arrow-up
              3
              arrow-down
              1
              ·
              1 year ago

              That’s actually a great example of the shortcomings of jQuery. There are multiple ways to hide an element yet they standardized on one that often wouldn’t work.

              Also you’re using an ancient method getElementById… I think visuals should still be controlled with css. So what is the right way to do that in modern js? document.querySelector(‘.some-name’).classList.add(‘hidden’) with that class defined in the css, with whatever makes sense, including maybe a css transition.

              • severien@lemmy.world
                link
                fedilink
                arrow-up
                1
                ·
                edit-2
                1 year ago

                There are multiple ways to hide an element yet they standardized on one that often wouldn’t work.

                It’s the most common one. And it’s not like you can’t hide the element with some other mechanism with jQuery.

                Also you’re using an ancient method getElementById…

                And? What’s the difference from document.querySelector() when querying for ID?

                So what is the right way to do that in modern js?

                What is the right way is context dependent. I don’t see how having extra .hidden { display: none; } boilerplate is somehow modern or superior.

                • SnowdenHeroOfOurTime@unilem.org
                  link
                  fedilink
                  arrow-up
                  2
                  ·
                  edit-2
                  1 year ago

                  What’s the difference

                  Your code reads like it’s from 1992 mainly, which makes sense I guess, given that you still find jQuery better than modern vanilla js. jQuery was created as a way to account for browser support challenges but is now obsolete. Anyhow, if I read “getElementById” in recent js code I would assume something was weird about that code. It’s old hat and there is rarely a reason to use it.

                  What is the right way is context dependent

                  Precisely my point. Which is why I think it’s opinionated in a bad way to arbitrarily pick one of them as the defacto. I often had trouble with jQuery’s .hide() method because while it felt natural to use it, it often conflicted with what actually needed to happen for good UX.

                  What you’re missing is that the hidden class can contain anything you want. Animations or whatever else. In other words, the idea that there is a “right” or “most common” way to hide an element is flawed at its core.

                  • severien@lemmy.world
                    link
                    fedilink
                    arrow-up
                    1
                    arrow-down
                    2
                    ·
                    edit-2
                    1 year ago

                    Your code reads like it’s from 1992 mainly

                    Lol. You write a lot of text to mask the fact there’s no good reason why getElementById should be bad. It’s the same groupthink as with the jQuery, you’re told it’s bad, so you just follow the crowd.

                    jQuery was created as a way to account for browser support challenges

                    That was one of the reasons. The other was that DOM API was and still is crap. There were many such libraries to abstract away browser differences back in late 00s (Dojo, script.aculo.us, Prototype.js, MooTools), and the main reason jQuery “won” was that it provided the nicest API.

                    Which is why I think it’s opinionated in a bad way to arbitrarily pick one of them as the defacto.

                    You’re missing the fact that jQuery does not prevent you from hiding the element in other ways. It’s just optimizing for the most common case, which is one of the principles of good API.

                    What you’re missing is that the hidden class can contain anything you want. Animations or whatever else.

                    Sure, and when I just want to … hide it, without any animations? Then this hidden class is boilerplate only.

            • fidodo@lemm.ee
              link
              fedilink
              arrow-up
              2
              ·
              1 year ago

              Why would you not want to be using a rendering library? Your code is basically storing your application state in the dom which will turn into a horrible mess as soon as you reach any actual level of complexity. I know first hand. I’m traumatized from having to maintain large jquery code bases in the 00s. No serious professional writes code like this anymore.

              Also, your vanilla code isn’t modern. It should look more like this:

              document.querySelector("#element").classList.toggle("hidden")
              

              I could see not wanting to use a rendering library if you’re building a simple site on top of basic static HTML, but that’s not a serious discussion for industry professionals, and even still, jQuery is such a heavy dependency for saving some characters. If you find yourself using it so much you need the extra convenience then your site is already complicated enough that you should be using a rendering library with state management instead.

              • severien@lemmy.world
                link
                fedilink
                arrow-up
                1
                ·
                edit-2
                1 year ago

                Why would you not want to be using a rendering library?

                Because it’s just not very useful in some contexts. I’ve seen web extensions which mostly query the current page, and it doesn’t render much or even anything.

                Not all pages are SPAs either. Many apps are the old request-response with some dynamic behavior sprinkled on top. jQuery covers that well.

                This model is also quite compatible with the rising HTMX where the state/rendering is driven from backend and you just insert few dynamic pieces with JS.

                document.querySelector(“#element”).classList.toggle(“hidden”)

                There’s no difference between document.querySelector("#element") and document.getElementById("element"), they’re both same level clunky.

                Also, what you wrote is not functionally identical. $el.show() is idempotent, the el.toggle("hidden") is not (as the name suggests, it toggles a class). It also needs an extra boilerplate class.

                I could see not wanting to use a rendering library if you’re building a simple site on top of basic static HTML, but that’s not a serious discussion for industry professionals

                There are plenty of non-professionals doing web stuff and I think it’s great!

                jQuery is such a heavy dependency for saving some characters

                jQuery is 24 KiBs (minified, gzipped), that’s a good price for the egonomics it provides. If you’re constrained, there are API-compatible alternatives like cash which go down to 6KiBs.

    • fidodo@lemm.ee
      link
      fedilink
      arrow-up
      2
      ·
      1 year ago

      Best practices are pretty straight forward in the typescript community. Frankly I think all the serious professionals from the JavaScript community just went to TS so the people left over that didn’t migrate are well…