Mobile Ajax FAQ

This is a repost of the Mobile Ajax FAQ on Horizon Channel that Ajit, Bryan and myself have been working on during the last couple of weeks.

Introduction

The Mobile Ajax FAQ is created by Ajit Jaokar, Rocco Georgi and Bryan Rieger and is maintained at the Horizon Channel. We welcome comments and feedback at ajit.jaokar at futuretext.com.

What is Mobile Ajax?

Ajax is a browser technology that involves the use of existing web standards and technologies (XML/XHTML, DOM, CSS, JavaScript, XHR - XMLHttpRequest) to create more responsive web applications that reduce bandwidth usage by avoiding full page refreshes and providing a more ‘desktop application-like’ user experience. The term Ajax was coined by Jesse James Garrett in his seminal document at Adaptive Path.

Applications created by Ajax are generally classed in the category of Rich Internet Applications (RIA).

Mobile Ajax is the extension of Ajax principles to the Mobile environment, which includes other constrained devices such as gaming consoles or set-top boxes featuring web browsers. While technologically the same thing, Mobile Ajax is looked at as a special case of Ajax in general, as it deals with problems specific to the mobile space including theareas of constrained devices and constrained web browsers in general.

Is there a Mobile Ajax checklist/minimum requirements?

The mere existence of JavaScript in the browser is not enough. There has to be a clear distinction between JavaScript and Ajax support. There are many examples where a web browser might very well support JavaScript, but may still be incapable of using Ajax techniques.

At a minimum, the requirements for Mobile Ajax include:

  • JavaScript support
  • XMLHttpRequest object or equivalent ActiveX (for IE only)
  • DOM manipulation functions or innerHTML support (to display request results)

What does Mobile Ajax look like?

On one hand, Mobile Ajax will be transparent to the end user. For instance, all Nokia devices supporting the S60 and Opera browsers support Ajax - but that makes little difference to the end user. On the other hand, Widgets are enabled by Mobile Ajax (see below). Thus, the visual (end user) manifestation of Mobile Ajax may be in the form of Widgets or rich browser based applications such as we see on new Nokia phones or Opera browsers.

Why should one do Ajax on mobile phones / what problem does it solve?

The reasons to use Ajax are the same as those to use it on the desktop:

  • Better user experience without having to resort to proprietary runtime technologies.
  • Less data/bandwidth being consumed sending redundant wrapper code (page layout).
  • Using open standard web technologies you are already familiar with means less training and a faster time to market.
  • Creation of simple, applications via Widgets

What are the options to Mobile Ajax?

In general almost any programming language and runtime (or virtual machine) can be used to achieve results comparable to those of Mobile Ajax techniques. The list of alternatives varies with the focus shifting to different features like cross platform capability, open standards usage, development efforts, cost, and deployment methods etc depending on the vendor.

The following is a list of current alternatives to Mobile Ajax.

Java ME (J2ME)

By far currently the most ubiquitous runtime available for mobile devices, but also the most fragmented in terms of feature and specification support between vendors and devices. Things are improving as many OEM vendors are investing heavily into making the Java ‘write-once-run-anywhere’ dream on devices a possible future reality. The recent decision by Sun to open source Java may result in more capable and compatible versions down the road, and initiatives such as OpenLaszlo + Sun’s ‘Project Orbit’, or JavaFx may enable developers more familiar with web technologies (rather than mobile Java development)to deploy directly to Java enabled devices in the future.

Flash Lite

Flash Lite is Adobe’s ubiquitous runtime for the SWF format specifically designed for use on resource constrained devices. While Flash may be installed on nearly all desktop and laptop computers today, it is currently only available on a small number of mobile devices - namely higher-end smartphones and PDAs.

Early releases of Flash Lite supported a very limited version of ActionScript http://www.actionscript.org/ which proved frustrating to many developers. More recent releases are closely following the versions of Flash and ActionScript which are found in widespread use today on the Internet, this in-turn is expected to increase developer interest in the use of the Flash Platform on devices.

How do Flash Lite and Java compare with Mobile Ajax?

Java often requires code variations for different devices and vendors - not to mention variations in the Java implementation itself (MIDP 1, 2, CLDC). These variations often allow Java applications to better take advantage of device hardware such as cameras, Bluetooth and 3D graphics, but they fragment the implementation.

Flash doesn’t typically require variations in code like Java - but may require variations in visual layout to provide an optimal user experience on varying devices. Newer versions of Flash Lite are working to minimize the additional visual layout work often required for varied screen sizes.

Mobile Ajax applications should work with the same code across varying devices and through the use of cascading style sheets (CSS) the visual layout should adapt as required on a wide variety of devices. However, see limitations/hurdles of Mobile Ajax below.

Some browsers (Nokia S60) are expected to have plug-in support for Flash Lite in future releases. If such scenarios occur Flash Lite could be used to complement Mobile Ajax applications in much the same way Flash and Ajax are often used together on the desktop web.

What is the difference between Ajax Platforms, Frameworks, Toolkits and Libraries?

Ajax platforms, such as the Opera Platform or NetFront’s Embedded Ajax, when installed on the device, make it easy to develop applications and widgets using standard web technologies - including Ajax.

There’s however a big difference between platforms on one hand and frameworks, toolkits or libraries on the other. While the latter are usually loaded along with the web application itself into the browser each time, i.e. in the form of an external JavaScript file, platforms are typically installed once on the device itself and then loaded as required by the applications run on top of it. For example, Opera Platform widgets require the Opera Platform while Nokia Widgets require the S60 platform.

What existing Mobile Ajax frameworks, toolkits and libraries should I use?

Currently there are no specific Mobile Ajax frameworks, toolkits or libraries.

All that is required for Ajax on mobile devices is support for:

  • HTML
  • JavaScript
  • XHR - XMLHttpRequest
  • DOM - Document Object Model or at least innerHTML support

One library, specifically aimed at providing an abstraction for Ajax functions for constrained web browsers is currently under development by PavingWays. The library called “Frost” is an open source project and will be released under a MIT license in mid-2007.

Can I use existing frameworks, libraries and toolkits?

Some existing frameworks, libraries and toolkits may indeed work on some mobile browsers. Generally however, these libraries require too much memory and implement features that may simply never be used on a mobile device (ie: drag + drop).

With increasing mobile browser capabilities this will become less of an issue as browser vendors are already aiming to make their next generation browsers work with these toolkits - however, the overhead is still there. It can be assumed that some of these frameworks will release mobile versions, so it’s more a question of when we’ll begin to see mobile specific browser support within these libraries and toolkits.

What is the relationship between Mobile Ajax and Mobile Widgets?

In its entirety, Ajax comprises of XMLHttpRequest + DOM Scripting + XHTML/CSS. Functionally, two things are happening here: Data is being fetched asynchronously and the information thus fetched is being rendered on the client through JavaScript.

Most widget engines are using the asynchronous part uniformly but are making their own changes to the rendering (display) part. While this leads to fragmentation of widget technology, the fact still remains that Ajax i.e. Asynchronous I/O and visual rendering are the core technologies underpinning widgets.

When it comes to the mobile environment, we are seeing the same phenomenon i.e. we see Mobile Widgets powered by Mobile Ajax and also some fragmentation. Also, it should be noted that we are seeing the first attempts at standardization of widgets from the W3C (http://www.w3.org/TR/widgets-reqs/).

Which browsers support Mobile Ajax?

This is the list of currently known mobile browsers supporting Ajax, which means they feature the XMLHttpRequest or an equivalent ActiveX (as in the case for IE Mobile). Some of these browsers currently exist and are widely used, others are in development and are not yet available.

  • Opera Mobile (>= 8.x, not Opera Mini)
  • IE Mobile (WM 5.0/2003)
  • S60 3rd ed. (WebKit/KHTML core)
  • Minimo (Mozilla based)
  • OpenWave (>=Mercury)
  • NetFront (>=3.4)
  • Safari Mobile (iPhone)

It should be noted that support for the XMLHttpRequest object or ActiveX is usually not enough to fulfil Ajax tasks. The browser needs to support JavaScript to a level that it can manipulate and display the retrieved data. via the DOM, although innerHTML support can be enough in many cases. CSS support is also a rather important feature, e.g. to hide some content areas and show other ones.

There are also other devices than phones featuring web browsers to look at, for example gaming consoles, such as the Nintendo DS and Wii or Sony‘s PSP or PlayStation 3. These devices, partly mobile - partly fixed, feature web browsers (Opera for Nintendo, NetFront for Sony) that are comparable to those found on mobile devices like cell phones. Some of these constrained browsers support Ajax (for instance, Opera browsers in Tranzas set top boxes). Another significant similarity is that these devices also feature very constrained input methods, sometimes less than on cell phones, e.g. 4 buttons and a 4 way directional pad on the PSP.

Which enterprise applications employ Mobile Ajax?

SoonR (www.soonr.com) is one of the early pioneers of Mobile Ajax and seems to always be the preferred example. The SoonR application is primarily concerned with access to files on the desktop from a mobile device. It mainly supports Opera Mobile and S60 3rd edition for Ajax functionality, but there also is a basic version for other browsers without Ajax. Enterprise applications offer an opportunity for Mobile Ajax because they provide a rich browser based experience on a Mobile device and at the same time, are not constrained by the need to access device APIs (for instance Phone book APIs on a phone)

What is the role of the Apple iPhone with respect to Mobile Ajax?

While this is speculative since enough details of the iPhone are not known, Apple has said that the iPhone will not include Java and may include Flash. It is very likely that the web browser of the iPhone will support Ajax. If that happens, then widgets could play a major role on the iPhone with Mobile Ajax as one of their enabling technologies. If so, it would help the uptake of Mobile Ajax post launch of the iPhone.

How do applications like mojax or bling software fit in?

Mojax and Bling Software are examples of applications that use Mobile Ajax with Java as a middleware. Ajax makes a great presentation layer, but isn’t ideally suited for working with device level APIs (Bluetooth, camera, XML, etc.) where technologies such as J2ME/BREW/C++ are already being used extensively. Thus, it is possible to use the combined strengths of each technology (J2ME + Ajax ) to create the best experience possible.

While not leveraging open standards exclusively, these applications can very well make sense and they show that Ajax technology is a major building block in application development - either based on the web browser or on a Java/C++ application.

In fact, Sun itself is taking a similar approach with its’ Java FX technology (http://java.sun.com/javafx/).

How can you develop for and test on all those browsers?

Much in the same way you develop for the web today: use web standards, then find a good reference browser (Opera Mobile, Nokia s60, Internet Explorer Mobile, etc.) and use it constantly throughout development. To maximize compatibility, plan to build a normal mobile website (without Ajax) and progressively enhance it with Ajax as required.Test the site or application on basic phones (WAP 2.0 - XHTML-MP - no DOM/XHR) to be sure it works for existing non-Ajax capable browsers.

What are the (current) hurdles in implementing and running Mobile Ajax applications?

The biggest obstacle is the same as on the desktop: browser support. With more browsers than on the desktop and bigger differences in their support for web standards and technologies required by Ajax this poses a real problem and has kept many developers from going any further than initial tests.

Another technical problem is HTTP latency. Loading only parts of the website in a mobile web application can take as long as loading the whole page (still traffic and rendering time in the browser will be smaller). This varies from one connection type to the other and can also be influenced by the carrier’s implementation of their proxy.

Also power consumption and battery drainage of Ajax applications can be an issue. If an Ajax application constantly connects to a web resource, e.g. to check for new data, this will not only drain the phone’s battery heavily, but may also incur expensive data fees for some users. So Ajax functionality has to be applied in a responsible and meaningful way, especially in applications running on mobile devices.

Mobile Ajax and Mobile Widgets, while showing a lot of promise, are still currently geared towards simple tasks and applications.

What is AHAH / AJAH?

The desktop computer has much more memory and CPU power as well as different means to input data into the application. Mobile AJAX has to work on resource constrained devices and browsers, so typically most desktop Ajax libraries cannot be used on mobile browsers. Instead of sending and manipulating raw XML on constrained devices, it makes a lot of sense to leave the manipulation of XML to the server and sending only XHTML to the client.

This technique, while very similar to AJAX is often called AHAH - Asynchronous HTML and HTTP - or AJAH - (HTML instead of XML). Fundamentally both methods do not transport XML, but pre-rendered HTML or XHTML and avoid having to process XML data on the client itself - which can be a very battery and CPU intensive operation.

Is there any standardization initiative for Ajax?

While not a standards body, the Open Ajax Alliance is bringing different players in the industry together (and this also includes Mobile Ajax).

About the authors

Ajit Jaokar is the author of the book Mobile Web 2.0 (www.mobileweb20.futuretext.com) and also a well known blogger at OpenGardens (www.opengardensblog.futuretext.com). His recent keynotes/talks have included the Web 2.0 exp, Java One, Stanford university, MIT Sloan and 3GSM.

Rocco Georgi is a web developer and co-founder of PavingWays. He is a frequent speaker at (un)conferences and the creator of the Frost Ajax Library - a minimalist Ajax library for constrained browsers.

Bryan Rieger is an interactive designer and co-founder of Yiibu, a mobile content and design company located in Edinburgh, Scotland.

Feedback requests and enhancements

We welcome feedback and enhancements requests. If your company is doing some interesting work in this space, we can consider adding it to this FAQ. Please contact ajit.jaokar at futuretext.com for any suggestions.

Acknowledgements

We acknowledge the work of the following people/groups

Eli Dickinson Editor, FierceDeveloper www.fiercedeveloper.com

C Enrique Ortiz http://www.cenriqueortiz.com/weblog/

Daniel K. Appelquist http://www.torgo.com/blog/

The Open Ajax Alliance http://www.openajax.org/