Phonegap for Engineers

About us

@nitobi
@brianleroux
@davejohnson

native vs web

This is the only cat picture, I promise.

PhoneGap is Native

And you write the web.

Supported Platforms

• iOS
• Android
• BlackBerry
• Symbian
• webOS

Deprecated

• Windows Mobile
• BlackBerry 4.2

Prototype Platforms

• Bada
• Qt by way of C++ (MeeGo, desktops, etc)
• Qt by way of PySide
• Windows Phone 7
• OS X Cocoa
• Windows by way of WebKit.NET

(Other web business like Chrome App Store and Mozilla’s
Open Web apps are interesting to us.)

Contributer Concerns
tests currently live at
http://github.com/phonegap/mobile-spec
docs can be viewed live here
http://docs.phonegap.com
issue tracker can be viewed here
http://phonegap.lighthouseapp.com
wiki we use for planning here
http://wiki.phonegap.com

PhoneGap Technique

1. Instantiate a chromeless browser instance.
2. Implement PhoneGap.exec bridge code.
3. Implement native plugin code.
4. Implement your JS API by wrapping
PhoneGap.exec() into something pretty.

iOS PhoneGap.exec

1. Init a webview
2. Establish a Native to JavaScript bridge
3. Establish a JavaScript to Native bridge

iOS init webview

* PhoneGapDelegate.m line 178

iOS Native to JS

This was what inspired the original hack!

document.location
// I shit you not

Android

• Almost the same, except its the opposite.
• Also, a saga of experimentation.

Android webview

import android.webkit.*

* DroidGap.java

Android JS to Native
Old School

Ok, that part is easy! No URL hacking!

Unfortunately...

Nasty bug in Android 2.3 emulators caused
addJavaScriptInterface to fail...

Possibly some devices too.

Android JS to Native
Nu School

onJsPrompt override

Android Native to JS

loadUrl
CallbackServer

The saga continues...


* ghetto, but it works and did work for a very long time


com.phonegap.CallBackServer.java

Learnings.

• Android imp details have changed or
manifested bugs. Our interface has not!
• Never underestimate the determination of
an engineer to abandon all ‘best practices’
in light of solving a tough problem.

BlackBerry webview
// you can’t make this stuff up!

document.cookie
// I shit you not

Symbian Bridge

• A simple JS shim on top of WRT

webOS Bridge

• Another shim... but things are getting
interesting here.
• NodeJS is available as of webOS 2.0!

Other places

• WP7 gives us the ability to bind C# to IE.
• Bada and Qt give near full access to
WebKit.

Device APIs

• sensors
• data

Sensors

• GPS
• Network
• Camera
• Battery

API “design”
The “standards” are a mess.

Quotes here are not ironic.

Browser Persistence
APIs

• SQLite has been a complete fuck up.

WAC

• formerly JIL and BONDI
• a carrier consortium

Browser Media APIs

• lets not even go here..
• audio and video are horribly fucked up
• ESPECIALLY on mobile
• we ﬁx em w/ PhoneGap tho!

DAP API Overview
Contacts
Calendar
Media Capture
Messaging
System Info
Permissions
Gallery
App Launcher
Tasks

WAC API Overview
Accelerometer
Orientation
Camera
Device Status
Filesystem
Messaging
Geolocation
Contacts
Calendar
Tasks

Web-ish SDKs Trending..

• Symbian WRT
• HP Palm webOS
• BlackBerry WebWorks
• Samsung Bada
* PhoneGap started in 2008 btw...

Everyone Differentiates
And their target abstraction is JavaScript?

Current PhoneGap API
Accelerometer
Camera
Compass
Contacts
Device
Events
File
Geolocation
Media
Network
Notiﬁcation
Storage

Plugins to the rescue
Clean from an engineering perspective.
Lighter builds possible.
Adaptable for 3rd party extensions.
Portable to new platforms.
Secure only use what you need.

Override anything with JS or Native code.

Remaining work

• Discovery
• Packaging / installation
• Identity / trust

PhoneGap Plugins 1.0
Core
Maintained by us.

Community
Wild west!

Partner
Maintained by you; veriﬁed by us. =)

So, what did we learn?

• Devices tend to ship a browser.
• Additionally they have an SDK.
• Browsers have a location.

You have everything required to create a bridge!

Mobile web ﬁrst!

• Basics.
• Tooling.
• Libraries.

Basics: HTML

<button>I’m native codes!</button>

Basics: CSS3

• media queries come in handy for tablets
• many folk using precompilers these days
• opacity, rounded corners, gradients and
fucking drop shadows fuck ya!

Basics: JavaScript

• Language of the web.
• Scheme with a C syntax.
• Some quirks: http://wtfjs.com

Basics: conﬁg.xml

• Lifted from the W3C Widget Spec
• Many variants. See rubygem ‘confetti’
• Handy for packaging metadata.
• Wtf is packaging metadata?

conﬁg.xml
• specify assets for loading in various places
that might be stored in other various places.
• icon, splash screen, index.html path and js
pathing
• feature capability / security
• network restrictions security
• title, description, license, author, etc

Tooling

• Compilers/Minifyers
• IDES
• Emulators
• Debuggers

Compilers/Miniﬁers

• YUICompressor
• Google Closure
• UglyfyJS

IDES

• VIM / Emacs
• Textmate
• Eclipse
• Dreamweaver

Emulators

• Every SDK has one. Most of them suck.
• ios-sim
• Ripple
• WebKit, eh

Debuggers

• WebKit nightly is your friend. Mine too.
• weinre
• console.log is supported btw

Libraries

• DOM
• Testing
• Style/GUI
• Persistence

DOM Libs

• XUI
• Zepto
• jQuery
• Dojo
• html5 mobile boilerplate?

Testing Libs

• QUnit
• Jasmine
• DominatorJS
• ThumbsJS

Style / GUI

• jquery mobile
• sencha touch
• dojo mobile
• jo

Persistence

• Lawnchair
• PersistJS

other concerns
• toolchain setup is a pain
• phonegap/build
• competition?
• performance of webviews is terrible! my
rounded corners and css gradients tear!
• security: there is none!

Phonegap for Engineers

Related slideshows

More Related Content

What's hot

What's hot (20)

Similar to Phonegap for Engineers

Similar to Phonegap for Engineers (20)

More from Brian LeRoux

More from Brian LeRoux (9)

Recently uploaded

Recently uploaded (20)

Phonegap for Engineers

Editor's Notes