Unobtrusive Javascript -> a new paradigm in Javascript Programming Language

Current buzzword in the world of Javascript is unobtrusiveness. People who use it frequently make their website accessible, or they want to develop their project using Progressive Enhancement. Lets start by understading each term to make sense by being unobtrusive.

Accessibility in javascript means that as many people as possible will have access to the content or functionality of the page even if the Javascript implementation in their browsing device is lacking or nonexistent.

Progressive Enhacement, is a methodology for building web pages using graceful degradation model - the intent of making advanced content fail without breaking the rest of the website for less sophisticated browsers. In simple terms being unobtrusive is to segregate behavior from structure and presentation in a HTML document.



Following unobtrusiveness pattern the code stays clean, easier to read, and more maintainable.

You people might be thinking what sense or non-sense I am talking about. Lets try and understand it with the simplest example. Lets say we have to create an anchor tag, onclick of which a javascript will be fired to add an item. We are used to writing code like this:

• <a href="javascript:addItem();" mce_href="javascript:addItem();">Hit Me!</a> ----> WORST

If javascript is disabled nothing will happen.

• <a href="#" onclick="addItem();">Hit Me!</a> ---> JUST as bad

Using inline event handlers is not inherently inaccessible but the href attribute doesn’t lead anywhere so the end result is the same as in the first example.

• <a href="/add_item" onclick="addItem();">Hit Me!</a> --> BETTER

Now we have a real target for the anchor, so the link is already fully accessible assuming that the add_item URL provides the same functionality as the addItem Javascript function does. However, the code is still a mixture of behavior (javascript code) and structure (the HTML).

• <a href="/add_item" id="item_link">Hit Me!</a> + $(‘item_link’).click(function() { addItem();}); (when using Prototype) $('#item_link').click(function() {addItem()}); (when using jQuery) --> BEST

Now the HTML file takes care of the structure (just as it should), and the behavioral logic is separated into a separate Javascript file. This is both accessible and unobtrusive.

Welcome to the world of jQuery one of the most unobtrusive style of Javascript library. One would argue even Prototype is the same. But having used both I can figure out the difference. To list a few:

• jQuery has no IE memory leaks
  
• jQuery supports almost all browser I can call name of (many of the features of prototpe does not work in IE eg: inline-editing)
  
• Method chaining - all native jQuery method support chaining i.e. they return self. eg: $("div.fadeMeAndThenRemove").fadeOut().addClass("removed");

jQuery is being widely used -> Google, mozilla.org, wordpress.org, DELL, digg, NBC, drupal etc... are few names who have moved to using jQuery.

Enjoy being unobtrusive !!