PhoneGap: Hybrid Application Framework

Fil Maj, Adobe Systems

Who's This?

Fil Maj

Vancouver, Canada

Master Exploder at Adobe Systems, eh

filmaj.ca / @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.

PhoneGap

phonegap.com

MIT license, as open as it gets!

Acquired by Adobe in November 2011

Apache Cordova

cordova.io

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 docs.phonegap.com

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

http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/

  • 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

http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/

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

Progress

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!

JavaScript

Native Code

Unified JavaScript Layer

http://github.com/apache/incubator-cordova-js

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

            <plugin
              name="Accelerometer"
              value="org.apache.cordova.AccelListener"
            />
          

            <key>Plugins</key>
            <dict>
              <key>Accelerometer</key>
              <string>CDVAccelerometer</string>
          

Native Code!

YAY!

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

Android

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!

...

KIDDING!

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) {
                this.webView.sendJavascript(pluginResult.toSuccessCallbackString(callbackId));
            }
          

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

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

BlackBerry Plugins

MOAR JAVA!

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
                             withDict:(NSDictionary*)options;
          

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
                  messageAsString:@"hi"];
              [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

http://github.com/apache/incubator-cordova-ios/guides

On Android: CordovaWebView

http://github.com/apache/incubator-cordova-android/tree/CordovaWebView

Grazie, eh

cordova.io phonegap.com filmaj.ca @filmaj