Go cross-platform with Apache Cordova

A major problem facing anyone building a modern application is the question of how to deal with an ever-expanding variety of endpoints. From wallscreens to PCs to tablets to smartphones, today’s motley crew of clients makes it hard for designers and developers to choose which devices to target — and how to prioritize those they choose.

The obvious solution is to deliver apps for the two, or perhaps three, most popular mobile ecosystems. This is the easy way out and accounts for the dominance of the Apple App Store and Google Play.

But what if you want to deliver apps for a wider range of devices, including, say, Windows Phone devices or the BlackBerrys your business still uses to meet compliance requirements? Or what if you need to reach out beyond the West to non-Google Android app stores in China or to a still significant proportion of budget Tizen devices in Korea or to low-cost Firefox OS devices in developing markets?

For a wider reach, we need to go back to the early days of the iPhone, when Steve Jobs suggested that the Web was going to be the key to delivering mobile apps. While smartphones quickly went to native code for performance reasons, elements of Apple’s initial app strategy still make sense as a way of delivering cross-platform apps.

Instead of building multiple apps, all you need to do is build a tool for rendering HTML and JavaScript content using a device platform’s native tooling. That rendering engine can then be packaged and delivered with app-specific code.

Cordova’s cross-platform approach

Perhaps the best-known implementation of this technique is Apache Cordova, an open source mobile framework based on Nitobi’s PhoneGap tools, which were open-sourced when Adobe bought Nitobi. Adobe kept the PhoneGap name for its mobile HTML5 development tools and services, and Apache renamed the project, which is now used by several mobile development frameworks, including Intel’s XDK, as well as Adobe.

What Cordova does is relatively simple: It provides a standard set of APIs that allow JavaScript access to device-specific hardware. Platform developers can then produce code that maps those APIs to, say, Android’s camera tools or Windows Phone’s accelerometer or the iPhone compass.

Once that code is in place, you can build a cross-platform app in HTML5 and JavaScript (using your choice of JavaScript UI tools) and run the resulting code through a Cordova wrapper service to produce apps that can be distributed through whatever app stores you want to use, including popular non-Western stores.

The biggest difference between a Cordova app and a pure Web app: Everything runs on the device; there’s no need to connect to a Web server. That means your users can work offline, or you can use a simple set of service APIs to connect to a cloud app, reducing bandwidth requirements and service latency. Users won’t need to wait for content to download and render, and they won’t need to worry about whether they’re using a WebKit browser.

Your basic Cordova recipe

How do you go about building a Cordova app? A good place to start is Adobe’s PhoneGap tooling. You’ll need to start by downloading the appropriate SDKs for the devices you’re planning to support. Building the app doesn’t require any special tools; all you need is a good programmer’s text editor or an HTML-aware IDE.

The heart of a Cordova app is its config.xml file, which contains the description of the app, the services it uses, and a manifest of included files. The app itself is launched from a familiar index.html page, so you can build and test apps using a Web browser pointing at your file system — there’s no need for a build server and test devices until you start using device-specific plug-ins. If you’re using Cordova to wrap an existing website as an app, all you need to do is ensure your app works at device screen sizes.

To start building cross-platform apps, download the Cordova tools along with a Git client. Because they run on top of Node.js, you’ll use Npm to install them. You can then use the command line tools to create the basic structure for an app, along with directories for platform-specific code and features.

Cordova also includes build tools that handle wrapping, building, and compiling apps. You’ll need the appropriate SDK for the platforms you’re going to use, so you’ll need a Mac OS machine with Xcode for iOS apps, for example, or a Windows machine with the Windows Phone tools for Windows Phone. If you opt to use the Adobe PhoneGap service, you can use its cloud compiler to build your apps, including handling iOS and Android.

The basic Cordova install doesn’t come with any plug-ins, so you’ll need to download and install additional features as and when you need them, on a pre-application basis. There’s a growing library of extra features, including tools for handling mobile advertising platforms and the ability to use in-app purchases in stores to enable features.

Additional Cordova tooling can simplify application development and testing. Adobe’s tools include a desktop server and a developer mobile app (for iOS, Android, and Windows Phone). Once you pair the two, you have a tool that lets you edit your app in your HTML design tooling, with the server and developer app showing you what your code looks like on a device as soon as you make changes, without having to push code through a Cordova build server. Other options include Microsoft’s Visual Studio, which now offers Cordova support as a mobile application option.

Building cross-platform mobile apps needn’t be hard. While Cordova’s HTML and JavaScript may not be as fast as a truly native app, it’s a quick and easy way of delivering an app to your users — especially if you’re working with familiar toolkits and RESTful APIs.