Should your site work without JS?
Why Javascript as a dependency is just fine
A couple days ago my Twitter feed lit on fire with a debate around Progressive Enhancement and, specifically, whether websites should work without JS or not.
Today, I’d like to share with you a couple thoughts & ideas on the subject that have been around my mind for a while.
TL;DR: Javascript as a dependency is fine, and sometimes dropping support for non-JS users is a worthy trade-off.
What is Progressive Enhancement?
“Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience”
Lighthouse
A progressively enhanced website starts with a baseline of content and functionality, and then increases the richness and complexity of the user experience based on browser capabilities.
This approach is still relevant and useful today. I’m not here to convince you otherwise.
However, many developers seem to take this to the extreme of saying “any website should work without JS” (including complex web applications like Facebook). While many others seem to think we should drop Progressive Enhancement altogether and ignore those cases where Javascript fails and users are welcomed with nothing but a blank screen.
Turns out it’s not as simple as a binary choice.
Remember who you’re building for
I’m quoting myself here: “Pragmatism (not to be confused with plain bad code) should trump idealism every time. After all, we’re not building for ourselves, but for users & businesses.”
Unless you’re working on a personal project, every decision you make as a developer should be done with nothing but two things in mind: the users you’re building for & the business you’re building for. If making the site work without JS is not relevant for the target user base, then save that business time & resources by just not doing it.
“I’m a strong believer in progressive enhancement, but also that each phase of the enhancement needs a user.”
Jake Archibald
Accessibility
Just like Progressive Enhancement, a11y is often seen as an ethical decision as much as a technical one. And while building functional UI components with CSS only is fun, as an accessibility advocate, you may want to think about it twice: it is often impossible to build accessible UI components without Javascript.
Apart from labels and a few other simple code snippets, most ARIA-enhanced components need Javascript to properly reach Assistive Technologies (like Screen Readers). For example: HTML & CSS are not enough to provide proper keyboard functionality or communicate contracted/expanded states.
Separation of concerns
There is no point in replacing solid Javascript with CSS hacks. Specially considering there are cross-browser issues with CSS as well.
Using CSS instead of JS for handling logic & states is just as bad as using HTML’s <center> tag instead of CSS to center text. It’s not what the language was meant to do in the first place.
Separation of concerns is still a very valid principle today, and it perfectly fits this scenario.
Performance
Most content-based websites can still benefit from the “start with HTML, then progressively add CSS and Javascript” approach. After all, you should not need JS to make your small blog’s or marketing website’s content available to a browser.
However, web applications are a whole different story.
Models like offline-first and the app-shell architecture now give us the opportunity to build robust applications with realiably good performance. This is specially important for users with slow, unreliable and spotty internet connections (mostly in developing countries).
The only downside is that these models are often hard to “progressively enhance”, making it almost impossible to make core functionality available without Javascript. Yes, that would be ideal. No, it’s not always possible.
You are now faced with a choice: Either drop support for non-js users, or deliver a frustrating, sub-par experience for users with lie-wifi and slow network connections.
According to a study conducted by Yahoo! in 2010, 0.25% (Brazil) to 2% (USA) of people on the web have JavaScript disabled.
Akamai’s rankings for Q3 2015 show 16 countries with an average internet connection speed of less than 5mbps. That includes China, with an average of 3.7mbps, representing about 22% of the total internet population.
So while you should always consider your app’s target market first, it’s worth mentioning that if you ever decide to drop support for non-JS users for the sake of building a more performant and robust web application for those users with poor network connections, maybe the math is on your side.
Final Thoughts
- It’s not a binary choice. There’s no simple answer to this matter.
- Stay pragmatic. Remember every enhancement needs a user. If there is no user, there is no point.
- Don’t make Javascript more of a dependency than it needs to be, but don’t avoid it either. Javascript can be awesome for accessibility & performance.
