AjaxPatterns Tutorial: Demos are Online

Here’s a heads-up on the tutorial to be included with “Ajax Design Patterns”. I’ll let you know when the tutorial text is available, but for now, the demos are running:

Demos for the AjaxPatterns Tutorial

The first half is a fairly standard intro to Ajax, using the Foundational Technologies patterns (Display Manipulation, Web Remoting, Dynamic Behaviour).

The second half is more interesting, as it documents the Ajaxification of Ajaxagram, an anagram finder (finds all combinations of a word, no dictionary used so as to keep the business logic simple). It begins as a conventional web app First, into a basic Ajax version. Then with a number of patterns progressively applied: first, Live Search, Progress Indicator, and One-Second Spotlight (Yellow Fade Technique) (about 3 lines, 8 lines, and 3 lines of code respectively). Followed by Submission Throttling. And finally, I want to state loudly that most of the patterns don’t have to be implemented by hand, thanks to the many great Ajax libraries and frameworks available. For that reason, the final refactoring is not about one particular pattern, but is instead about introducing a library. In this case, the AjaxPatterns library.

Following the Ajaxification, I’ll give some suggestions for further enhancements and refactorings. Some people like to learn by hacking an existing app rather than building it from scratch. Taking the code base established in the final version of Ajaxagram, it should be easy to play around with many of the Ajax patterns. For example, use an XML Message instead of the custom-format Plain-Text Message that’s used. Or try a different visual effect in place of the Yellow-Fade Technique.

One thing you’ll notice is there’s only five characters due to the exponential nature of anagrams. A nice refactoring would be to use a Virtual Workspace so the anagrams are loaded gradually.

Leave a Reply