dougherty distilled

Bryan Dougherty's thoughts on technology and software development.
in

AJAX Patterns

One of the discussions at MIX covered patterns to follow when developing with AJAX.  These patterns, or maybe better called conventions, can be divided into two groups: Foundational Patterns and User Experience Patterns.  Foundational patterns describe the structure of the code and resources used to develop AJAX.  User Experience Patterns, not surprisingly, improve the way a user interacts with the web site.

Some of the foundational pattern discussion was not new.  It's something I think we all try to do in our everyday development: separation and encapsulation.  Whenever possible, separating code from content is ideal.  For example, moving your custom javascript code into a separate js file can allow for content updates independent of code.  Taking it a step further, the inclusion of javascript and control over the placement of content can be encapsulated into a server control creating a single unit that can be reused.  I know this isn't rocket science, but in an enviroment where web tools change frequently and there are lots of options, it is nice to affirm the belief in building reusable pieces of functionality that abstract behavior from content. 

The patterns that are more interesting to talk about with AJAX relate to user experience though.  That's why we've got AJAX, right? AJAX exists to make it easier to build a user experience that is more intuitive, responseive and user friendly. The two points of interest we discussed related to history an user feedback.

With AJAX, you lose the postback and therefore lose the back button.  That might seem like a bad thing, but instead, it can be treated as an opportunity.  For example, if a user is filling out a form that adds an order, you probably don't want them to be able to go back to the form with the old values after they submit.  Let's think about another example, though.  You may show pictures of products that a user can click through with typical paging controls.  Making them slick with AJAX is cool, but you could make the behavior of the page even more natural by allowing the back and forward buttons to do what the user expects: navigate through the images they just saw.

A future release of the AJAX Control Toolkit (man is it difficult to track what is/will be available when) will most likely offer a history server control that exposes an API for managing web browser history.  This allows you to define logical views in your web site and decide exactly when to add history.  You can even structure these views such that they can be accessed via a URL for bookmarking/static linking ability.  For more info and the current source code for the control check out Nikhil's blog (http://www.nikhilk.net/BackButtonSupport.aspx).

Another pattern to follow relates to giving a user feedback about what they changed.  One way to do this is by using the UpdateAnimation control that current ships in the AJAX Control Toolkit.  A new way is using the prototype UpdateIndicator control that is targeted for a future release.  I don't think the code for the control is available yet, but I'll post an update if I find it.  The server side control allows you scroll to a changed field and momentarily higlighting the change.  Implementing this type of behavior significantly improves the user experience and further blurs the line between web apps and richer fat client application abilities.

For more info on AJAX patterns, check out the following sites:
http://ajaxpatterns.org
http://developer.yahoo.com/ypatterns/

Comments

No Comments

Leave a Comment

(required) 

(required) 

(optional)

(required)