Ajax: How to do it

Tuesday, 16 May 2006

Ajax and “Web 2.0” have been getting more and more exposure over the last year or so. It may not be quite the revolution it’s cracked up to be, but behind the hype there are useful techniques for building better applications. When people start asking you what you’re doing with Ajax/Web 2.0, you should have a good answer — so here are some thoughts on what you can do about Ajax.

Background

In an Ajax web application, the web page can communicate with the server and update parts of the page without a full page refresh. This results in a smoother and more responsive application. Since Ajax apps can update their view asynchronously, they need to alert the user when parts of the page change — they often do this using colour and animation. This yields more aesthetically pleasing applications. Apps using all these techniques are called Web 2.0 applications.

(Note that Web 2.0.1 is out now. And a Slashdot commentator eagerly awaits “Web 3.0, it’s when you can actually download all of the active content onto local storage and run it while disconnected as something they call ‘An Application’.”)

According to the original Ajax article, “Ajax” was originally an abbreviation of “asynchronous JavaScript + XML”, but it’s not that strict; it refers to architectural concepts rather than specific implementation technologies. So don’t write it in all caps — that’s as bad as writing “FAX” or even “SPAM”.

What you can do

Use Ajax applications. There are many useful Ajax applications like Gmail (especially chat), Flickr (photo management), Backpack (personal organiser) and Basecamp (project collaboration). There’s also Zimbra, which is a really impressive desktop-style email and collaboration application running in a browser. If you regularly use applications like this, it will raise your expectations of what a web apps should be. This can only improve the quality of the apps you build.

Consider Web 2.0 techniques when building your own web apps. As your clients see more Web 2.0 applications, they will expect your applications to be similarly responsive and beautiful. For example, see Google’s Personalized Home Page. This is how a portal should work. Drag and drop, instant updates — how easy is it to do this using IBM’s Websphere Portal Server?

Building Ajax apps

Most web applications use Ajax to make the application more responsive, rather than as an integral part of the app. (You could even imagine Google Maps or Google Suggest as non-Ajax applications — they’d be pretty boring, but would still work.) Therefore, many recommend that a web app should be designed and written without using Ajax at first. Once it works, then you can add Ajax goodness to improve the user experience, yet still be sure that the app will function on less capable JavaScript platforms. (There are a lot of these: older browsers, browsers with JavaScript turned off, mobile devices, WebTV…) This also reduces the temptation to include “neat” but useless Web 2.0 features.

There are so many libraries to help creating Ajax apps, the hardest part is choosing which ones to use. Then building a responsive, modern web app doesn’t take a huge amount of effort, but it will look great, especially in demos and proof of concept models.

Ajax. It’s not just for cleaning floors any more.

Technical notes

Adding Ajax to a completed web app can be done fairly easily (even if you’re not using Ruby on Rails). The widely-used Prototype JavaScript library makes client-side web page magic much easier, and includes some good basic Ajax classes. Other libraries that build on Prototype, such as Rico and Scriptaculous, add extra goodies like specialised Ajax components, drag and drop, and animation effects. (Ruby on Rails includes support for Prototype and Scriptaculous.)

There are lots of other libraries and frameworks around. Some of these (e.g. Sajax and AjaxAC) tightly integrate server and client, so you can call a server-side PHP method from JavaScript running on the client, or vice versa. These might be good for smaller apps. Others are fully-fledged JavaScript libraries. For example, Dojo seems to focus on its client-side event framework and UI widgets, but it also does Ajax, maths, crypto, data structures, and a neat client-side storage mechanism. Dojo’s event system enables fully-fledged aspect-oriented programming — it’s powerful and very useful for manipulating page events.

Then there’s the Mochikit library, which is pretty full-featured and — unusual for a free Ajax library — fully documented.

Prototype is very good and very popular, but it has potential compatibility issues. It does some of its magic by extending the JavaScript core, which can break other JavaScript code on the page. (Mochikit works around this, so you can use Mochikit and Prototype/Scriptaculous on the same page.)

Yahoo have jumped into Ajax in a big way too, and have released their Yahoo UI Library. It has the usual help for communications, events, DOM manipulation, drag and drop and so on, plus several nice UI widgets. Another useful feature is the CSS tools, which make it easier to ensure pages render exactly the same on all browsers — a neat idea. And there’s very good support and documentation too.

There are many other libraries/frameworks, many of promise to “make it easy to develop Ajax-style Web applications”. But the thing is, it’s already easy to do this — you don’t need a heavyweight framework. A JavaScript library to simplify client-side development is all you need. Probably the simplest is Moo.fx, an Ajax/effects library in 12kb.

In fact, the main thing I learned in my time looking at Ajax was that JavaScript is far more flexible and powerful that I ever thought. Prototype is a good example of what you can do. I remember working with JavaScript ten(!) years ago — it’s come a long way since then.

References

The original Ajax article from Adaptive Path: http://adaptivepath.com/publications/essays/archives/000385.php

Tags: , , ,

2 comments

You can leave a comment, or trackback from your own site.

Leave a comment