CHAPTER 4

AJAX Mobile Applications

AJAX applications have been around for several years for desktop web browsers. For instance, many of the popular web-based email applications make extensive use of AJAX. AJAX (Asynchronous JavaScript and XML) is an umbrella term for rich browser-based applications. They run much of the UI interactions and some of the data processing within the web browser on the client device. Smartphones, including iPhones and ones that use the Android software platform, are capable of running these applications, and lots of AJAX applications have been developed specifically for these devices. More information on AJAX is available on the web, including http://en.wikipedia.org/wiki/AJAX.

AJAX applications make extensive use of JavaScript, which repeatedly changes the content within the phone's web browser by manipulating the Document Object Model (DOM). The JavaScript also requests data from the web server and processes the data, e.g., incoming chat messages and status changes for the Google Talk application (Figure 4.1). AJAX applications also make requests and receive responses asynchronously. The data can be formatted in various ways; two popular formats are XML and JavaScript Object Notation (JSON). XML was introduced in Chapter 2, JSON is a more compact data structure—more information is freely available from http://www.json.org/.

FIGURE 4.1: Example of an AJAX mobile application: Google Talk for the iPhone.

FIGURE 4.2: Image-bundle from Google Tasks.

When AJAX applications are developed for mobile devices, the priorities need to change, e.g., animation is less important, while application size and the design of the client-server protocol are more important owing to the constraints imposed by the device. Also connections are more likely be intermittent, e.g., when using the device on the move, so the application may need to be self-sufficient and be able to preserve updates made in the client application until network coverage is available again.

Like desktop web browsers, devices such as the iPhone include a cache within the web browser for content downloaded from servers. When web content can be stored in the cache, performance and user-experience are significantly improved. However the cache on a mobile device is tiny in comparison to the cache of a desktop browser; so canny application designers will tweak their implementation and experiment with actual devices to find ways to maximize the use of the cache. A useful article on the topic is available online (http://yuiblog.com/blog/2008/02/06/iphone-cacheability/).

AJAX toolkits such as Google's Web Toolkit (GWT) provide image-bundles that combine several small, similarly sized images into a single file (see Figure 4.2 for an example from Google Tasks) and programmatically show the correct picture.

The image-bundle from Google Tasks is only 1.4 KB so fits comfortably into the iPhone's browser cache.

AJAX, and AJAX frameworks in particular, make extensive use of JavaScript, which can be quite verbose (and therefore slow to download and less likely to fit in the browser's cache). The JavaScript can be compressed, and may also be obfuscated, which tends to reduce the size of the file. Obfuscated code is harder to understand or debug, which can make creating automated tests more difficult.

The designers of mobile devices may provide custom features in the web browser, e.g., so web applications can detect the device being rotated from portrait to landscape. The developer may choose to include conditional logic to detect and support custom features for particular devices, or create specific versions of their code tailored for that device. (Currently Google Tasks has distinct versions for iPhone, Android, and a generic less capable XHTML version for other phones.)

4.1 TESTING CHALLENGES FOR AJAX MOBILE APPLICATIONS

Few mobile devices support test automation directly, and we need to be able to test rich UI interactions of the application running within a web browser. The behavior of the applications is asynchronous, e.g., for an email application new emails may arrive from time to time from the server without any action by the user. The application can consist of large, compressed and obfuscated bundles of JavaScript that pushes the browser to the limits of what is possible. And, as so often happens, there are often differences in the features, capabilities, and behaviors of the browsers between devices.

Testing how well an application copes with intermittent network connectivity can be convoluted and may require an intermediate device, e.g., to intercept and modify network packets.

If desktop web browsers are used, e.g., with browser automation software such as WebDriver (see next chapter for more information), there will be significant differences in the capabilities and characteristics of that browser compared to the ones used in the mobile device, e.g., in terms of performance. Also, the desktop browsers are unlikely to support or provide the custom features such as rotation events.

4.2 EXAMPLES OF PROBLEMS WITH MOBILE AJAX APPLICATIONS

Mobile AJAX applications are relatively new, the support and behavior varies from one version of a browser to another. Developers want to take advantage of mobile-specific features, e.g., screen rotation and touch interfaces which complicate the client-side application logic. Here are some examples of problems seen with mobile AJAX applications:

• Coping with extensive DOM manipulation performed by the JavaScript. The DOM is one representation of the content in the web browser. During our testing of a recent application we noticed that one model of phone displayed a black box over part or all of the screen while the DOM manipulation was happening—not very attractive for the user.
• Complex DOM structures, with deeply nested structures, lacking hooks for testability (css classes and html ids can make testing much easier and robust).
• Duplicate, missing, and out-of-order content because of flaws in the asynchronous data processing.
• Applications not detecting or coping adequately with being suspended, losing the connection, etc.

Let us move on to how we can automate some of the testing for mobile AJAX devices.