This document summarizes Brian LeRoux's presentation about building cross-platform web applications with PhoneGap. PhoneGap allows developers to write mobile apps using web technologies like HTML, CSS, and JavaScript and then compile them into native applications for various mobile platforms. This avoids issues like platform fragmentation and provides access to device APIs. PhoneGap uses a technique where it creates a browser instance and allows JavaScript to access native device functions. It supports platforms like iOS, Android, Blackberry and others. The document also discusses related tools like XUI, a small JavaScript framework optimized for mobile, and Lawnchair, a lightweight JSON document store designed for data persistence in offline mobile apps.

2. Cross-Platform Web
Applications With
PhoneGap
Brian LeRoux

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

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

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

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

8. Solutions
• PhoneGap
• XUI
• Lawnchair

9. PhoneGap
• Project philosophy
• History
• The future

10. 3.3.1

11. 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)

12. Distribution is also
a nightmare.

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

14. 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

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

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

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

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

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

20. mobile-spec

21. 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.

22. MIT Licensed

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

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

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

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

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

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

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

31. XUI
A micro tiny JavaScript Framework

32. Why?!?

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

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

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

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

37. Patterns Emerged

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

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

40. 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']);

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

42. 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() { ... });

43. 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');

44. 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');
});

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

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

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

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

49. Lawnchair

50. PhoneGap apps are
intrinsically offline.

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

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

53. 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

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

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

56. 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'});

57. 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)');

58. 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();

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

60. 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)
});

61. Thanks!
Time for a coffee?

62. Q &A