Palm Developer Day PhoneGap

5,545 views

Published on

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

Published in: Technology

Palm Developer Day PhoneGap

  1. 1. Cross-Platform Web Applications With PhoneGap Brian LeRoux
  2. 2. Brian LeRoux • Nitobi Software, Vancouver • Mostly JavaScript things
  3. 3. Nitobi Software • All about the web • With an open source focus • Consulting / support / training
  4. 4. http://phonegap.com • http://nitobi.com • http://twitter.com/brianleroux • http://brianleroux.github.com • http://wtfjs.com • http://crockfordfacts.com
  5. 5. Problems • Native apps fragmentation • DOM libraries in mobile web apps • Offline storage
  6. 6. Solutions • PhoneGap • XUI • Lawnchair
  7. 7. PhoneGap • Project philosophy • History • The future
  8. 8. 3.3.1
  9. 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. 10. Distribution is also a nightmare.
  11. 11. Cross Platform • Write once • Debug everywhere • Never works...except that whole Internet thing
  12. 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. 13. OS Support • Apple iPhone • Google Android • RIM Blackberry • Palm webOS • Symbian • Maemo / MeeGo • Windows Mobile / Phone See http://rubyurl.com/jtNs
  14. 14. Device APIs / Data • Geo • Accelerometer • Camera / photos • Vibration • Contacts • SMS / telephony • Sound / video • Reachability • Magnometer • Plus, anything a browser can do
  15. 15. PhoneGap does not prevent you from augmenting with native capabilities.
  16. 16. PhoneGap Projects • Have a www folder somewhere • index.html • Include a phonegap.js
  17. 17. The PhoneGap Technique • Create a browser instance • Exec JavaScript from native code • Exec native code from JavaScript
  18. 18. mobile-spec
  19. 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. 20. MIT Licensed
  21. 21. Governance • Looking to contribute to a foundation • Symbian has accepted PhoneGap/Symbian • May create a foundation
  22. 22. The “Roadmap” • PhoneGap 1.0 • PhoneGap 1.1 • PhoneGap 2.0 • Also: http://wiki.phonegap.com/Roadmap
  23. 23. PhoneGap 1.0 • Ratified the messaging API • Inclusion of xmpp • Native maps • File I/O • Docs!
  24. 24. PhoneGap 1.1 • Bondi APIs • commonjs require / modules • Samsung bada • Notifications API (w/ Urban Airship)
  25. 25. PhoneGap 2.0 • More native access • Better rendering options • More platforms • A pony, perhaps
  26. 26. Handy Resources • http://groups.google.com/group/phonegap • http://wiki.phonegap.com • http://twitter.com/phonegap • #phonegap on http://irc.freenode.net
  27. 27. Tooling / Automation • phonegap-dev • ./droidscript • ibug
  28. 28. XUI A micro tiny JavaScript Framework
  29. 29. Why?!?
  30. 30. Some Reasons • Small screens • Limited CPU • Limited RAM • Limited storage • Sketch connectivity
  31. 31. Consider • jQuery 40+ kb • Dojo 25+ kb • YUI/MooTools/Etc same difference
  32. 32. Good Times for WebKit • Apple iPhone OS • Google Android OS • Palm webOS http://quirksmode.org/m/table.html
  33. 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. 34. Patterns Emerged
  35. 35. XUI Was Born (2008) • Between 2 and 3 kb • DOM concerns only • Chainable syntax (it was trendy) • Conditional builds over conditional code
  36. 36. XUI is NOT a set of GUI controls or widgets.
  37. 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. 38. Chaining // method chaining x$('ul#nav li a:first').html('hey there').css({color:'blue'});
  39. 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. 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. 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. 42. Eventing • click <--bad! • load <--questionable! • touchstart, touchmove, touchend, touchcancel • guesturestart, guesturechange, guestureend • orientationchange • deviceready
  43. 43. Special Effects // basic animation support by way of Emile x$('#fx').tween({background:'red', duration:1.5 });
  44. 44. Alternatives • Develop for Palm exclusively • jQtouch • Dashcode <-- Ugh! No!! • Scroll Touch by Uxebu
  45. 45. Emerging Techniques • Single page apps via index.html • Lazy eval JavaScript • Conditional builds for JavaScript logic
  46. 46. Lawnchair
  47. 47. PhoneGap apps are intrinsically offline.
  48. 48. Going Offline • Web apps: Cache Manifest • Hybrid apps: Reachability API
  49. 49. Once You Are Offline • Cookies • DOM storage • SQLite • Other hacks: flash, window.name, etc.
  50. 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. 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. 52. Pull up a Lawnchair! var people = new Lawnchair({adaptor:'dom'});
  53. 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. 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. 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. 56. Helpful Stuff // Classic iteration people.each(function(r){     console.log(r); }); // Classic with terse shorthand syntax people.each('console.log(r)');
  57. 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. 58. Thanks! Time for a coffee?
  59. 59. Q &A

×