Cross platform mobile development using HTML and JavaScript

Thumb Crossplatform






crossplatform

There are several approaches to building cross platform applications targeting mobile platforms.

Frameworks such as Mono allow development of a common application core, with a native user interface and platform specific integration developed on top of this for each platform.

Another approach is to share both the code base and the majority of the user interface between platforms – this results in a potentially non-native experience for some or all platforms targeted, but requires little to no modification to make the application available for each. This is often achieved using HTML and JavaScript running in a web application container.

This post investigates some of the options available for building mobile applications using HTML and JavaScript.

Not a website

Although a plain HTML website can be packaged as an application and distributed in the same way as a native application with the help of the tools covered in this post, there are some problems with this approach.

Firstly, Apple will not approve applications for distribution on the App Store that simply wrap a website, or provide a website look and feel. Adobe has written about this, and various posts from users discussing App Store submissions being rejected can be found on the PhoneGap newsgroup.

Secondly, user expectations are established around what an application provides over a website, and how the user experience of software installed on their device differs to viewing a web page. Some application distribution methods that do not enforce following platform guidelines may accept the application, but users will most likely not.

Taking a web page and packaging it is not the intended approach for these tools. They exist to provide the ability for application development using web technologies, with additional device integration that may not always be possible through a web browser; for example, they provide access to the camera, local data storage, user contacts, system notifications, checking network state, and using sensors such as the compass and accelerometer.

If the additional functionality provided by the tools is not required, or the application does not work while the user has no connection, there may be little value in making use of these containers rather than providing a regular website.

Three cross platform mobile development tools investigated

On most mobile platforms, JavaScript and HTML are not used for native application development. Because of this, web applications must be run in an application container, providing an environment for the application to run, as a web browser would. These web application containers package the application code, provide the launcher icon, and allow integration with the underlying system.

PhoneGap
PhoneGap is a branded version of the open source Apache Cordova project (Apache 2.0 licensed, which allows unrestricted commercial use), developed and supported by Adobe and others. Deployment targets for PhoneGap are extensive and include iPhone, Android, Windows Phone, and Blackberry.

PhoneGap provides a web application container, as well as allowing applications to access the camera, device storage, perform network detection, access device sensors, and more (see PhoneGap Supported Features for a full list). It is also possible to integrate with custom native code where required.

Other than making some device functionality available through JavaScript APIs, PhoneGap does not prescribe a specific JavaScript framework, UI toolkit, or development environment, leaving this up to application authors.

Adobe monetises PhoneGap through features such as an online build service, in addition to it being an environment that Adobe’s own development tools can be used for. The full functionality of PhoneGap is not tied to using these services.

Appcelerator Titanium
Appcelerator Titanium is similar to PhoneGap in some ways – it provides a website container application and device integration – however unlike PhoneGap, it also provides a JavaScript application framework and an official IDE.

Like PhoneGap, Appcelerator Titanium is Apache 2.0 licensed and free for commercial use. The developers of Appcelerator Titanium monetise Titanium by making integrated cloud services available.

Sencha Touch
Sencha Touch is primarily marketed as a platform for building applications on, providing a JavaScript library and UI toolset (and so overlaps with the discussion below about approaches to building the applications themselves).

It includes a JavaScript application framework, UI libraries, basic application scaffolding, and more. It also provides compatibility with the PhoneGap JavaScript APIs.

Sencha Touch is dual licensed under the GPL 3 (unsuitable for development of applications that are closed source, or licensed under an open source license incompatible with GPL3) as well as a no cost commercial license. A paid commercial license is also available that provides technical support, the ability to package applications for use on desktop operating systems, as well as providing additional developer tools. See http://www.sencha.com/products/touch/license/ for further details on licensing.

JavaScript application frameworks and touch optimised UI libraries

A popular approach to developing web applications for mobile is to make use of a JavaScript client application framework to enable offline use, and a UI library built with mobile and touch based interaction in mind.

Some of these include:

Things to keep in mind when considering an application framework and UI library to use for mobile deployment are its performance and memory footprint, minimal effort to achieve a UX that feels right for the target platform, support for embedding within an application container such as PhoneGap, and the ability to write the application as a ‘single page’ to prevent unwanted flashes as pages load.

Many other JavaScript application frameworks should work when packaged as a mobile web app, however these may not be optimised for mobile or contain pre-packaged UI controls suitable for a touch based user interface.

Factors to keep in mind…

Application lifecycle
A web application running in a mobile app container such as PhoneGap is still subject to the same managed application lifecycle imposed by the operating system on any other application.

One of the purposes behind the managed application lifecycle implemented on modern platforms is to present the illusion that once an application is installed, it is always running – users should not need to worry about starting and stopping applications, or managing memory. In reality, an application’s process may be killed at any time by the operating system as part of normal operation, or the device’s battery may run out of power. In both of these situations the user will not expect their work to be lost.

As with any other mobile application, the application should be designed keeping in mind that it should ideally be able to save and restore application state at appropriate times in a way that is transparent to the user.

Application Look and Feel
Applications for iOS distributed via the App Store must act and appear as applications, not as web pages – buttons, lists, toolbars, and other elements should behave like an application written using the native user interface controls. Information is available online with tips for helping to get this right, such as this blog.

Android applications distributed via Google Play will not be removed from the store for not looking like a native application – however, creating an application that does not look and feel like an Android application will likely result in low review scores and reduced user uptake.

Each platform has its own patterns and style guidelines. The design of the application should keep target platform design guidelines – such as minimum size touch targets, fonts, element spacing, and application navigation – in mind while designing and implementing the user interface. For example, see the Android guide on Metrics and Grids.

While the application should look and feel similar to a native application and not appear as a web page, you should also be wary of the uncanny valley of user interface design.

Handling offline scenarios
Applications must provide some form of functionality when the user has no network connection. If the application’s pages and resources are all downloaded from a server, the application should still provide some form of feedback to the user indicating that a network connection is required, rather than silently failing.

A PhoneGap based application lets the user know that an internet connection is required.

A PhoneGap based application lets the user know that an internet connection is required.

What others are doing

To get a feel for what web based mobile applications can achieve, take a look through the PhoneGap application directory here. Some notable applications are the travel planner TripCase and the social application Untappd.

TripCase talks briefly about their experience writing a HTML based application, and the CTO of Untappd talks about the creation of the Untappd application here.

For an example of platform integration that can be achieved using PhoneGap, take a look at the Wikipedia application for Android. It uses the native Android sharing system, so users can share articles to any other installed application that works with the share action. It also registers that it handles Wikipedia links – pressing a Wikipedia article link in a web browser will present the user with the option of opening the article in the Wikipedia application when it is installed.

Wikipedia makes use of the native sharing system on Android

Wikipedia makes use of the native sharing system on Android

 

As with any technology decision, whether to write a mobile application using web technologies in conjunction with a tool such as PhoneGap is something that should be decided based on a project’s requirements. When used appropriately, it can offer a way to more easily reach a wider audience by reducing the time and cost to support additional platforms.




Leave a Reply