Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5, PhoneGap and What's Next

7,663 views

Published on

If this year is all about the mobile space maturing, then your web skills are where it’s at and a key player is PhoneGap, which supercharges your code and gets you into the app store(s).

We look at one small framework’s journey from birth at a 2 day hacking event to become the preeminent method for distributing packaged web apps on mobile devices. We will have a look at the all the goodies that PhoneGap provides, then peek inside and see how it integrates with the web stack. We will explore some of the pain points and work arounds. Then, we take a quick pass through the community and resources available. Finally, we finishing up with a look at where PhoneGap is going and explore the interesting places your web dev skills could take you in the next 12 months.

Published in: Technology
  • Be the first to comment

HTML5, PhoneGap and What's Next

  1. 1. HTML5, PhoneGap and what’s next
  2. 2. web sitenameben@mobz.org twitter / github email
  3. 3. bbirch@aconex.com Senior UI Engineer / Beer Baron
  4. 4. Mobile App Development
  5. 5. The Problem Apple iOS Objective-CHTC, Samsung Android Java Others RIM Blackberry OS 4 Java Several WinPhone 7 VB.NET / Silverlight Nokia Symbian C++ Java Flash? Palm webOS Javascript
  6. 6. The Soap Opera Apple iOS Objective-C Motorola Android Java Lots More RIM Blackberry OS 5+ C++ ?Nokia, Others WinMobile7.5 VB.NET / Silverlight ? Symbian C++ Java Flash? HP webOS Javascript
  7. 7. The Soap Opera Apple iOS Objective-C Motorola Android Java Lots More RIM Blackberry OS 5+ C++ ?Nokia, Others WinMobile7.5 VB.NET / Silverlight ? Symbian C++ Java Flash? HP webOS Javascript
  8. 8. Web vs Native Web Native Dev Cost Reasonable Expensive Dev Time Short Long App Portability High None Performance Fast Very Fast Native Functionality No AllApp Store Distribution No Yes Extensible No Yes
  9. 9. Web vs Hybrid vs Native Web Hybrid Native Dev Cost Reasonable Reasonable Expensive Dev Time Short Short Long App Portability High High None Performance Fast Fast Very Fast Native Functionality No Yes AllApp Store Distribution No Yes Yes Extensible No Yes Yes
  10. 10. The Promise
  11. 11. Write Once, Run AnywhereNative Goodies & App Store
  12. 12. but first... A Bit of History
  13. 13. Some dudes from Canada
  14. 14. Some dudes from Canada• 2008
  15. 15. Some dudes from Canada• 2008• iPhoneDevCamp
  16. 16. Some dudes from Canada• 2008• iPhoneDevCamp• Working prototype with geolocation
  17. 17. Some dudes from Canada• 2008• iPhoneDevCamp• Working prototype with geolocation• Hangover (probably)
  18. 18. • 2008 - iPhone, Android and Blackberry 4
  19. 19. • 2008 - iPhone, Android and Blackberry 4• 2009 - Symbian, webOS
  20. 20. • 2008 - iPhone, Android and Blackberry 4• 2009 - Symbian, webOS • ‘Rejected’ by Apple
  21. 21. • 2010• Serious Business
  22. 22. • Improves consistency of API and implementations across devices• Improves test coverage and documentation
  23. 23. • 1.0 released
  24. 24. • 1.0 released
  25. 25. • 2011• WTF Adode?!• Apache Incubator Project
  26. 26. How it actually works
  27. 27. How it actually works Web Tech Not Web Tech
  28. 28. How it actually works Web Tech Not Web TechNative Web Control
  29. 29. How it actually works Web Tech Not Web TechNative Web Control FFI
  30. 30. How it actually works Web Tech Not Web Tech Common Plugins Accelerometer Camera Capture Connection ContactsNative Web File Geolocation Control FFI Notification Storage ... Custom Plugins Badge Barcode Scanner Bluetooth InAppPurchaseManager...
  31. 31. The Native Web Control Basically just a browser...
  32. 32. The Native Web Control Basically just a browser... with all the chrome removed
  33. 33. The Native Web Control Basically just a browser... with all the chrome removed even the top bar
  34. 34. The Native Web Control Basically just a browser... with all the chrome removed even the top bar does everything a browser does
  35. 35. Uses Platforms Native Control iOS Android Blackberry webOS Symbian WebKit 532.9 WebKit WebKit WebKit WebKit WebCore with V8 with Piranah S60 or Qt?JavascriptCore
  36. 36. Uses Platforms Native Control iOS Android Blackberry webOS Symbian WinPhone 7.0 WebKit 532.9 WebKit WebKit WebKit with V8 WebKit with Piranah S60 or Qt? IE 7 WebCoreJavascriptCore
  37. 37. Uses Platforms Native Control iOS Android Blackberry webOS Symbian WinPhone 7.5 WebKit 532.9 WebKit WebKit WebKit with V8 WebKit with Piranah S60 or Qt? IE 9 WebCoreJavascriptCore
  38. 38. Uses Platforms Native Control iOS Android Blackberry webOS Symbian WinPhone 7.5 WebKit 532.9 WebKit WebKit WebKit with V8 WebKit with Piranah S60 or Qt? IE 9 WebCoreJavascriptCore
  39. 39. How it actually works Web Tech Not Web Tech Common Plugins Accelerometer Camera Capture Connection ContactsNative Web File Geolocation Control FFI Notification Storage ... Custom Plugins Badge Barcode Scanner Bluetooth InAppPurchaseManager...
  40. 40. What the FFI?• Foreign Function Interface• aka, the Bridge• aka the Mighty Hack
  41. 41. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );
  42. 42. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );
  43. 43. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );• gap://4132@com.phonegap.camera.getPicture/123/?%7B%22quality%22%3A50%7D
  44. 44. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );• gap://4132@com.phonegap.camera.getPicture/123/?%7B%22quality%22%3A50%7D• <iframe src=”gap://...” style=”display: none”></iframe>
  45. 45. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );• gap://4132@com.phonegap.camera.getPicture/123/?%7B%22quality%22%3A50%7D• <iframe src=”gap://...” style=”display: none”></iframe>• PhoneGap.callbackSuccess( 123, { message: “file://.../tmp/1.jpg” } )
  46. 46. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );• gap://4132@com.phonegap.camera.getPicture/123/?%7B%22quality%22%3A50%7D• <iframe src=”gap://...” style=”display: none”></iframe>• PhoneGap.callbackSuccess( 123, { message: “file://.../tmp/1.jpg” } )• onSuccess( “file://.../tmp/1.jpg” )
  47. 47. The Two Commandments• bring unto me your data, as long as it can be stringified• Let no API method exist unless it doth require a callback
  48. 48. How it actually works Web Tech Not Web Tech Common Plugins Accelerometer Camera Capture Connection ContactsNative Web File Geolocation Control FFI Notification Storage ... Custom Plugins Badge Barcode Scanner Bluetooth InAppPurchaseManager...
  49. 49. Accessing Native APIs PhoneGap Web App Mobile OS Hardware Native API SensorsWeb App PhoneGap Plugins Graphics FFI OS API NetworkJavascript DOM CSSResources Native Web View Browser OS API
  50. 50. Aside: The ‘Gap’ PhoneGap Web App Mobile OS Hardware Native API SensorsWeb App PhoneGap Plugins Graphics The ‘Gap’ FFI OS API NetworkJavascript DOM CSSResources Native Web View Browser OS API
  51. 51. Aside: The ‘Gap’ Mobile OS Hardware Native API SensorsWeb App Browser Graphics NetworkJavascript DOM Browser OS API CSSResources
  52. 52. Aside: The ‘Gap’ Mobile OS Hardware Native API SensorsWeb App “The Browsergoal secondof PhoneGap is Graphics NetworkJavascript for the project to cease to exist” DOM Browser OS API CSS • Use W3C Published standards where availableResources • Provide a reference implementation
  53. 53. Plugins• All API features are plugins• Common Plugins • Good support across platforms• Custom Plugins • Terrible support across platforms • Make your own!
  54. 54. W3C Compatible Spec StatusAccelerometer No Working Draft Camera Complex Capture Yes Working Draft Compass No Working Draft Connection Almost Working Draft Contacts Yes Last Call Device Events File Yes Working Draft Geolocation Yes Candidate Recommendation Media No Last Call Notification No Working Draft Storage Yes Last Call / Retired
  55. 55. iOS Android BlackBerry WinPhone Bada Symbian webOS Acceler Yes Yes 5.0 Yes Yes Yes Camera Yes Yes 5.0 Yes Yes Yes Yes Capture Yes Yes 5.0 Yes Compass Yes Yes Yes Yes Yes YesConnection Yes Yes 5.0 Yes Yes Yes Contacts Yes Yes 5.0 Yes Yes Device Yes Yes 5.0 Yes Yes Yes Yes Events Yes Yes 5.0 Minimal Minimal Yes Minimal File Yes Yes 5.0 Yes Yes Geo Yes Yes 4.6 Yes Yes Yes Yes Media Yes Yes Yes Non SpecNotification Yes Yes 4.6 Yes Yes Yes Yes Storage Yes Yes 6.0 Yes Yes
  56. 56. Audio/Video
  57. 57. Sensors
  58. 58. Notification
  59. 59. Connection
  60. 60. Custom Plugins• Application Preferences• Barcode Scanner• Clipboard• InAppPurchaseManager• Keychain• NativeControl• Bluetooth
  61. 61. PhoneGap Demo
  62. 62. Debugging - weinre
  63. 63. PhoneGap Roadmap• 1.x ( 2011) • performance, ease of use improvements • further w3c spec compliance• 2.x ( 2012 ) • Calendar, Messaging, Bluetooth, Audio/Video
  64. 64. Improved Device Support
  65. 65. Improved Device Support
  66. 66. Improved Device Support
  67. 67. Improved Device Support
  68. 68. Improved Device Support
  69. 69. Improved Device Support
  70. 70. Improved Device Support
  71. 71. Improved Device Support
  72. 72. Improved Device Support
  73. 73. web sitenameben@mobz.org twitter / github email

×