plainvanillaweb.com
I disagree with your statement: "Don't use the plain vanilla approach until you've tried some of the popular web development frameworks and have learned why you might want to do without, and until you're confident on how to structure a codebase without the help of a framework."
I was writing vanilla javascript for years before I began using frameworks, so when I encounter a new one, I understand exactly what problem it's trying to solve. For any beginners, I personally recommend just building websites directly, without any framework assistance.
On balance I think it’s better to learn how to build with frameworks first to learn all the right concepts in the guiding structure that they provide, and only then to walk away from frameworks and have complete freedom by going vanilla. That’s why that paragraph is there. YMMV.
You don't have to use every feature out there. Getters that return 1 element that will never change. Splitting what should have been 1 style.css into 5 different files. Too many "best practices" for "complex" software.
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 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.
If you allow UDP connections in your firewall, it will upgrade to HTTP 3 automagically as well.
I highly recommend it
On HTTP 1 chrome will make 6 TCP connections to a host, and serialize requests one by one over those connections. This suffers from the waterfall effect, where you have to wait for the first 6 requests to complete, then the next batch, and so on. On lossy connections this can also lead to head of line blocking on each of those connections, where it has to wait for a packet of one file to arrive before it "frees up" the connection for the next request. On HTTP 1 bundling becomes necessary pretty quickly to guarantee good performance.
On HTTP 2 it will make 1 TCP connection to a host, and multiplex requests over those connections, so they may all download in intermixed chunks. This has less connection negotiation overhead, and it does not suffer from the waterfall effect to the same degree. However, it still has head of line blocking on lossy connections, and this is in fact made worse because there is only one connection so if it's blocked at TCP level on a single packet of a single file every request behind of that packet is blocked as well. I've done some tests and on reasonable quality connections there is not much overhead involved with requesting a hundred files instead of one file. The caveat is "on reasonable quality connections".
On HTTP 3 the QUIC protocol is based on UDP and therefore connectionless. There is no overhead for establishing connections or doing TLS handshakes, and no waterfall or head of line blocking. However, because of the connectionless protocol a lot of TCP concerns (like dealing with packet loss) become a concern of the HTTP layer, and this complicates implementation. The browsers already support it, but it is especially an issue at the web server level. This means it will take a while for this feature to roll out to servers everywhere. Once the web moves over to HTTP 3 the performance advantages of bundling should largely disappear.
A service worker and/or careful use of caching can be used as a workaround to lessen the impact of requesting many files over HTTP 1, but this adds implementation complexity in the application and a bug may cause clients to end up in a semi-permanently broken state.
But the browser evolves:
- Convenient and flexible browser APIs totally replaced jQuery
- HTTP2 HPACK, multiplexing and connection coalescing make SPA and bundlers unnecessary
- Web Component and Shadow DOMs helps you write modular HTML and CSS
etc etc
And developer needs to evolve, too! These frameworks make too many leaky abstractions that developers should think about. It turns out if they don't encounter problems at the beginning, they will meet them later with interest.
I was going to write a similar document, but thankfully you write it so well!
P.S. I'm also not against the framework to solve engineering problems like testing or CI/CD.
[0] https://caniuse.com/?search=web%20components [1] https://stackoverflow.com/a/11487293/691156
It is a framework, but just vanilla :)
A working version can be found here: https://hastebin.skyra.pw/xonoseruyi.ts
There is currently no documentation, but most of the function names are self explanatory.
I last did hands-on (professional) development back in the jquery era, but have amassed a certain degree of familiarity with modern frameworks by contracting / PM-ing various projects others chose to build with them.
To be honest, I'd no idea how far "vanilla" capabilities had progressed. My last couple of personal projects I built with jquery, because I still know it, a framework would be way overkill, and, you know, why the hell not? Your presentation has me excited to learn something new. Again, thanks.