Mobile AJAX ?

Mostly for my own education I have been playing around with mobile ajax, ajah, ahah or what ever you like to call it. Many great articles are written about the topic and some frameworks are even emerging. But how, where, when to use it, what to do, what to don't ? I'll share what I have learned playing around with mobile Ajax wondering about just that.

First the boring part: All practical efforts prosper in the light of theory. I'll keep it short and just say that the book "Mobile Web 2.0" is a good read! You wont find any answers in there, but it gives you a good background on the current buzz-words. Further, the article here on mobiForge is a very good and thorough article! And lastly a Google gives you a good start. In addition to this, my personal opinion is that drag and drop, fading and other cool visual effects are not a part of mobile Ajax. Drag and drop is at best difficult on a mobile device which has no mouse connected. Fading, sliding shadows etc. are very cpu intensive and you can see your battery indicator decreasing.

Ajax is of course a revolution for mobile web sites. As I mentioned in a earlier blogpost Ajax is one of the tools one can use to reduce the data traffic, hence reducing the data cost for your customer which is know to be one of the main reasons people resist to use mobile internet. So in my opinion typical use cases for Ajax would be:

• situations where only parts of a page needs to be updated in general
• use ajax to speed things up, not to slow things down!
• form submissions
• show and hide stuff
• image slide shows
• Client side input validation
• etc.

The main thing here is to ONLY use Ajax where it makes sense. Use Ajax to overcome the limitations of the mobile channel. I'll now try to give you some ideas on how to use Ajax.

First, is the X in Ajax XML of XHTML? This simple page illustrates different ways of using Ajax, or the XMLHttpRequest object. The page offers three different options of populating a <div> with some data; just plain html (1), klient side looping and parsing an XML document (2) and simple DOM-parsing (3). Below is a timer that shows the client side execution time. As far as I have tested on different devices option (1) is the definite winner. Option (2) doesn't even work on most devices. Please share your experiences! The main thing I learned about this test is; do not use those fancy images of "loading indicators". These only slow things down. If you still want to use one, make sure it is preloaded.

An example of practical use is an RSS reader. Not a very advanced application, but shows how easy and effective Ajax can be. Taking it a step further, this simple mash up tries to show how easy Ajax can be used to build "application-like" pages with fragments updating automatically.

I'm not a javascript guru or anything, but I hope i have managed to give some of you some ideas on how to use Ajax. Its not that difficult. So, now the classical challenge of mobile internet; device capabilities. How should you determine support for Ajax on mobile phones? Unfortunately there is no Ajax-support=true or false out there. (if you know of any, please tell), so I suggest you start looking for Ajax support here:

• The HTTP header.
  if you find the mime types text/javascript, text/ecmascript or application/x-javascript in the accept header, your have a good start.
• UA-prof
  You can let your application check the User Agent Profile of the device. (you get the url from the http header) Check for the elements JavaScriptEnabled and JavaScriptVersion. JavaScriptVersion should be 1.5.
• Browser versions
  Webkit and NetFront 3.4 are examples of browsers with reasonable support.
• WURFL
  There are currently no information in WURFL regarding Ajax support.

With regards to mobile Ajax frame works my experience is that you'll save time if you make your own frame work. Frameworks like prototypejs and script.aculo.us are not worth even thinking about implementing on a average mobile phone. The FROST library seems good, but a bit too heavy for my taste. You don't need many lines of code to make a powerful application!

Another issue is that Ajax requires use of the <script> element in the markup. You might already know that this element is not a part of the xhtmlmp 1.0 definition. It is first introduced in 1.1 which is currently not yet officially released. So this means that your site with doctype reffering to xhtml-mobile10.dtd, which are common, will not validate.

Alast thing, that might seem obvious, is that the term "page view" looses its meaning. I an Ajax application one page view can consist of several Ajax requests. So when you look at your stats don't be puzzled if your page view count drop when introducing Ajax ;)

Well this post is too long already, so I'll sum up what I have learned about mobile Ajax at its current stage:

• Do not use the fancy "loading-image", it will only slow things down.
• Do not use xml and domparsing. Let the Ajax request return xhtml and use innerhtml. This means that the Ajax response might need some device adaptation as well depending on its function.
• Generally, Ajax is surprisingly well supported.
• Dont loop to much.
• Use Ajax only when fragments of the page needs to be updated.
• Ecma script can be used on the mobile phone without having anything to do with Ajax. Just have a look at the fancy top menu at mobil.tv2.no. Simple, yet great value!