OpenAjax Alliance banner

Home

Introduction to Mobile Ajax for Developers

Abstract

The OpenAjax Alliance has assembled a set of white papers as a guide to help Web developers and IT managers understand and evaluate Ajax, define a successful Ajax strategy, and become familiar the important role OpenAjax plays in the development of the Ajax market.

The white papers are:

 

Contents

1 Introduction

This OpenAjax Alliance white paper discusses Ajax-based solutions for mobile devices and outlines key design considerations. It is intended for those with prior experience with mobile application development or desktop Ajax techniques.

Internet usage on mobile devices has dramatically increased since 2007. This proliferation is the result of a rapid increase in processor power, improvements in network connectivity and reductions in the costs of mobile computing. Many mobile devices now include the same or similar Web browsing software as desktop computers. As a consequence, mobile device users expect access to the World Wide Web anytime, anywhere and from any device.

The Ajax design approach (see Introducing Ajax and OpenAjax) has revolutionized the Web with highly responsive, lightweight applications. Mobile Ajax leverages this approach to address the constraints, opportunities and key issues of application developers who target mobile devices. With Mobile Ajax, Web pages are built with the same industry-standard HTML and JavaScript technologies used for the desktop Web, without creating technology subsets or profiles. With the global proliferation of mobile devices and expansion of mobile networks, Mobile Ajax is the right technology for delivering the applications and data demanded by the millions of users who connect to the Web via mobile and embedded devices.

Through additional APIs, Mobile Ajax provides access to device services that enrich the Web experience of mobile users. Users are best served by applications that make contextual use of sensory data (e.g., device location.) Device services connect applications to the sensor-rich environment of mobile devices.

At the same time, mobile devices are resource constrained and applications need to make efficient use of device resources in order to provide a good user experience. These two aspects of mobile devices create a number of opportunities and challenges for mobile application developers. This white paper provides guidelines to alleviate the challenges while maximizing the opportunities available to developers.

2 Characterizing Mobile Ajax Support Today

Ajax techniques allow a desktop-like experience within modern Web browsers using open technologies such as HTML and JavaScript. However, it is important to note that Ajax is still an emerging technology for mobile phones and not yet ubiquitous on these devices. Unlike developers of desktop Web applications, whose users can be expected to have Ajax-capable Web browsers, mobile application developers work knowing that today only a subset of mobile devices can fully use Ajax-powered websites, but, given current trends, sometime soon a significantly larger percentage of mobile phones will support the same Ajax technologies used by desktop computers.

It is also important to note that HTML and Ajax are moving beyond the browser. Ajax is powering "mobile widgets," specialized mini-applications that the user installs on a mobile device to communicate with background services such as news, sports, weather, entertainment and financial data feeds. Additionally, some manufacturers and network providers are using Ajax technologies to create device-resident applications such as home screens, and for various modular, reusable application components.

The Ajax experience is characterized by the rapid response of applications to user actions and the smooth updates of information delivered to the end user. These updates are concise, making Ajax a more attractive way to develop applications for bandwidth-constrained devices and environments. One of the key benefits of Ajax is that it can help address battery, bandwidth, latency and smooth multimedia issues. Ajax compensates for the relatively large latency (long RTT) on mobile connections by fetching data asynchronously. Once the application is loaded, refreshing the data in the application using Ajax is more bandwidth efficient than reloading the whole page or screen. Ajax brings these capabilities to the mobile device, minimizing the use of resources and allowing videos to play smoothly in one part of the screen while other areas of an application are updated.

However, at this time, few Ajax toolkits have been tuned to account for the unique constraints of mobile devices, and most websites are not optimized for mobile devices. Even when a device ships with a full Web browser, various factors such as small screen size and lack of a mouse result in a suboptimal mobile experience. The Ajax toolkit community is working to improve mobile platform support. Meanwhile, popular sites such as Google and FaceBook have customized the HTML sent to mobile devices to better address the characteristics of these devices.

Improved mobile browser support and more complete mobile implementations of major Ajax toolkits are required for existing websites to work well on the majority of mobile devices. The proliferation of unique devices with specific purposes makes standardization in the mobile market a greater challenge than in the desktop market. Key Ajax libraries have only recently focused on the delivery of Web applications to mobile devices. Most existing Ajax libraries presently work only on high-end devices. The developer community has yet to establish common best practices to address a wide range of mobile requirements, such as widget libraries designed for small screens and the absence of a mouse. Mobile Ajax is still an emerging phenomenon.

3 Mobile Ajax in Action

To reemphasize a key point, mobile phones are increasingly shipping with the same Web browsers as desktop computers, allowing users to view and interact with existing Web content. However, users can have a better user experience or gain entirely new capabilities when application developers make custom mobile-specific applications, such as the two examples described below.

One example of a Mobile Ajax application that uses simple Ajax techniques to fetch information is a train timetable Widget developed by Vodafone and demonstrated at the Mobile World Congress of 2008. The application involves two widgets, one for the mobile phone and one for the desktop. The desktop widget enables a user to select two train stations from which the mobile widget will retrieve information on the next available train between those two locations.

The mobile widget design and layout (xHTML and CSS), additional graphical assets (PNGs) and logic (JavaScript) have all been prefetched to the device, where they reside locally. When the mobile widget is called, it uses the XMLHttpRequest method to check whether the preferred stations are listed and then pull down the changes to the user when the main page and its DOM are loaded. As the user selects the stations, they are graphically highlighted through DOM modifications to provide a responsive feel, and then the XMLHttpRequest method is used again to retrieve the information on available trains for presentation to the user.

By leveraging Ajax, the two widgets are able to update the timetable, highlight stations as they are selected, and present the subsequent train schedule information without having to reload the whole widget, providing a responsive user experience akin to that of a "native" application. Furthermore, by prefetching the graphical assets and widget logic, the data to be downloaded is minimized to reduce battery drain. In summary, this application is a nice example of Ajax circumventing the latency problems of mobile applications, while reducing data load and providing a quality user experience.

A second example of a live Mobile Ajax application is the "Bundesliga player" (available on Vodafone in Germany), that takes advantage of the SVG support found in some mobile browsers today. This application brings soccer information to mobile phones, including phones that do not support 3G. The application targets fans who want current game times, scores and statistics. Due to integrated video support within the Web runtime, the user can also view video highlights and replays from games. This application is a single page that contains most of the references to the graphics and logic to be used. At the start of the application, the main page and its DOM are loaded. During the remaining execution of the application, modifications are made to the DOM in response to user actions and preprogrammed changes. This means that only one full page will be loaded during the entire execution of the application.

Data used to update the application is fetched from the server using XMLHttpRequest and by updating URLs to images and multimedia objects. From a user perspective, this means that the screen will never be blank due to the loading of an entire page. Changing one graphic object to another is either instant, if the object is already loaded, or takes place as soon as the new object has been fetched over the network.

The resulting service cannot be distinguished from a native application in terms of user experience. The responsiveness for most functions is as good as a native application, and the graphics are smoothly updated. The application is a nice example of how Ajax can overcome the latency problem of most mobile applications and help to bring live services to the mobile user experience.

4 The Mobile Opportunity

Mobile devices provide new and interesting ways to access information. The challenges faced by the developers of Mobile Ajax solutions are primarily characterized as limitations of the device: screen size, support for specific data formats, data input and retrieval and processor capability. Domain-specific features including GPS location, voice call initiation and push messaging are also commonly cited. Mobile devices present many unique opportunities for developers to create novel applications that integrate the following features:

5 Performance Considerations

A properly designed Mobile Ajax application can be highly responsive with minimal impact on battery usage. The following table summarizes some of the key performance considerations with Mobile Ajax applications when compared to alternative approaches, such as HTML pages that do not use Ajax techniques, proprietary single-vendor Web formats, and Java or native code applications. The table below emphasizes that network operations generally affect the battery more than local processing of HTML and JavaScript.

Mobile Ajax vs Alternative Technologies

Communications and Battery Life
Better than alternativesDepends on ArchitectureWorse than alternatives
XMLHttpRequest - On Demand Requests
Actually saves more energy than regular Web applications
   
XMLHttpRequest - Polling  
Polling periods can be adjusted to minimize affect on battery
 
XMLHttpRequest - Persistent connection    
Should only be used if necessary
Client-side Processing/CPU 
HTML&CSS
Same or better than regular Web applications
   
JSON
JSON is preferred whenever possible
   
JavaScript&DOM  
Developers can limit continuous background processing
 
XML  
XML has performance issues only when used with large datasets
 

6 Tips for Mobile Application Developers

The following suggestions can help developers achieve the best results with Mobile Ajax applications running in a browser on a mobile device.

6.1 Design for small screen size

Mobile devices provide only a fraction of the viewable area of a desktop computer (although some devices compensate somewhat via high-resolution displays). Large-size Web pages are sometimes usable but often clumsy to operate on a small screen as the user needs to adjust zoom levels and pan around on the large-size Web page. Here are some techniques that some developers use to make their Web page work better on small screens:

6.2 Design for processing speed constraints

The CPUs in mobile devices have less computing power than desktop computers, sometimes considerably less. If your website requires heavy computation, perhaps due to complex algorithms implemented in JavaScript, you might experience long processing delays and quick battery power loss. In general, avoid placing a major computational burden on mobile devices.

6.3 Design for memory constraints

Some Web pages and Ajax libraries used to create Web pages use techniques that require fairly large amounts of memory. On desktop computers, memory requirements usually aren't a problem, but many mobile devices provide limited amounts of available RAM to the browser. It is recommended that you profile the memory requirements of your Web page against the constraints for the various mobile devices that you plan to support. If your Web page uses too much memory for some of your target devices, then you might need to limit the set of mobile devices you support or modify your Web page.

6.4 Design for limitations in text handling

The majority of mobile devices have a limited keypad - typically just the numeric keys and a small number of additional keys for controlling specific functions - making text entry much less convenient than on a PC. For many Asian languages, text entry is even more complex, magnifying this deficiency. In addition, especially with Asian languages, there are limitations in text display, such as an inability to scale fonts (so only a small range of glyph sizes is available) and missing support for certain character sets. Although most phones support predictive text entry, not all users have it enabled, and there is also currently no way in a Web form to indicate that numeric, not text, entry is required. The need for text entry often impairs the usability of a site considerably. If your website requires a lot of text entry, you may want to consider redesigning the site's user interface to decrease the amount of text entry.

6.5 Design for pointer device differences

Most desktop computers offer a mouse or equivalent (e.g., touchpad or trackball) for moving the pointer around on the screen, with one or more buttons to select objects or to drag user interface elements around on the desktop. Most mobile devices, however, do not offer functionality comparable to the mouse, and furthermore, mobile devices vary significantly in how the pointer works. The iPhone offers a touch-screen user interface, which allows the equivalent of a mouse click, but there is no visible pointer arrow that you can move around on the screen and there is no ability to drag and drop user interface elements. Other devices show a visible pointer arrow on the screen and simulate a mouse device via a four-way track ball that moves the pointer arrow. Other devices provide a stylus, which allows the equivalent of a mouse click and might allow for drag-and-drop, but it does not support a visible pointer arrow.

Because of this, it is important to provide a user interface that will operate successfully across a diverse set of devices. One user interface approach that works on most devices is activation of a user interface element solely via pressing or clicking on the user interface elements. A mouse click on a menu should either cause a command to be executed or an appropriate submenu to become visible. The submenu should stay visible until a subsequent click either activates a command on the submenu or causes the submenu to disappear. It also makes sense to think about the size of the objects that can receive mouse clicks. If there are several small "clickable" objects close together on the screen, it might be difficult for the touch-screen user to touch a particular object.

6.6 Design for network costs, latency, low bandwidth and unreliability

Ajax Web applications tend to use the network more efficiently than regular websites. Cellular data networks offer very different network characteristics such as latency, bandwidth, costs and reliability than fixed data networks. When users interact with the Web from desktop computers or laptops, they can assume that the network will continue to be available through the session, the speed of the network will stay relatively constant, and there will be no extra charges for data transmission. With mobile devices, these assumptions are not always true. While interacting with the Web from a mobile device on a high-speed train, the network may very well go away at various moments (e.g., tunnels) and different geographies might support different transmission speeds (e.g., HSPA and/or 3G might be available in some urban areas, but remote areas might support much slower 2G technologies).

Applications should take into account variations in network characteristics in designing server interaction:

6.7 Conserve Battery

Battery consumption is an important design factor with mobile phones today. Users expect their phones to work for long periods, at least a full day, without having to recharge. Manufacturers devote much of their engineering activities towards battery efficiency.

Web pages must do their part to avoid excessive battery drain. Among the events that have the biggest impact on the battery:

Mobile Web applications should avoid continual network polling, superfluous and continuous animations, and inefficient JavaScript execution.

6.8 Special security concerns

Mobile Web applications require the same security considerations as desktop Web applications, and in many scenarios have additional security considerations. Most of today's Ajax-capable Web browsers on mobile devices share the same security characteristics as desktop browsers, particularly implementation of the "same-domain" policy as an obstacle against cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks.

However, when the Web Runtime is used outside the browser, such as with mobile widgets and device-resident applications, the mobile device will sometimes loosen its security policy to allow the Web Runtime to access device services such as the address book or local e-mail boxes. For these scenarios, developers need to ensure that their application prevents vulnerabilities that might allow attacks on the user or their own website.

6.9 Protect Portability

6.10 Plan for legacy devices that do not support Mobile Ajax

Today, only select mobile devices support Ajax, and it will be a couple years before the majority of mobile devices will be able to use all of today's Web. Mobile application developers need to choose a strategy for mobile devices that do not include browsers capable of rendering the complete Web. Among the possible strategies:

6.11 Develop for the Mobile End User's Requirements

Keep in mind that:

7 Possibilities for the future

Industry leaders are hard at work making the standards-based Web Runtime more flexible and powerful to deliver a richer user experience for mobile users. Here are some future features for the Web Runtime that the industry is working towards:

8 References

9 Glossary