Presentation I gave at Palm Developer Day. Skip to Slide 5 for the good stuff. ;D

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