32
Are we ready for javascript without a build step on the front end in 2023? (lemmy.fbmac.net)
submitted 3 years ago by to c/programming@programming.dev
48 comments fedilink hide all child comments
 

On the current typescript / anti-typescript internet drama I saw someone mention javascript without a build step.

Do you think we're already there?

Last time I attempted it:

  • there were too many libraries I couldn't import
  • JSX (using babel) had a warning saying you shouldn't do it in the browser for production
  • there was some advice against not using a bundler, because several requests for different .js files is slower and bigger than a bundled package
you are viewing a single comment's thread
view the rest of the comments
[–] 13 points 3 years ago (9 children)

Why though? I think I am missing the point, but I don't see the problem with having a build step in your projects. Especially for frontend it is not just JavaScript, but things like Sass/SCSS to consider etc.

  • permalink
  • fedilink
  • source
  • hideshow 9 child comments
    •
  • [–] 7 points 3 years ago* (7 children)

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

    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 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.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 7 child comments
    •
  • [–] 6 points 3 years ago (5 children)

    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.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 5 child comments
    •
  • [–] 3 points 3 years ago* (last edited 3 years ago) (4 children)

    Sure, all I'm saying is every layer has major cost, and JS development has a lot of layers. Corporate websites can financially and time-wise afford that complexity cost when the benefits are scaled across millions of users.

    But its a problem when the first result of YouTube tutorials for a one page To-do app uses a pipeline as conceptually* deep as:

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

    I think OP is asking if it's possible for a good (no jQuery, no global varnames, etc) Todo app to work without needing all that.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 4 child comments
    •
  • [–] -2 points 3 years ago (3 children)

    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.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] 2 points 3 years ago* (last edited 2 years ago) (2 children)

    I would disagree.

    There's more to software than big corporate websites or massive FOSS projects. I've made tons of little one-html-file sites, like an inflation-adjusted income calculator, a scheduling app I've used every week for 4 years, a chemistry converter/calculator for a class I was in, even my resume site is just a single html file. Not only that but most of my published deno modules are nothing more than a main.js, a readme, and a gitignore (no package.json, no node_modules, no install step).

    You don't need tests, and a linter, and babel, and tree shaking, and JSX, and typescript, and souce maps just to make a resume site, or an infographic, or a one-off internal dashboard, or a simple blog, or a restraunt menu. Modern ES http imports and modern JS tooling is enough.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 0 points 3 years ago*

    None of the tools are really made for the most trivial use cases though. Although it doesn't take much effort to set everything up in a simple project I would probably also skip most of it. But this discussion about tiny one off projects is kinda pointless as you don't have many of the problems to solve anyway.

    I implemented a reddit frontend (kiosk mode) a while back using only vanilla JS for fun, because a previous implementation by someone else broke. There was not really a point though as it wasn't even simpler than using the proper tools. It was just for the hell of it, but nowhere close to a "real" project.

  • permalink
  • fedilink
  • source
  • parent
  • [–] 4 points 3 years 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)
  • permalink
  • fedilink
  • source
  • parent