PhoneGap: Hybrid Application Framework

Fil Maj, Adobe Systems

Who's This?

Fil Maj

Vancouver, Canada

Master Exploder at Adobe Systems, eh / @filmaj

I Used To Live In Italy

Beautiful country, people and culture. Thank you for having me!

Io sono Transformer!

Dov'รจ la birra?

HTML5 in the Real World

Web vs. Native

Native apps are kicking web's ass

APIs like accelerometer, compass, contacts, etc.

BUT! Geo is here. Accelerometer is next. W3C DAP group leading the way.


MIT license, as open as it gets!

Acquired by Adobe in November 2011

Apache Cordova

PhoneGap -> Cordova as Chrome -> WebKit

Write Apps With Web Tech

Deploy To Six Platforms

Augment The Web With Native APIs

Get at those sensors!

Full API docs available at

Example: Accelerometer

    function onSuccess(acceleration) {
      console.log('Acceleration X: ' + acceleration.x + '\n' +
            'Acceleration Y: ' + acceleration.y + '\n' +
            'Acceleration Z: ' + acceleration.z + '\n' +
            'Timestamp: '      + acceleration.timestamp + '\n');

    function onError(e) {
      console.log('Error! ' + e.message);

    var options = {frequency:100}; // get updates every 100 ms

    navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

Deploy To App Stores

PhoneGap/Cordova "wraps" your web assets into a native binary.

PhoneGap Core Beliefs

  • The web solved cross platform.
  • All technology deprecates with time.
  • Anyone, at any time, can publish anything from anywhere. That is the stuff of revolutions, and our evolution as a species.

PhoneGap Goals

  • The web as a first-class development platform.
  • The ultimate purpose of PhoneGap is to cease to exist.


Web-based SDKs for mobile platforms + apps are here, more are coming

BlackBerry WebWorks

Others Aren't Into The Web As Much

PhoneGap Is Not A Silver Bullet

Will not wash your dishes.

Write Once, Debug Everywhere

Hardcore 3D Shit

Web tech is probably not the best choice for this problem.

But! BlackBerry 6+ supports WebGL...

PhoneGap API Finite

PhoneGap Plugins!


Native Code

Unified JavaScript Layer

The Bridge

    var exec = cordova.require('cordova/exec');
    exec(function(){}, function(){},
      'MyClass', 'MyMethod',
      ["arguments", "here", 1]

Plugin Class Mapping

  • Android: res/xml/plugins.xml
  • iOS: www/Cordova.plist
  • BlackBerry: www/plugins.xml



Native Code!


Each project has a native Plugin interface that you need to use


Java! Who is excited?!

Cordova has a AbstractPluginFactoryManager class (org.apache.cordova.api.AbstractPluginFactoryManager)

Then you define a PluginFactoryManager class

You can then access the PluginFactory class

Then you can create Plugins! Yus!



That was my Java joke, har har

Android Plugins

Cordova has a Plugin abstract class (org.apache.cordova.api.Plugin)

You extend the Plugin class with your own Plugin

You implement a special method:

    public abstract PluginResult execute(String action, JSONArray args, String callbackId);

Android, cont.

Synchronous Execution

    public PluginResult execute(String action, JSONArray args, String callbackId) {
        return new PluginResult(PluginResult.Status.OK, "<3");

    public PluginResult execute(String action, JSONArray args, String callbackId) {
        return new PluginResult(PluginResult.Status.ERROR, "you're a bad boy");

Android, cont.

Asynchronous Execution

    // Call the JavaScript success callback for this plugin.
    // This can be used if the execute code for the plugin is asynchronous
    public void success(PluginResult pluginResult, String callbackId) {

    public PluginResult execute(String action, JSONArray args, String callbackId) {
        this.callbackId = callbackId;
        PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
        return r;

    private void someNativeInvocation() {
        this.success(new PluginResult(PluginResult.Status.OK, "we did it!"),

BlackBerry Plugins


Good news: identical to Android

iOS Plugins

Cordova has a CDVPlugin class

You extend the Plugin class with your own Plugin

NO execute method

action parameter directly invokes methods with a specific signature

    - (void)MyMethod:(NSArray*)arguments

iOS Plugins, cont.

CDVPlugin provides success and error methods

    - (void)MyMethod:(NSArray*)arguments withDict:(NSDictionary*)options {
      NSString* callbackId = [arguments objectAtIndex:0];
      CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
      [self success:result callbackId:callbackId];

Demo Time?

Embed PhoneGap

Brand spankin' new: Use PhoneGap as a component in a larger native app

On iOS, this is called Cleaver

On Android: CordovaWebView

Grazie, eh @filmaj