Demystifying Apache Cordova and PhoneGap

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors. -Phil Karlton + Martin Fowler

If naming a thing is hard – getting used to a name change is even harder. "PhoneGap" is a recognizable name to most developers that have been involved in (or at least aware of) hybrid mobile application development. "Cordova", on the other hand – what's that? For me, it invokes images of the famous Spanish general, or Italian food, and sounds like a new sports car....or driving a sports car at high speeds to an Italian restaurant (always a win-win). The confusion began back in October, 2011 – when what had been  known as PhoneGap up to that point was donated to the Apache Software Foundation in order to start the incubation project "Apache Cordova" (it became a top level ASF project in October 2012). Since then, "PhoneGap" refers to an Adobe-led free, open source distribution of Cordova. Brian Leroux put it this way:

You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari….Over time, the PhoneGap distribution may contain additional tools that tie into other Adobe services, which would not be appropriate for an Apache project….PhoneGap will always remain free, open source software and will always be a free distribution of Apache Cordova.

The nice thing about "PhoneGap" is that the name kind of gives away what it does. But not many people would be aware that "Cordova" refers to the street the Nitobi office was on when the PhoneGap project first began. Because of the descriptive aspect of the name "PhoneGap" – as well as the familiarity factor – many people still use it when referring only to the feature set/libraries provided by "Cordova". I liken it to growing up in Atlanta, where every soft drink is a "coke", every tissue a kleenex, and every photocopy a xerox. (It's the Coca-Cola capital of the world, people! You don't want to go to jail, do you?) PhoneGap was "first to market" in getting the name lodged in our brains.

Ok, great - we now know that PhoneGap is a free, open source distribution of Cordova - which is also a free, open source project. But what is Cordova?

It's not just a question newcomers ask. People familiar with it - or at least the idea of it - ask this question, too. Like me, they want to know: What can it do? What can it not do? What sort of trade-offs (especially of the pesky hidden variety) are they making if they opt to build a hybrid mobile app instead of a native one?

For this post - we'll focus on answering the "what is it" question. Given that we're answering what Cordova is, it's safe to assume these answers apply to PhoneGap as well.

What Cordova Is

Cordova is an Application Container

Cordova lets you write an application using HTML, JavaScript & CSS - and run it as a natively-installed application on supported mobile devices (more on what's supported later). It's effectively a container for a web application that allows your JavaScript to access certain native device APIs.

The UI of a Cordova application is effectively a 'web view' that takes up the entire screen. According to Andrew Trice:

"The web view used by PhoneGap [same applies to Cordova] is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView. Since there are differences in the web view rendering engines between operating systems, make sure that you account for this in your UI implementation."

Yes – that means what you think it does – you will need to account for differences in DOM implementation between devices. You'd be doing this anyway, if you had been writing a mobile web site – and since Cordova apps are written with HTML/JavaScript/CSS, there's nothing stopping you from taking full advantage of libraries and shims that help bridge the gaps in functionality.

It's quite common for Cordova apps to follow the "Single Page Application" (SPA) approach. You're not restricted to that, by any means, but it fits the paradigm well.

What Do You Mean by Natively-Installed?

Your Cordova application gets packaged in the native device install format. For example:

• For iOS, the final build output is an .ipa file (iPhone Application Archive)
• For Android, the output is an .apk (Android Application Package)
• For Windows Phone, the output is a .xap file

You can see the pattern here - your "web app" assets are packaged into the distributable/install format for the targeted device and are installed like any other application on that device. So - you write a web app, and your user has no idea it's not a native app (usually!).

Cordova: Consistent APIs Across Devices

The JavaScript libraries provided by Cordova give you consistent APIs which you call the same way on any supported device. This is a huge win in that you can not only leverage existing web skills, but expect the API to not change as you target different mobile devices.

So - What "Native Device" APIs are Available?

This list should answer that question. You might be surprised at what's available from each device. For example, an iPhone 3Gs or newer has these APIs exposed:

OK, Then - What Devices Are Supported?

Cordova will work with these Operating Systems:

API support for each operating system will vary - so it's best to refer to the supported features chart (this should be applicable for Cordova & PhoneGap) or the platform-specific documentation.

<random>
If you're like me you saw this list and raised an eyebrow when you saw "Bada". Bada is a platform designed by Samsung for a range of mobile devices and smart TVs. However, in February 2013, Samsung announced that it is abandoning Bada in favor of Tizen. A Cordova-Tizen "adapter" is in the works here. Yet more confirmation that web-in-mobile is winning.
</random>

Cordova is Free, Open Source

As mentioned above, Cordova is an Apache Software Foundation project, and is licensed under the Apache License, Version 2.0.

Cordova is Extensible

If Cordova doesn't provide a JavaScript API for device functionality that you need, you can write your own native plugin which exposes the native implementation for your JavaScript to access.

Wrapping Up

So, let's recap:

• Cordova acts as an application container - letting you write a mobile app in HTML/JavaScript/CSS, and packaging it in the target device's installer format.
• You get a consistent JavaScript API across supported devices.
• The major mobile device platforms have good support.
• Cordova is the engine driving PhoneGap.
• You can use Cordova straight-up, bypassing the PhoneGap-branded download (Icenium does this, as do others).
• Cordova is extensible via plugins.
• Cordova is free & open source.

Next week we'll dive a bit more into the advantages and disadvantages of choosing a hybrid approach over a native implementation. Come with your best pair of boots on - it's rough and rocky terrain…