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
</blockquote>
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!
