Jake Archibald: Modern Progressive Enhancement

Jake Archibald was talking about progressive enhancement at Responsive Conf, these are my notes from his talk.

JS is a part of the web, it's not an optional extra.  Relying on it can improve things, as can not using it.  If you need browser support then make sure your site works without JS and use cutting the mustard to make sure that the enhanced version runs in newer browsers without problems.

Don't use JS to do things the browser can already do.  Browsers are fantastic at dealing with the conditions on the web but we replace it all with a huge JS download.  Use 3G as a baseline connection for testing - even 4G users will be on 3G most of the time.  Ask yourself did the load time reflect what the user can expect?

This decade's web apps are making the same mistakes that desktop apps did last decade.

Don't load an empty page - load a shell UI.  A splash screen is an admission of failure.  Go async - don't block the rendering.  Don't use web fonts for first rendering.  If your JS framework can't let you do this then drop it - it's not suitable.  Performance comes from a progressive loading style.  As long as the user doesn't care that things are loading in the background then load it in the background - don't penalise them for something they don't need.  You can push the full load time out if the interactive time is faster.

Watch out for LieFi, a connection that says it's enabled but isn't reliably transferring data.  Offline-first is progressive enhancement but for the network.  Service workers sit between your page and the network and include a programmatic cache.  Subsequent visits can be as good as instant.  We need to protect users from variable network conditions.

Coming soon will be service worker background sync - this will allow events to happen when a network connection comes back.

Service workers don't work in Safari at the moment but they are progressive enhancement friendly: start using, other browsers will support it and Apple will have to add it to stay competitive.

Render without JS then add in features.