Palm Developer Day PhoneGap

5,538 views

Published on

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

Published in: Technology
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total views
5,538
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
181
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide































































  • 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

    ×