Show HN: Plain Vanilla – a tutorial website for vanilla web development

This site explains how to do web development without any tools or frameworks, relying only on the browser and web standards. I made it because I couldn’t find a single place online that put together all the right information in the way that I liked. The site itself is of course also vanilla and open sourced on github.

Show HN: Plain Vanilla – a tutorial website for vanilla web development
plainvanillaweb.com

I've actually been struggling with a problem related to this. First time page loads if you have a 2000loc JavaScript file + index + css + favicon requests nothing but those 4 resources, which is very quick on a keep-alive http 1.1 server.

I've written all of that from scratch because I got tired of maintaining node.js

But when splitting up the js file into pieces and using es6 modules, say 12 different files, Chrome makes 8 TCP connections on 8 different sockets, and each connection has its own TCP handshake (and TLS handshake for https). How do you bundle things without using a build system or a bundler? Import maps help, and it's not difficult to simply hash the page and copy the asset to a "dist/" folder with the hash appended, but it's still slow on first page load.

I'm not a web developer professionally (or network engineer), so I'm learning about web networking myself for the first time. It might be helpful to add a section about "traffic shaping"? I've smacked together a service worker that does the work of caching well-enough for now, but I'm definitely doing something rather strange and reinventing something. My page loaded significantly faster when it was just 1 JS file, no caching needed.

It's hard to bundle without a bundler, but...

It sounds like preloading modules would help your case a lot: https://web.dev/articles/modulepreload

The number of connections is a bit of a red herring here, the problem is (typically) that the browser loads one module which then tells it to load another module, and so on. Each round-trip is wasted time. Preloading gives the browser a flat list of all required dependencies right away. By the way, this applies to everything else: having all required resources declared at the top of the page makes things faster. You can even preload some less-obvious things like background images referenced by CSS files.

This might achieve the "bundling" you want, in the sense that all the preloaded resources can be multiplexed into a single connection. But again, the number of connections is almost nothing compared to the number of round-trips required.

Nice work, I haven't tried web components but support is better than I expected per caniuse[0]. This weirdly reminded me of a time 12 years ago[1] when I was encouraged to avoid using the term "vanilla" as it sounds like another framework

[0] https://caniuse.com/?search=web%20components [1] https://stackoverflow.com/a/11487293/691156

http://vanilla-js.com/ (the SSL certificate expired 15 years ago)

It is a framework, but just vanilla :)