Week 230 was posted by Charanjit Chana on 2022-03-21.
I've long been a champion of Progressive Enhancement as an approach for anything on the web, so no surprise that I was a huge fan of this tweet from Chris Heilmann:
👉🏼 “Progressive Enhancement, the New Hotness™” 🔗 https://t.co/QnGk5Wqp8W This is depressing. How many more times do we need to advocate the obvious?
View on twitter
Around a decade ago, it seemed like this approach was slowly fading away. The heavy lifting was moving towards the browser as we saw a clearer divide appear between the front-end and the back-end.
I personally blame whoever took JavaScript and thought it would make a good back-end. NodeJS is an awful solution in my mind. In some ways it accelerated the need for more scalable architecture for all sorts of languages but the whole NPM approach has never sat right with me.
A recent example that sits in my mind is being asked to look at a junior developer's project only to find that I had been sent 140MB for a single page web app that was little more than a glorified address book.
One hundred and forty. This was all down to dependencies that were inherited from following tutorials and instructions so it continues to make me wonder exactly what managing of packages is going on in the world of NPM?
What is progressive enhancement?
Back to the topic in hand, the article that Chris linked to has this to say:
Progressive enhancement means that you add functionality to the things you build in layers.
Pretty precise, although I come from a time where it was not uncommon for JavaScript to be disabled in the browser so my own definition would be:
Progressive enhancement means that you add richer and more dynamic functionality when as required if the browser can handle it.
I don't see why this should have changed at all in the past 10 years. Forget the second half of my sentiment. It doesn't matter if your browser has JavaScript available or not, what matters is speed. If you can render most of the page and serve that to your users and then hydrate your page with richer functionality, then the experience will feel faster. You also remove the unknown of what resources are available to the user.
From that same Go Make Things post:
Myth: PE is only for people who disable JS on purpose, and you shouldn’t do that.
JavaScript fails about 1 percent of the time. Most of those failures are not people deliberately turning it off (though there are valid reasons to do so). File errors cause JS failures. CDNs go down. Ad blockers flag a file incorrectly. Overzealous corporate firewalls block your file.
Forget sending chunks and chunks and chunks of JavaScript, just send the page in as complete a state as possible. CDN down? No problem, when a link is clicked you will just request a page from the server that will try to hydrate on page load.
For anything I build myself, I do what I can to take a Progressive Enhancement approach but it feels like a novelty on the web today. React and Vue seem to be dominant in the way we deliver single-page apps now.
If you choose to go all-in on a JavaScript framework, then do what you can to minimise it's footprint. The web already has an obesity crisis and there's no excuse for anyone to be making it worse.
In some ways, these frameworks have pushed the boundaries and forced JavaScript to evolve a lot faster than it was able to before. It's also nice to see that Progressive Enhancement is being talked about as the right approach rather than as if it's some out-of-date technique.
Sometimes feels like Tailwind, Bootstrap and other frameworks have are a similar 'threat' to CSS. I really enjoy building interfaces and most of all I enjoy writing pure CSS. It's not that it's hard to do or understand, there's just a lot of nuance and once you get your head around it's another area in which you can really reduce your footprint by only doing what you need to do.
Update
As if to highlight my distrust in NPM, take a look at what happened with the npm-ipc package recently for those that are identified as being based in Russia.
Tags: development, javascript, web