Software As She's Developed » Demos

Ajax Patterns Tutorial – Updated Docs

mahemoff — Wed, 24 May 2006 16:26:26 +0000

As just mentioned, I’ve posted code for the AjaxPatterns demos and the tutorial. You can run the tutorial here. The interesting thing here is it’s all designed to be hand-coded, so you can see how an Ajax app can easily be built up from first principles, good for learning. The final demo then uses an external library, to make the point that you don’t need to hand-code in the real world.

The Ajaxagram demo, with its various refactorings, is a useful way to introduce the patterns, and I covered it in Ajax Experience presentation. I’ve edited the overview page to help explain what value each refactoring is adding:

Ajaxagram: A Conventional Web App
No Ajax yet.

Ajaxifying Ajaxagram
Ajax version - runs in a single page without refresh. Basically the same user exeperience as before, but better for your resume and ready for the nice Ajax enhancements to come.

Enhancing Functionality and Usability
Now we’re actually seeing the benefits of Ajax. Three Functionality and Usability patterns are introduced to enhance the user experience – Live Search, Progress Indicator, One-Second Spotlight.

Streamlining Performance
Ooops, although it looks prettier and feels smoother, our app now has some technical issues. That’s a little side effect of most UI enhancements. Firstly, there’s a bug – if you type too quickly, you’ll see results for more than one search appear. Secondly, it’s too slow – we’re going back to the server every single keystroke. The Ajax patterns include Programming patterns to complement the Functionality and Usability patterns, and in this case, we remedy the situation with Submission Throttling.
Using An External Library
This final refactoring appears the same to users, but underneath the covers, we’ve introduced the ajaxCaller library to handle remoting. The point is to illustrate that Ajax Patterns don’t have to be hand-coded – many are easier to introduce with appropriate Ajax Frameworks and Libraries. There’s no shame in reusing reliable third-party code – it’s something to be proud of!

Ajax Patterns Code Now Available

mahemoff — Wed, 24 May 2006 15:33:06 +0000

All code for the Ajax Patterns demos is now available. This is the code used as examples for many of the patterns at AjaxPatterns.org, as well as the Pattern-Led Tutorial that forms Chapter 2 of the “Ajax Design Patterns” book to be published next month.

Download the code – ajaxdemos.zip.

Read the installation notes. Basically, you need PHP and Apache, and optionally MySQL is required for the wiki demos. The install should be pretty basic, as the notes indicate:

* Unzip the package to a temporary location and copy
  run/, tutorial/, and records/ to the apache document root.
  Assuming the doc root is /apache/document/root:

cp run tutorial records /apache/document/root.

(Alternatively, if you have sufficient access, set up a new virtual host in apache's httpd.conf and point it to the root of the unzipped directory, ajaxdemos/).

Ensure the server can write to (the initially empty) records/ directory. The easiest (though not the most secure) way is:

chmod 777 apache/document/root/records
Open up run/.htaccess and follow instructions there to set the library path.
Finished!

You might wonder why the server-side uses PHP, when I’m more of a Java+Ruby kind of guy. Realistically, the choice was Java versus PHP due to popularity. PHP was chosen because the code needs to be easy to install, and LAMP is a lot more ubiquitous and easier to work with than integrating Java+Tomcat+MySQL together. I understand Java is at least shipping with Debian at some point, but right now, there’s few things easier than getting a LAMP setup running, especially with all the one-click installers around (http://www.apachefriends.org/en/xampp.html).

From a development perspective, I also found PHP more productive for the experimental style of development that went into the Ajax demos. The usual drivers for Java – maintainability, security, etc. – weren’t a factor. PHP also has the sort-of-merit of being the Switzerland of server-side languages. Use Perl, Java, C#, or Rails, and you’re going to be flamed loudly from some contingent. But use PHP and most non-PHP coders will say something about it would have been nice if you’d used Java/etc but I can see your point and shrug their shoulders a bit. As it happens, only a few patterns (need to) delve into server-side details, so the only real impact of using PHP is if people want to hack the code or look further into the details of implementing a pattern.

New Ajax Demos

mahemoff — Fri, 16 Sep 2005 19:37:26 +0000

Further to the previous post on new Ajax programming patterns, it’s also worth noting there’s a new bunch of corresponding online Ajax demos too. Being programming patterns, they tend to be “pure refactorings” rather than enhancements, thus the user experience is mostly the same – you have to look under the covers to see what’s changed. The demos are mentioned in individual patterns, but here’s a sampling:

The wiki has a bunch of timeout-related refactorings. These refactorings are user-visible. (They’re not actually part of the programming patterns, but they were recently added.)
2 other wiki refactorings involve On-Demand Javascript . (No UI change.)
A JSON playground.
The Portal Drilldown Demo has been refactored to render with XSLT and browser templating tools. (No UI change.)
A couple of refactorings added to demonstrate REST (broken right now, probably due to a PHP config issue) and RPC on the Ajax Shop demo. (No UI change.)

As with all the demos, they’re tested on FF and IE6, please let me know if anything breaks.