Get to know Phonegap

Getting started



Who am I?

I love the web

  • Open standards; View source rocks.
  • OS lovers/haters: "Nobody" cares anymore!
  • Super exciting times for the open web

Who am I?

Widget developer for 3 years

fokusOn by Nordija - Widget based IPTV

Who am I?

Mobile Webkit developer since last summer

Who am I?

Agnitio: Sales presentations in HTML5 for iPad.

We're looking for freelancers!

Who am I?

Tap5: Games, webapps, talks, workshops.

Who am I?

What's his face?

@kaptencybear b@ tap5.com flic.kr/kapten

What is Phonegap?

"PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs."


Selling points

Better than native

  • The web is the platform.
  • Write in the same language, to the same API, for all devices.
  • Javascript: cooler by the day. V8. Node. CommonJS.
  • Cost beneficial && more time for fun.

Selling points

Better than open web (currently)

Device API lets you do more stuff

-but Phonegap has an express goal to cease to exist!

Selling points

Polyfilling the future

  • PhoneGap is a progressive enhancement technique.
  • PhoneGap is a reference implementation for future browsers.
  • PhoneGap is for when you want Device Sensors/Data...for now.
  • Installable web apps RIGHT NAO!

Quick history

  • August of 2008 introduced iPhone
  • Mid-November of 2008 introduced Android
  • End of November Blackberry 4.2
  • August 2009 Windows Mobile
  • September 2009 Symbian
  • November of 2009 HP / Palm

State of the mobile web

(Nicked from Fullfrontal keynote slide 3)

stats from gartner

State of the mobile web

State of the mobile web

Platforms of your choice?

  • iOS, Android today.
  • Blackberry, Windows Phone 7, Symbian 3, WebOS, Samsung Bada tomorrow?

State of the mobile web

"It's a party"

  • Apple iOS: Objective C
  • Google Android: Dalvik Java
  • RIM Blackberry: Widgets, Java
  • HP / Palm WebOS: HTML, CSS & JS
  • Windows Mobile: .Net C variants
  • Windows 7: (same)
  • MeeGo: .
  • Symbian 3: .

State of the mobile web

Lowest denominator?

  • iOS, Android, Blackberry, Symbian 3, WebOS, Samsung Bada: Mobile webkit. (Awesum!)
  • Windows Phone 7: Internet Smellsplorer "between 7 and 8". HTML5 coming to Mango "this summer"! [1]
  • Firefox on the horizon for Symbian and Android. Pray for WP7.


State of the mobile web


So many to choose from! Opera widgets. W3C widgets. Yahoo widgets.

Device sensors && Device data

W3C Device API Working Group

Mostly a WebKit story?

  • Except Opera has huuuuge share in Symbian and older Blackberry devices.
  • Firefox Mobile is on the horizon for Symbian and Android. PRAY FOR WP7!
  • Windows Mobile is IE 4.
  • Windows Phone is franken-stIE 7/8

Mostly a WebKit story?

But pretending it is a WebKit world...

  • Canvas
  • SVG
  • CSS Transitions/Animations/Transforms
  • SQLite

Mostly a WebKit story?

Still fxxed

  • SVG: great on Blackberry 6.0! Only Blackberry 6.0.
  • Canvas: great on webOS, Android. Slooooooow on iOS.
  • ONLY CSS Transforms are hardware accelerated. And only on iOS.
  • Android < 2.0 uses Google Gears. Blackberry < 6.0 has its own thing.
  • SQLite being deprecated for IndexedDB


Supported DAP APIs

  • Contacts
  • Calendar
  • Media Capture
  • Sys Info
  • Device
  • Gallery


Currently unsupported DAP APIs

  • Permissioning
  • Messaging
  • Policy Framework

DAP: Device APIs and Policy Working Group


DAP APIs at risk

  • App Launcher
  • Tasks
  • Communications Log


Tested/Supported PhoneGap APIs

  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification


Experimental/Forthcoming PhoneGap API

  • XMPP
  • File IO
  • Compass
  • Gyroscope
  • Bluetooth
  • Web Sockets
  • Menuing


Micro frameworks

  • xui - tiny dom framework
  • zepto.js - minimalist js framework with JQuery-like syntax
  • EmbedJS like a mini-Dojo

Frameworks with UI components

  • Sencha Touch / jqTouch
  • Jquery Mobile
  • Jo
  • Qooxdoo

Persisting stuff

  • Lawnchair


Different devices are different

  • Resolution
  • Pixel density
  • Screen size
  • Hardware capabilities
  • Software capabilities



Resolution and pixel density (retina)

  • CSS media queries!
  • <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css"/>
  • <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="app.css"/>
  • <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" href="retina.css"/>

Which device is this?

  • device.platform, device.version, device.name...
  • WURFL - good in theory... even better, make your own list

Easiest way to build

  • Get a mac / use OS X in a VM to build the iPhone apps
  • For all others, Linux and Windows are welcome
  • build.phonegap.com <- This is incredibly cool

Easiest way to build

I said it was cool!

Risks and issues

  • web tech not appropriate for everything
  • there are bugs!
  • many webkits (says PPK)
  • api is in flux
  • many screens/pixel densities (as always)
  • docs are somewhat sparse
  • getting started is hard, expensive


  • Apple rejections
  • Not native

In the future

  • A solid CLI
  • CommonJS require refactoring
  • Fully documented Plugin API

What year is this?

“When you use your notebook computer and want to check if your flight is on time, do you download the United Airlines computer application, install it, and then lookup your flight? No, because it’s not 1995.”


Constraints are good

  • a fixed tabbar IS NOT a business requirement
  • nor is “native” scrolling/transitions

Choose wisely

  • know your audience
  • do your research
  • look at your stats
  • consider what is trending for your audience

Brian’s 3 Rules

  • 99.99999999999999% of apps are buttons and lists. maybe an effing slider. maybe.
  • platform inconsistencies abstracted with adaptive code: persistence and dom
  • consider your data not your decor

Cheeky code samples

  • buttons
  • lists
  • sliders

<button>I'm a native</button>

    <li>Chunky bacon</li>
    <li>Boiled goose</li>

<input type="range"/>

Currently only on WebKit