Expanding PhoneGap with Plugins

05/2013

me

(Fil Maj)

Master Exploder @ Adobe

Work on all things PhoneGap, mobile, web and beer

@filmaj

Native mobile apps built with HTML5

PhoneGap APIs are Plugins

Understanding PhoneGap

  • Chromeless Browser "View" (WebView)
  • Native Runtime
  • A JavaScript-based bridge connecting the two

We Must Go Deeper

JavaScript

  • Available everywhere:
    mobile platforms, server,
    your fridge, etc.
  • Provides a consistent API
    surface for all PhoneGap
    platforms

JavaScript-to-Native

  • cordova.exec();
  • PhoneGap's cross-platform
    giant flying eagle into native

WARNING

Code Ahead

cordova.exec();


cordova.exec(win, fail,
    service, action, args);
  • win: success callback
  • fail: failure callback
  • service: native class that will do the work
  • action: native method that will do the work
  • args: arguments to pass into native method

Service + Action

config.xml document

Routes JavaScript exec to native code

Mapping Service+Action


<plugin name="SERVICE!" value="native class identifier"/>

e.g. (Android)


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

PhoneGap Bootup

  1. Each <plugin> is loaded first

  2. Once all plugins are loaded, main PhoneGap event deviceready is fired and WebView is shown
  3. Calls to cordova.exec are routed to appropriate class

Demo!

Let's write JavaScript for the simplest plugin: Echo.

The Future

PhoneGap 3.0 in July

Plugin Manifest

plugin.xml describes:

  • Native bits: classes, frameworks, libraries, and where to put them
  • Web assets: HTML, CSS, JS, images, etc.

Plugin Tooling: Plugman!

(Un)installs plugin.xml-ready PhoneGap Plugins

Supports Android, iOS, BlackBerry 10

http://github.com/apache/cordova-plugman

npm install -g plugman

Plugman-friendly Plugins

https://github.com/phonegap-build

Plugins available on Adobe's PhoneGap Build service using this!

Browser of the Future

  • Plug-n-play plugin ecosystem
  • Build-your-own-browser
  • Customize your PhoneGap app with whatever APIs you need

Demo #2: Plugman

Thanks, eh!

@filmaj

http://github.com/apache/cordova-plugman

phonegap.com

build.phonegap.com

npm install -g plugman