What are strategies for AJAX apps to degrade gracefully when JS is turned off?

Question

What general guidelines should I follow to degrade a JS-based web application gracefully? Are there such guidelines? Are there any public pages that make for good / bad examples? Are there any common pitfalls?

Answer 1

Create your application using progressive enhancement rather than graceful degradation. That means that first you should make your application work properly without Javascript whatsoever (so, for instance, you'd need all your links to have corresponding actions on the server). Then once that's working, you can enhance your application by adding Javascript and AJAX on top of it.

This, obviously, applies to more than just AJAX calls, but to any Javascript at all. For instance, in one of my applications I wanted to provide the user with a way to choose a number from a range. To do so, I was going to create a slider widget using Javascript, so that the user can move the slider to the number they want. However, in order to have the page still work without Javascript, I started with a <select> containing all the possible values, and built my slider widget to start with / work on top of that <select>. That way, users with Javascript available/enabled would have a richer experience but users who don't would still be able to fully use the application.

Resources:

• Progressive Enhancement with JavaScript
• Graceful degradation versus progressive enhancement

Answer 2

The best stratergy is Progressive Enhancement whereby you create a website where all users can view all content, no matter what browser or disability they have. The then layer on top of this your css and javascript to create a richer experiance for those who are able to take advantage of it.

Always use server side validation. This way your forms still work in the way you intended and its harder for hackers to bypass validation steps.

Answer 3

Build a site which is functional without AJAX, using "web 1.0" techniques. Then, in the JS, enhance the same site to use AJAX. In short, this is a very abbreviated summary of Progessive Enhancement.

Here's a few pointers:

• Ensure clean seperation of concerns
  • HTML should be content-only and as clear and concise as possible
  • CSS should be used for all styling and design aspects (if a graphic is just eye-candy then it's presentation, not content)
  • JS should be for behaviors which enhance the experience, but aren't critical to it
• Put careful thought into how the client-side will interact with the server-side
  • Then implement your server-side logic to behave more as a service then a webpage (it will need to provide equivalent functionality to both the "1.0" and AJAX versions.

Your Javascript can then be used to do some extra leg-work:

• Prior to displaying the page it might do some markup-transformation (adding additional HTML markup to the content, where it's only required for the "eye-candy" / enhanced version)
• Disable/hide/remove elements which are not needed when working with the enhanced version. For example, some forms might be submitted automatically via AJAX--their Submit buttons aren't needed for the enhanced version, so they can be removed.

In the end you'll not only have a site which can run without JS, but a site which will be much more consumable by the huge variety of browsers out there today (mobile, e-readers, screen-readers, tablets, desktops, etc). You'll also have a baseline version of your site which meets the main concern of delivering content--and the ability to enhance it in other ways to target other platforms (you could write a mobile-enhanced version--or consume the same server-logic from a desktop-widget, etc)

Answer 4

source : https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.

Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

Answer 5

All links should point to real URL's which can be opened without JS support. After that, you can use JS to set onlick events for AJAX requests. And the same with forms and other things.