1.
Cross-Platform Web
Applications With
PhoneGap
Brian LeRoux

2.
Brian LeRoux
• Nitobi Software, Vancouver
• Mostly JavaScript things

3.
Nitobi Software
• All about the web
• With an open source focus
• Consulting / support / training

4.
http://phonegap.com
• http://nitobi.com
• http://twitter.com/brianleroux
• http://brianleroux.github.com
• http://wtfjs.com
• http://crockfordfacts.com

5.
Problems
• Native apps fragmentation
• DOM libraries in mobile web apps
• Offline storage

6.
Solutions
• PhoneGap
• XUI
• Lawnchair

7.
PhoneGap
• Project philosophy
• History
• The future

8.
3.3.1

9.
Fragmentation Problem
Apple iPhone OS Objective C
Google Android Dalvik Java
RIM Blackberry J2ME Java
Nokia Symbian / MeeGo *
Palm webOS web
Windows Mobile/Phone C,C++,C# (.NET)

10.
Distribution is also
a nightmare.

11.
Cross Platform
• Write once
• Debug everywhere
• Never works...except that whole Internet thing

12.
The Web Is a First-class Dev Platform
• Access to native device APIs
• Access to device data
• Great tooling: debugging, logging, testing,
emulation,
and other instrumentation

13.
OS Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
• Maemo / MeeGo
• Windows Mobile / Phone
See http://rubyurl.com/jtNs

14.
Device APIs / Data
• Geo
• Accelerometer
• Camera / photos
• Vibration
• Contacts
• SMS / telephony
• Sound / video
• Reachability
• Magnometer
• Plus, anything a browser can do

15.
PhoneGap does not
prevent you from
augmenting with native
capabilities.

16.
PhoneGap Projects
• Have a www folder somewhere
• index.html
• Include a phonegap.js

17.
The PhoneGap Technique
• Create a browser instance
• Exec JavaScript from native code
• Exec native code from JavaScript

18.
mobile-spec

19.
Standards
• http://www.w3.org/2009/dap/
• http://dev.w3.org/html5/spec/Overview.html
• http://www.w3.org/TR/widgets/
Favouring compliance over conformance.

20.
MIT Licensed

21.
Governance
• Looking to contribute
to a foundation
• Symbian has accepted
PhoneGap/Symbian
• May create a
foundation

22.
The “Roadmap”
• PhoneGap 1.0
• PhoneGap 1.1
• PhoneGap 2.0
• Also: http://wiki.phonegap.com/Roadmap

23.
PhoneGap 1.0
• Ratified the messaging API
• Inclusion of xmpp
• Native maps
• File I/O
• Docs!

24.
PhoneGap 1.1
• Bondi APIs
• commonjs require / modules
• Samsung bada
• Notifications API
(w/ Urban Airship)

25.
PhoneGap 2.0
• More native access
• Better rendering options
• More platforms
• A pony, perhaps

26.
Handy Resources
• http://groups.google.com/group/phonegap
• http://wiki.phonegap.com
• http://twitter.com/phonegap
• #phonegap on http://irc.freenode.net

27.
Tooling / Automation
• phonegap-dev
• ./droidscript
• ibug

28.
XUI
A micro tiny JavaScript Framework

29.
Why?!?

30.
Some Reasons
• Small screens
• Limited CPU
• Limited RAM
• Limited storage
• Sketch connectivity

31.
Consider
• jQuery 40+ kb
• Dojo 25+ kb
• YUI/MooTools/Etc same difference

32.
Good Times for WebKit
• Apple iPhone OS
• Google Android OS
• Palm webOS
http://quirksmode.org/m/table.html

33.
Then, We Gave Up
• Windows Mobile is IE4 or 6/7
• Nokia Symbian is an early WebKit
• RIM Blackberry is an unholy mess

34.
Patterns Emerged

35.
XUI Was Born (2008)
• Between 2 and 3 kb
• DOM concerns only
• Chainable syntax (it was trendy)
• Conditional builds over conditional code

36.
XUI is NOT a set of GUI
controls or widgets.

37.
Selectors
// basic matches by selector
x$('div.foo');
x$('ul#global-nav li.selected');
// element literals
x$(window);
x$(document);
// lists of elements
x$('li', 'div');
// arrays even
x$(['div#foo', 'div.bar']);

38.
Chaining
// method chaining
x$('ul#nav li a:first').html('hey there').css({color:'blue'});

39.
Helpful Stuff
// helpful DOM node filtering
x$('ul li').has('ul li.selected');
x$('ul li').not('ul li.selected');
// classic iteration
x$('.book').each(function() { ... });

40.
DOM Manipulation
// DOM manipulation basics
x$('#protection').html( '<strong>for hard wood</strong>' );
// other hacky ways to hack around
x$('#title').html( 'after', '<p>B.Sc</p>' );
// implicit node creation
x$("<p id='foo'></p>").html('bar'); // <p id="foo">bar</p>
// inner, outer, top, bottom, before, after
x$('#shortcuts').bottom('make life so easy!')
// guess what this does?
x$('#iehack').remove();
// getter
var aboutUrl = x$('a.about').attr('href');
// setter
x$('a.mysite').attr('href','http://westcoastlogic.com');

41.
Styles and CSS
// Manipulate style
//
// dangerously set style properties
x$('a.fugly').css({color:'blue'});
// probably better
x$('#basic').addClass('selected');
// nice conditional callback syntax
x$('#feet').hasClass('smelly', function(){
x$(this).removeClass('stinky');
});

42.
Eventing
• click <--bad!
• load <--questionable!
• touchstart, touchmove, touchend, touchcancel
• guesturestart, guesturechange, guestureend
• orientationchange
• deviceready

43.
Special Effects
// basic animation support by way of Emile
x$('#fx').tween({background:'red', duration:1.5 });

44.
Alternatives
• Develop for Palm exclusively
• jQtouch
• Dashcode <-- Ugh! No!!
• Scroll Touch by Uxebu

45.
Emerging Techniques
• Single page apps via index.html
• Lazy eval JavaScript
• Conditional builds for JavaScript logic

46.
Lawnchair

47.
PhoneGap apps are
intrinsically offline.

48.
Going Offline
• Web apps: Cache Manifest
• Hybrid apps: Reachability API

49.
Once You Are Offline
• Cookies
• DOM storage
• SQLite
• Other hacks: flash, window.name, etc.

50.
Ghetto, Actually
• DOM Storage is key/value
only; Slightly nicer than
cookies but way lamer
name
• SQLite seems like a bad
idea: schemas, migrations,
impedance mismatch, oh
my

51.
Lawnchair Quickly
• JSON document store (not key/value)
• Designed for mobile; very light
• Clean and simple async oo API
• Adaptor pattern for store customization

52.
Pull up a Lawnchair!
var people = new Lawnchair({adaptor:'dom'});

53.
Adding Records
// Saving a document
var me = {name:'brian'};
people.save(me);
// Saving a document async
people.save({name:'frank'}, function(r) {
console.log(r);
});
// Specifying your own key
people.save({key:'whatever', name:'dracula'});

54.
Finding Records
// Get that document
people.get(me.key, function(r){
console.log(r);
});
// Returns all documents as an array to a
callback
people.all(function(r){
console.log(r);
});
// List all with shortcut syntax
people.all('console.log(r)');

55.
Removing Records
// Remove a document directly
people.get(me.key, function(r){
people.remove(me);
});
// Remove a document by key
people.save({key:'die', name:'duder'});
people.remove('die');
// Destroy all documents
people.nuke();

56.
Helpful Stuff
// Classic iteration
people.each(function(r){
console.log(r);
});
// Classic with terse shorthand syntax
people.each('console.log(r)');

57.
Searching / Finding
// Iterate documents conditionally!
// The first function is a conditional.
// The second is a callback exec on records returned by the first
people.find(
function(r) {return r.name == brian},
function(r) {console.log(r)}
);
// Iterate conditionally via shorthand
people.find('r.name == "brian"', 'console.log(r)');
// You can mix and match shorthand btw
people.find('r.name == "brian"', function(r){
console.log(r)
});

58.
Thanks!
Time for a coffee?

59.
Q &A