Comment on Are we ready for javascript without a build step on the front end in 2023?

Swiggles@lemmy.blahaj.zone ⁨9⁩ ⁨months⁩ ago

• jeffhykin@lemm.ee ⁨9⁩ ⁨months⁩ ago

  The hardest part of any software class in my experience is the triple combo of:

  • installation
  • "well it works on my machine" and
  • "well this code worked for last semester’s class"

  When there’s no build step, all the time is spent coding. None of it is spent configuring or setting up.

  When I have students start off editing one html file using pinned URL imports, the reliability is just insane. People might claim “installing typescript is reliable” but doesn’t even come close to the reliability of not having a build step at all. No build step Just Works™, no M1 Mac edgecases, no npm audit, no rm rf node_modules.

  source

  • Swiggles@lemmy.blahaj.zone ⁨9⁩ ⁨months⁩ ago

    You always have linter steps, testing etc and a competent developer should be able to deal with all that. Of course you don’t start with all this with new students, but I don’t think that is what this post is about.

    source

    • jeffhykin@lemm.ee ⁨9⁩ ⁨months⁩ ago

      Sure, all I’m saying is every layer has major cost, and JS development has a lot of layers. It’s a problem when new devs find a YouTube tutorial for a one page To-do app that uses a pipeline as deep as:

      • name resolution (node modules and unpinned versions)
      • compiling uncompiled dependencies
      • Vue/Sevlte to TS or JS + source maps
      • TSX to TS
      • TS + config options + feature flags to JS+source map
      • JS transpile CommonJS to ES imports
      • JS through babel for polyfills (and more source maps)
      • JS through tree shaking
      • JS through an uglifier (and more source maps)
      • combine JS into one file of JS (more source maps)
      • Hydration for SSR
      • Hot reloading dev server
      • then user can render

      I think OP is asking if it’s possible for a good Todo app to work without needing all that.

      source

      • Swiggles@lemmy.blahaj.zone ⁨9⁩ ⁨months⁩ ago

        And the simple answer is no. You can remove a layer here and there, but this is what the modern dev environment looks like.

        I mean sure you can implement all that yourself and carry all the extra cognitive load, but it is not productive to even skip babel or so. There is no point, but the challenge.

        Of course it is a bit more complicated to pick the right tools and you don’t have to use everything, but that’s a whole different discussion.

        source

        • -> View More Comments
  • aloso@programming.dev ⁨9⁩ ⁨months⁩ ago

    • Svelte/Vue/React components need to be compiled
    • JavaScript should be minified if the project has a significant size
    • File names should have a content hash, so they can be cashed in the browser
    • Even with HTTP/2, there’s still a case to be made for bundling hundreds or thousands of JS modules into a single file for better performance
    • Bundlers give you a dev server with live reload and hot module replacement for great developer experience
    • Setting up Vite is really easy and requires minimal configuration (compared to Webpack, for example)

    source
• foobaz@lemmy.world ⁨9⁩ ⁨months⁩ ago

  I switched from sass to tailwind a couple month ago and fucking love it. Highly recommend to give it try. Still requires a build step to trim out unused utility classes.

  source