Make it sparkle with Ajax

I get a lot of email from readers who are frustrated at the difficulty of implementing Ajax in their latest web application projects. Even sizable companies seem to be avoiding adding Ajax functionality for the time being, and when I speak to them about future developments they all claim they’re “looking into Ajax”, but not too much else is forthcoming. One of the reasons for this hesitancy is an apparent lack of good design and debugging tools for Ajax. As is often the case with newly emerging technologies, the development process can be slow and clumsy – let’s face it, even debugging JavaScript, which has been around for years, is still a non-trivial exercise. You’re often forced to resort to adding “alert” boxes that pop up to show variable values in an attempt to see why things aren’t working the way they should. One way to ease the development cycle is to use pre-built libraries of functions that you can call from your own code, the benefit being that the library code has often been optimised to work with all the browsers and most of the bugs have been ironed out. The drawback to using libraries is that they can be large and their code convoluted, which can lead to slower page-load times.

Another thing to ponder when considering using Ajax is just how and where it will benefit your users most in your web application – not all areas can benefit equally from Ajax, even though some can be transformed by a little thought and a few snippets of code. Most of us trawl the internet looking for help with such tasks, but I often find having a good book on the subject can help enormously. One such book I can recommend is Adding Ajax from O’Reilly, which covers the use of many of the Ajax libraries such as Prototype, Script.aculo.us, Rico, Dojo, jQuery, MochKit, YahooUI, mooTools and moo.fx, Sarissa and WZ_jsGraphics. The book also covers writing your own Ajax effects without the use of libraries, and it’s a very valuable aid to have by your side (or even to read on holiday while dreaming of the cool web application you’re going to build when you get back).

If you want to add some alternative Ajax functionality to your website, you couldn’t do much better than to look at all the samples at http://miniajax.com, which are really very good and generally easy to implement. It will certainly give you plenty of ideas, but please don’t make the mistake many people made with animated GIFs in the early days of the web and overdo it.

Spry and Spry again

One Ajax library that I haven’t mentioned yet (and nor does the O’Reilly book) is called Spry, from Adobe. The documentation is good and it isn’t too difficult to use this library, but it’s a case of adding code manually, or rather it was until now. The latest version of Dreamweaver, called CS3 in line with the other Adobe products, now has support for the Spry Framework among several other new features.

In fact, it’s worth taking a quick look at a couple of the new features in Dreamweaver, which for my money make this upgrade worth the cost. First, as just mentioned, is its support for Ajax in the form of the Spry Framework: to use these features, simply click on the Spry tool bar and a dialog opens into which you enter the details – and that’s about it, your first piece of Ajax!

So what features does the Spry Framework give you? First, there’s a simple collapsible panel that enables page content to be hidden and expanded again whenever the user clicks the panel’s top bar. This content is still on the page, so you’re not saving anything in page file size, but it’s an interesting way to cram a lot of content into a smaller area of the browser window. The Accordion object is a slightly more complex version of this component, which allows multiple collapsible areas.