The dream has come true. It’s now possible to build fast, modern web applications without transpiling or bundling either JavaScript or CSS. I’ve been working towards this personal nirvana ever since we begrudgingly started transpiling and bundling assets in the late 2000s. Browsers just weren’t good enough back then to avoid it. But they are now.
Here’s a chart of the 68 individual JavaScript files that we load in ONCE #1 via import maps. The waterfall is vertical. HTTP/2 ensures we scarcely pay any penalty for sending so many individual files, yet reap huge rewards with fine-grained cache expiration:
I know you have to be a real nerd to think this is pretty, but I think this is pretty. Because I know what’s behind it. I know that looking at any of those individual files via View Source reveals exactly the same source code that I see in my editor. It’s been a long time since JavaScript developers and designers could say that. Now it’s possible.
And yes, this is now true about CSS as well. Here’s the same chart for our CSS. Individual files, relying exclusively on standardized CSS available in the latest evergreen versions of Chrome, Safari, and Firefox:
And look at what that CSS actually looks like:
To people who haven’t seen modern, vanilla CSS, something like this might look like it’s from the future. Nesting?! Variables?! Yes. Yes. It’s good!
And if you run this application, and all these many, small individual files, against the test of PageSpeed Insights, you’ll get a perfect 100 on the performance measurement. Our browsers are finally good enough to natively deliver the performance and ergonomics needed. Incredible achievement by the teams at Apple and Google and Firefox:
Now, when some JavaScript people see arguments like this, it seems like their brain just turns into a red mush of rage. Like I’ve insulted their religion and all its holy prophets.
I don’t quite get it, but let me try to ameliorate it anyway: It’s OK to still use bundlers! I’ve been pretty excited about the progress brought forward with esbuild and bun. I think both projects are really cool, and if you’re working on one of those big, honking SPA apps with hundreds or thousands of NPM dependencies, and megabytes of JavaScript that needs to travel over the wire, you should take full advantage of these powerful tools.
All I’m demonstrating here is that it’s no longer necessary to live and work like this. You can choose something different. Hotwire is an alternative. #Nobuild is an alternative. Nobody is taking your favorite bundler away. TypeScript is still there for those who want that. IT’S ALL GOOD!
What I’m saying is that I’m just incredibly, over-the-moon pleased with the fact that I don’t need any of that stuff any more. That I can develop entirely against the superb runtime that’s shipped with every browser to handle JavaScript and CSS. I think that’s so cool! I think that’s part of what makes the web so special as a development platform.
I don’t even mind having had to travel a long way to get here. I did webpack, I’ve done esbuild, I’ve done all of it along the way. But I’m a firm believer that complexity ought to be a temporary price we pay for progress. The final destination, for me, has always been simplicity. And nothing is simpler than sending a plain-text JavaScript or CSS file straight to a browser and watch the magic play.
