These are live demos for the tutorials in Chapter 2 of Ajax Design Patterns (Michael Mahemoff, O'Reilly, 2006). More info on the patterns can be found in the book and at AjaxPatterns.org.
Display Morphing and the DOM in a Blink
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!
Over to you on the katas ... Mail me a URL to your efforts and I'll link it here.