How to not break the web
Nicolas Bevacqua urges us to stop breaking the web:
We are crushing the web. Dedicated client-side rendering sucks. Polyfills are used for all the wrong reasons. Those hideous-looking hash routers are bad and we should feel bad. We have been telling each other for years that progressive enhancement is great, and yet we’re doing very little about it!
He outlines a sensible strategy:
- HTML first, get meaningful markup to the human being as soon as possible
- Deliver some CSS, inline critical path CSS
- Defer below the fold images
- Defer font loading
- Never again rely on client-side rendering alone
- Prioritize content delivery
- Cache static assets
- Experiment with caching dynamic assets
- Cache database queries
- Cache all the things
which reads like a summary of his previous foray into optimizing the critical path.
Guillermo Rauch has a set of his own. His 7 Principles of Rich Web Applications:
- Server rendered pages are not optional
- Act immediately on user input
- React to data changes
- Control the data exchange with the server
- Don’t break history, enhance it
- Push code updates
- Predict behavior
The article’s conclusion nails it (emphasis mine):
The web remains one of the most versatile mediums [sic] for the transmission of information. As we continue to add more dynamism to our pages, we must ensure that we retain some of its great historical benefits while we incorporate new ones.
Pages interconnected by hyperlinks are a great building block for any type of application. Progressive loading of code, style and markup as the user navigates through them will ensure great performance without sacrificing interactivity.
Mike Bostock explains how to handle scroll to build interactive storytelling that responds to user actions in predictable ways and is mindful of all the ways the user can scroll a page: through the touchpad or scrollwheel, by pressing the arrow keys or by dragging the scroll thumb.
These all go well with my small recent epiphany. It’s worth periodically reminding yourself that HTML is by definition responsive, accessible and, in general, pretty damn well thought out and that if we want to reinvent any part of the web we ought to be respectful of all the thought and care that went into the default experience everyone gets when they fire up the browser.