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
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.
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
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
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.)
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).
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.
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.
That sounds like spending a lot of extra effort just to avoid a little up-front effort.
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.
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.
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.
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.
- 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)
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?
Yes. You can have reasonable load times using JS with no bundler. There are some notes though:
- JSX isn’t JavaScript, you will need to process these files (note: You can write React fairly reasonably without JSX).
- TypeScript won’t work because it isn’t JavaScript. I would only want to use raw JavaScript on the most basic of projects.
- A bundler/compressor is still going to reduce load times. Especially if you like lots of small files.
- Caching will be a nightmare if you aren’t doing version-based naming.
Just use WASM
If only…
