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

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.

Answer 2

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 3

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 4

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)