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
  • Rooki@lemmy.world
    link
    fedilink
    arrow-up
    31
    arrow-down
    4
    ·
    1 year ago

    I dont get the third point. Its weirdly written.

    Imagine not using typescript. The python community gaslighting the js community. Imagine a big project website, and all in plain js, + multiple devs. Thats is going to be a mess. Never going back from TS.

    • fbmac@lemmy.fbmac.netOP
      link
      fedilink
      arrow-up
      6
      ·
      1 year ago

      About the third point, the performance of your JavaScript code can be worse if it’s broken down into several small files rather than a single, bundled file. When a browser encounters a script tag linking to an external JavaScript file, it makes an HTTP request to fetch that file. This process occurs for each separate file. Each HTTP request involves time for network latency, server processing, and data transfer.

      I’m usually preferring typescript too, but this point got me curious. I’m guessing it wasn’t an honest point, almost everywhere I look people are still using a build step, and I didn’t notice any move in a different direction

      • towerful@programming.dev
        link
        fedilink
        arrow-up
        12
        ·
        edit-2
        1 year ago

        Http/1.0 would require serial connections, and the “multiple files bad” absolutely applies. Bundling and minification into a single JS file was common, even required - and I would consider that a build step. Otherwise you are dealing with all your code in a single massive file.

        On http/1.1 browsers would open 6-8 concurrent connections to fetch files simultaneously. At this point, code splitting had benefits.

        Most webservers now run http/2 which can fetch multiple files at the same time over the same connection. I believe it is “virtually unlimited” and the initial connection setup - which is often the largest performance hit - only happens once. At which point code splitting has such little impact on the transport layer, that it is more perfomant than transferring and loading all the code.

        https://blog.vespa.ai/http2/ Has an more details as well as some load testing against http/1.0, http/1.1 and http/2

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

        There is also a limit to the number of files the browser can download in parallel, so if many files have to be fetched, they have to wait until the previous downloads are finished. This slows down performance even more

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

      The python community gaslighting the js community.

      As a Python developer, I am absolutely giving ya’all a hard time for your gross bolted-on JavaScript type solution. /s

      I do this primarily because I find it cathartic while I work with our gross bolted-on Python type solution. /s (mostly sarcasm, some truth here)

      I do this secondarily because I’m jealous that Typescript seems to be a good bit more mature than MyPy. (No sarcasm here. I really am jealous on this point.)

      • cgtjsiwy@programming.dev
        link
        fedilink
        arrow-up
        2
        ·
        1 year ago

        I recommend Pyright over Mypy if you don’t mind it being owned by Microsoft. It has far fewer bugs, and if you do stumble on one, you don’t have to fix it yourself because Microsoft’s paid devs will fix it in a couple of working days (at least for the small bugs I’ve reported).

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

        Yeah i programm a lot in python and typescript too. Even if i type something in python its still very weakly typed.

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

      If you want type safety and no build step you do like svelte did and use jsdoc instead. You can run the typescript type checker on those annotations so if you care about not having a build step you can still have type safety.

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

        That sounds like spending a lot of extra effort just to avoid a little up-front effort.

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

          How is it extra effort? It’s just a comment instead of inline types. It’s not like going from no types to types everywhere.

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

          That’s litterally less step. It’s just a comment above a function. How is that more steps?

          I mean, don’t get me wrong, I don’t mind build step but this is objectively less steps.

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

            In typescript you dont comment before there you see the variable name and that (should be enough) and the type is there…

  • kicksystem@lemmy.world
    link
    fedilink
    arrow-up
    14
    arrow-down
    1
    ·
    1 year ago

    The real answer to the question you didn’t ask is: just don’t involve yourself in internet drama’s.

    Tell me instead, what is the problem with a build step and typescript?

  • Swiggles@lemmy.blahaj.zone
    link
    fedilink
    arrow-up
    14
    arrow-down
    1
    ·
    1 year ago

    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.

    • jeffhykin@lemm.ee
      link
      fedilink
      arrow-up
      11
      arrow-down
      4
      ·
      edit-2
      1 year ago

      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.

      • Swiggles@lemmy.blahaj.zone
        link
        fedilink
        arrow-up
        8
        arrow-down
        2
        ·
        1 year 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.

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

          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.

          • Swiggles@lemmy.blahaj.zone
            link
            fedilink
            arrow-up
            1
            arrow-down
            3
            ·
            1 year 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.

            • jeffhykin@lemm.ee
              link
              fedilink
              arrow-up
              2
              ·
              edit-2
              11 months ago

              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.

              • Swiggles@lemmy.blahaj.zone
                link
                fedilink
                arrow-up
                1
                arrow-down
                1
                ·
                edit-2
                1 year 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.

      • Aloso@programming.dev
        link
        fedilink
        arrow-up
        5
        arrow-down
        1
        ·
        1 year 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)
    • foobaz@lemmy.world
      link
      fedilink
      arrow-up
      3
      ·
      1 year 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.

  • kevincox@lemmy.ml
    link
    fedilink
    arrow-up
    8
    ·
    1 year ago

    Yes. You can have reasonable load times using JS with no bundler. There are some notes though:

    1. JSX isn’t JavaScript, you will need to process these files (note: You can write React fairly reasonably without JSX).
    2. TypeScript won’t work because it isn’t JavaScript. I would only want to use raw JavaScript on the most basic of projects.
    3. A bundler/compressor is still going to reduce load times. Especially if you like lots of small files.
    4. Caching will be a nightmare if you aren’t doing version-based naming.
  • atheken@programming.dev
    link
    fedilink
    arrow-up
    6
    arrow-down
    1
    ·
    edit-2
    1 year ago

    Probably the more important question is whether DHH is your boss.

    It’s fine to look for people with real experience/opinions on the internet, but at the end of the day, you have to build your own product.

    I also am going to just say that I’m betting the kinds of stuff rails does in JS doesn’t really need a lot of complex JS. My guess is a lot of it paints on behavior similarly to what htmx does now, which doesn’t really require a ton of js code anymore. I don’t much see the point removing TS for the vast majority of projects.

  • Cyclohexane@lemmy.ml
    link
    fedilink
    arrow-up
    3
    ·
    1 year ago

    Isn’t Babel part of the build step? I might not be misunderstanding with what you mean by build step here.

    In general, you probably can’t avoid a bundler for the browser without significant compromises on performance and developer experience.

    • fbmac@lemmy.fbmac.netOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      I’m asking mostly out of curiosity, but I had a use case that I would like to completely avoid a build step. At work we have a very old web interface, that when I attempt to sell the idea of any major improvement the answer is “this is end of life, we are rewriting it”. But the rewrite will take a long time, and it is easier to make gradual improvements without introducing new tooling. This one is from the 90s, there the JS is in a folder and is shipped as is.

  • bradmoor@lemmy.nz
    link
    fedilink
    arrow-up
    2
    ·
    edit-2
    1 year ago

    It’s doable and although I would best describe the dev experience as “ok”, it is improving over time.

    Per your bullets

    • use newer module based js libraries, yes this is limiting but getting better support over time, and you still have to deal with issues cause by different library types when using a bundler

    • JSX will require a build step at some point, pushing that to runtime doesn’t improve anything. Instead I would favor lit html

    • probably true, but I would start without and wrap a bundler around the project when it becomes necessary, smaller projects will have a negligible effect. You should benchmark the differences yourself, and if you use es modules everywhere wrapping a bundler around it will be easy.

    With the above you can get all the usual niceties too: hot reloading, lazy loading, etc

  • JackbyDev@programming.dev
    link
    fedilink
    English
    arrow-up
    3
    arrow-down
    3
    ·
    1 year ago

    I don’t do front end work so I don’t know how all the terms are used. If by build step you mean any sort of CI process then I would say no, I think automated tests are important and should be ran before pushing.

    If you just mean some sort of transformation, transpilation, bundling, etc. then I don’t know enough to answer. My gut feeling is that the question is framed incorrectly. Many of these things were made as workarounds for various problems (or to make things easier). If you don’t have those problems then you don’t need those solutions. It doesn’t have anything to do with progress (as in what year it is). Originally JavaScript was just plain old JavaScript. If it worked then it can work now. If you need the solutions people have made to get around limitations and short comings and vanilla JavaScript can’t do it then you’ll still need those solutions.

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

      That’s a great point. In any sort of enterprise system, you should be unit-testing your front end when you commit, and you should be UI-testing your front end before you deploy. If you’re in a CI/CD pipeline, that normally happens right after the build step. If you need to have the pipeline running anyways, you might as well build.

  • onlinepersona@programming.dev
    link
    fedilink
    English
    arrow-up
    2
    arrow-down
    3
    ·
    1 year ago

    Does it still make sense to use javascript? I thought WASM would make JS obsolete and introduce web UI frameworks in other languages.

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

      WASM’s biggest holdback is that it cannot directly access the DOM. Until then, JS will still have a prominent place in building anything rendered in a browser.

        • jvisick@programming.dev
          link
          fedilink
          arrow-up
          2
          ·
          1 year ago

          It’s not a question of performance - it’s just the fact that you need to use JS to modify the DOM in WASM. Until there is access to the DOM from WASM, there simply will be a place for JS in nearly every web app and it’s not because it’s fast, it’s because there are still certain things just need to be done using JS.

          My point is really nothing to do with performance and I agree with the video you’ve linked: WASM is fast enough today. Whenever you can truly stop using JavaScript, I’ll be the first in line. You can already use WASM and eliminate huge portions of JS - but for anything beyond a very simple UI, you always end up with something that needs to be called in JS.

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

            I mean, I get what you’re saying but with rust all that js code is auto generated and you can make a full app without writing a single line of js yourself.

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

            but for anything beyond a very simple UI, you always end up with something that needs to be called in JS.

            Isn’t that why god made HTMX? Jokingly asked, but legitimate question - I don’t know much about WASM’s reach - and I can’t seem to watch that video on the train. Could HTMX (+/- hyperscript) take it from there?

            • jvisick@programming.dev
              link
              fedilink
              arrow-up
              2
              ·
              1 year ago

              You could do HTMX and WASM, but they both have the same problem in that they generally replace elements in the DOM as opposed to interacting with existing elements in the DOM, and most rendering on both HTMX and WASM actually happens through JavaScript calls.

              In either case you’re limited to only interact with the DOM at the level of abstraction that the framework provides through “behind the scenes” JavaScript calls which will always be a subset of the DOM manipulation that is possible by directly using JS. At least, until there’s a standard DOM access API for WASM.

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

                I keep trying to find a way to play with a web dev stack that doesn’t involve JavaScript, but I think that might be a pipe dream…