AJAX: Creating a Better User Experience

Good, usable, fast, responsive, easy products are a very important aspect of collaboration. The better the tools we use to collaborate, the more we'll use them. I don't think I have to provide a statistical connection to ease of use to actual use. That's why for today's blog, I'm copying an email circulated at Habanero...

It seems all that people are talking about these days is AJAX. It’s an important technology for a company like ours…here’s why:

First, what is it:

It stands for Asynchronous Javascript And XML. And it’s not really a NEW technology per se, it’s just a really interesting way of leveraging technologies that have been around the browser for quite a long time. It’s actually a combination of many technologies used in a particular way, including:

JavaScript
CSS
DOM
XMLHttpRequest

There have been AJAX applications in play since 1998 (wow!), the first known component to use HttpRequest was the Outlook Web Access team, who incorporated it into a very early version of OWA. Since 2005, however, the concepts have been getting a boom since major sites such as google (google maps, mail, etc.), Amazon and E-Bay have been incorporating the functionality into their web applications. The company Adaptive Path was credited with coining the name “AJAX” but the technologies have been around for a while. Habañero has actually used AJAX functionality in our applications before (but we didn’t call them AJAX at the time) so some of you may be familiar with the concepts.

Next, why is it important:

It’s important because AJAX type applications can create a very responsive, very usable, very rich web application. (Just to plug SharePoint, the next version of SharePoint is littered with AJAX - all improving current UE issues). It does have its drawbacks (see resources below), but you can bet we’re only at the beginning of a new era of rich applications.

Let’s explore just one use (a fun one). Visit Netflix here:
http://www.netflix.com/BrowseSelection?lnkctr=nmhbs

When you rollover a move, see the box pop up with some info about that movie and a rating? That information is not all loaded up when you visit the page…instead, it’s actually loaded when you mouse over the movie. All this is happening with a pretty seamless user experience (no page refresh, not slow, etc.). I’ve turned on IEWatch to analyze the HTTP request, and it’s actually pretty cool: when I mouse over, IE makes an additional request to the server for anything I haven’t yet requested (text, images, etc). If I rollover the SAME movie again, it doesn’t go to the server a second time, it uses the local cache for information.

What does it mean to Habañero?

We’ve got to continue to brush up or skills on DHTML, Javascript, CSS, DOM and the concepts around AJAX that can improve the applications we build. Also, we should continue to become familiar with the 3rd party tools available to create great AJAX applications. Designers will need to think of this interactivity when building user interfaces and possible start to understand the more technical nature of the web application designs we create.

Where can I get more info?

You can read adaptive paths description of the technology here:
http://www.adaptivepath.com/publications/essays/archives/000385.php

A general definition with some pro’s and con’s about the technology can be found here:
http://en.wikipedia.org/wiki/AJAX

Some great examples of AJAX applications can be found here:
http://en.wikipedia.org/wiki/AJAX#Examples_of_Ajax_applications

My favourite 3rd party .NET component vendor has a new callback control (which uses AJAX concepts) here:
http://www.telerik.com/r.a.d.controls/Callback/Examples/Demos/Accounts/DefaultCS.aspx

Comments

[Guy Peled]

I would like to introduce a new technology called Visual WebGui. Basically Visual WebGui is WinForms Over Web, which enables development of rich web applications with WinForms functionality and interactivity using Visual Studio's rich design, coding and debugging features. The technology extends the .NET object model to incorporate AJAX aware WinForms GUI components that are delivered to the browser via Visual WebGui's Empty Client approach.

See Visual WebGui in action
http://www.visualwebgui.com/Portals/0/Downloads/WebGui.Net.Videos.Explorer.Eng.avi

Codec if needed
http://www.techsmith.com/download/codecs.asp