Write Once, Ship Everywhere

Writing a new mobile app? The first question you should ask yourself is: what platform are you going to build on?

  • The platform whose users spend the most amount of money on apps (iOS)1?
  • The platform with the most market share (Android)2?
  • The platform that most enterprises/personal machines are running (Windows/Windows Phone)3?
  • What about all the other players? Blackberry? FireOS? Tizen?

Sure, you could learn the development languages, tools, and design paradigms for each of these platforms but why not write once, ship everwhere with Apache Cordova.

Apache Cordova

Apache Cordova is an open source framework (read: free) for developing natively installed mobile apps. One of the overarching goals of Cordova is 100% shared code which is achieved by writing in the one framework that works everywhere: the web (HTML/JavaScript/CSS). Cordova packages the HTML-based application to a native application shell (which can be installed via the native app stores for the various platforms) and renders the web app in what is effectively a webview.

In comparison with other native/hybrid development frameworks:

Plugins

With your app written in HTML/JavaScript/CSS, how exactly do you access native capabilities like the camera, accelerometer, etc? Well, with plugins!

Plugins abstract native implementations exposing a common JS api. Here's what the code would look like:

Alerts

// notification
if (navigator.notification) {
    window.alert = function (message) {
        navigator.notification.alert(
            message,                      // message
            null,                         // callback
            'I am a native notification', // title
            'OK'                          // buttonName
        );
    };
}

Camera

function startCamera() {
    navigator.camera.getPicture(onSuccess, onFail,
    {
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        correctOrientation: true,
    });
}

function onSuccess(u) {
   // setup canvas
   document.querySelector("#photoCanvas").src = u;
}

function onFail(e) {
   console.log('onFail');
   console.dir(e);
}

Summary

Let's break it down.

Pros:

  • 100% shared code
  • Free (open source)
  • Consistent brand experience across all platforms
  • Super easy to re-package an existing web app
  • Code for the web which means any JavaScript framework is in play. To elaborate this point, the below reveal.js-based presentation was easily re-packaged to a Cordova app.

Con:

  • Lose that native feel (material design => Android, modern design => Windows)
  • Performance won't be as good compared to native controls

Is Cordova the right tool for you? If no, go directly to jail; do not pass go, do not collect $200. If yes, read part 2.

Footnotes: