Home Blog Why and How You Should Write Progressively Enhanced Idempotent (Stateless) JavaScript

As a user, there's nothing that annoys me more than a non-working website; as a developer, I noticed that most of these bugs happen in JavaScript.

Writing JavaScript is the trickiest part when programming a website. Your back-end is always going to run in the same environment, in a reproducible manner. However, with client side code, this could be run by many different platforms (browsers) which all have a different behavior. In addition to this, browsers come in different versions which implement different sets of features.

If you want to support the 2 latest versions of each browser, you end up having to test and write code for no less than 12 environments! (2 versions of Firefox, Chrome, Internet Explorer, Safari, Opera, Android's Browser.)

Add to this people who are still using very, very old Android phones, and you get a deadly cocktail for front-end engineers.

As a preamble, this blog post talks about simple JavaScript interactions which improve the user experience. We're not talking about single pages application. In these cases, you should use React.js if you want to go mainstream, Riot.js if you're worried about size, or Mercury if you like modularity.

In this blog post, we'll be talking about simple JavaScript interactions, very often written only using jQuery.

Also, this blog post assumes that you have basic knowledge of html, web accessibility and javascript.

Progressive Enhancement

Progressive enhancement is a feature that is very easy to implement, but never done. There are many myths about it though, like " I have to implement my logic twice", or "we don't have users without javascript.”

Some of these myths are partially true, some of them are totally irrelevant. The worst one is "we don't have to users without javascript." Some blind people actually use full-text browsers, without any javascript. Another thing, if your javascript breaks and crashes early, you end up with a page behaving the same way as if there were no javascript.

The thing is that progressive enhancement is very easy to do, but many front-end engineers just don't care about it.

In order to understand that, let me give you an example. This how many people write tabs: