Mobile phonebook mashup application developed using Web technologies

Many developers struggle with the comparably steep learning curve of mobile environments such Symbian OS / C++. Developers also have difficulties with making their user interfaces scale to different display resolutions of devices. The limited means of these devices how users interact with the application pose additional development challenges, e.g. for data input and navigation.

A typical example where these development challenges arise are enterprise data input and visualization applications. For this category of applications a scalable user interface design, which works well across devices with different screen resolutions, is more important than for instance pixel perfect control over layout or animations.

Therefore, the goal of our research has been to identify solutions how user interfaces for applications on mobile devices can be developed more easily than with existing solutions.

After reviewing several other technologies, we came to believe that Web technologies are probably the best available solution to these development challenges. Familiarity to developers and tools support for HTML, CSS, and JavaScript are excellent. Screen layouts defined in CSS can be nicely scalable, and internationalization of Web content is no issue.

Next, we investigated what impact using Web technologies for developing the user interface would have on mobile applications:

For all but the simplest applications the application logic should be developed separately from the user interface. This leads to a two-layered, service-oriented application architecture consisting of: - The user interface layer consists of the declarative user interface definition in HTML and CSS, and the user interface-specific behavior developed in JavaScript. - The application engine developed in a programming language that is more suited for heavy computational tasks than JavaScript. A presentation-agnostic service API exposes the application behavior to the user interface. For ease of development and efficiency this API needs to be available in JavaScript, hence, language interworking between JavaScript and the programming language of the engine is needed.

An interesting extension of this development approach is the creation a mash-up of a local application and Web-based services. Thanks to the use of Web technologies development of a mash-up is straight forward. Two integration options for Web-based services exist: - The Web-based service exposes a REST API. In this case the application user interface integrates with the Web-based service in a similar way as it does with local service components, usually using XMLHTTP. - The Web-based service provides its own user interface that needs to be integrated into the locally provided application user interface. In this case the integration works similar to a plugin or foreign object using for instance iframes or code injection into the HTML document.

To verify and demonstrate our concepts we developed a Phonebook mash-up application for S60 devices: The research prototype provides the following functionality: Access to the native S60 Contacts database, integration with Yahoo! People Search, and with Google Maps.

It was important for us to show that usable mobile interfaces can be developed using Web technologies. To be able to compare our work with something that already exists, we kept to the S60 user interface style. We largely re-created the common user interface elements of S60 using Web Technologies. Our solution supports application themes by switching between CSS style sheets. It also supports localization. The S60 WebKit browser engine renders the application user interface.

For interfacing with the contacts database engine of the S60 platform we developed our own contacts service API to this C++ library in JavaScript. Using the contacts service API, the user interface can search for contacts and has read and write access.

We wanted to use the same looking user interface for contacts retrieved from Yahoo! People Search as for contacts from the local database. Yahoo! People Search does not provide a REST API. Therefore, we needed to implement this feature by simulating a Web browser submitting an HTML form and then scraping the returned HTML result to get the contacts data from Yahoo!

Google Maps provides its own user interface for showing an address on a map or satellite image. Its user interface nicely integrates with the rest of our application. However, the Google Maps user interface follows its own user interface style that is optimized for desktop browsers. The inconsistency with the rest of our user interface reduces the usability of the application. It seams that only changes to Google Maps internals could improve the situation.

For summarizing our findings, we can say that Web technologies are suitable for developing application user interfaces for mobile devices. Ease of creating mash-ups with Web-based services is a big advantage:

The main user interface developer of our application had been an artistic person who does not have any software training. He would have never been able to accomplish the same task by developing in Symbian C++. The rigorous separation of the Web user interface from the rest of the application gave clear benefits.

Tools support for developing dynamic HTML and scalable layouts in HTML and CSS requires improvements. Current Web authoring tools have been optimized for other purposes. We debugged our user interface implementation on Mozilla Firefox before trying it out on a S60 device. We whish for JavaScript debugging support on S60.

As mentioned, we largely re-created the common user interface elements of S60. Further work is needed for turning these into a fully re-usable mobile AJAX user interface toolkit.

Rending of dynamic HTML and CSS is sufficiently fast in the S60 Webkit engine. However, screen start-up times require improvements by reducing the loading time for HTML, CSS, and especially JavaScript into the Web engine.