Cordova: What it Does and Doesn't Provide

By Raymond K. Camden

This article is excerpted from Manning Publishing’s Apache Cordova in Action.

The Cordova project consists of three main things—a command line tool, access to hardware features, and the ability to support unknown future features.

The Command Line

The command line tool that is used to create projects and compile code to mobile platforms. It takes your source HTML, CSS, and JavaScript and converts it into the native binary required for the different platforms supported by Cordova. You will also use the command line tool to add support for the various features your application uses. The command line can also be used to send your code to either a simulator or a real device. Don’t worry if you aren’t necessarily a command line ninja. The commands you use day to day are relatively simple and you will quickly become familiar with them.

Hardware Access

The second major feature that Cordova provides is access to various features of the mobile device. For the most part, these are all things that you cannot do with “regular” web apps running in the mobile browser. Cordova essentially extends what you can do in JavaScript to give you additional APIs to use in your code. Let’s look at a list of these APIs and what they provide.

Table 1: Device features Cordova can access

Plugin Support

What about future device features not listed here? It is possible (but probably not likely), that a new smartphone will come along that will have an attached cowbell. How would you use this new hardware feature from a Cordova application when it isn’t supported? Cordova has a plugin API that lets you support anything the device supports. It does require that you write custom native code. But once you’ve done that and paired it with a corresponding JavaScript library, other developers can then easily use the cowbell from their application. Even better you could then share this code with others so they too can make use of cowbell in their applications.

Of course, there is another huge benefit of using Cordova that isn’t listed anywhere in the official docs or marketing material. Since Cordova lets you use client-side technology, you get the benefit of the million or so different HTML, CSS, and JavaScript libraries that exist today. Perhaps that’s a given, but I really think it bears repeating. As a real (and completely random!) example of this, there is a cool little JavaScript library called Color Thief (http://lokeshdhakar.com/projects/color-thief/). It examines a picture and returns the dominant colors. I was able to take this library, mash it with Cordova’s Camera API, and create an application that lets you take a picture and determine the most important colors (figure 1). (You can find this demo here).

Figure 1: An example of the mashup of the Color Thief library and the Camera API

On top of the million or so existing libraries out there, you can also use the million or so existing APIs available to developers. GitHub, for example, provides an API that lets you do multiple things, including searching for projects. Since you can easily call APIs like this using JavaScript’s XHR (AJAX) features, your Cordova projects can also make use of them, and as before, you can combine this with the device-centric features to build incredible apps.

What Doesn’t Cordova Provide?

You’ve already seen that Cordova provides a set of APIs as well as the ability to write your own for features not yet supported. But what doesn’t Cordova give you out of the box that you may not expect? The main thing Cordova does not do is provide a “UI framework” for your development. What does that mean? It simply means that Cordova will take your HTML, as you code it, and put it on the device. The HTML (and CSS of course) you create may not be mobile optimized and therefore difficult for people to use on a device. Buttons may be too small to click and text may be hard to read. Cordova won’t “magically” fix this for you. Luckily there are multiple solutions for this. As an example, the Bootstrap framework (getbootstrap.com) can be used with your Cordova project to easily make your application more mobile friendly. In figure 2, all that was done was to add one call to the Bootstrap CSS file and add one class to the button. (I discuss this in more detail in chapter 5 of my book Apache Cordova in Action. Save 39% on it with code 15dzamia at manning.com.)

Figure 2: Comparing a non-optimized Cordova application with one optimized for mobile use using Bootstrap.