HTML5, PhoneGap and What's Next

5,885 views
5,662 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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,885
On SlideShare
0
From Embeds
0
Number of Embeds
1,667
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • saas provider, construction industry\nagile, long term strategy to move our platform to the mobile\n
  • mobile app we are developing\narchitecture\n
  • So which languages to learn?\nObjective-C is the most obvious,\nJava - each platform has a different API\nc++, silverlight, flash: no thanks\n
  • Palm sold webOS to HP\nHP fired their CEO\nAndroid bought Motorola\nHTC, Samsung and others are worried\niOS still strong but not sharing\nAmazon just forked Android and has it’s own app store.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • July 2008, App Store opens.\nNitobi - Brock Whitten, Brian LaRoux\nMacromedia, San Fransisco\n
  • July 2008, App Store opens.\nNitobi - Brock Whitten, Brian LaRoux\nMacromedia, San Fransisco\n
  • July 2008, App Store opens.\nNitobi - Brock Whitten, Brian LaRoux\nMacromedia, San Fransisco\n
  • July 2008, App Store opens.\nNitobi - Brock Whitten, Brian LaRoux\nMacromedia, San Fransisco\n
  • 2009 - works directly with Sony/Ericsson on Symbian\n\n
  • 2009 - works directly with Sony/Ericsson on Symbian\n\n
  • 2009 - works directly with Sony/Ericsson on Symbian\n\n
  • Emerging Technology Group\nassign 5 devs full time iOS, Android, BB5/6\nEnsure success\n
  • Specific plugins for clients - open sourced\nRIM guys came out for a week to work on BB 5.0\n\n
  • Very successful release\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • iOS uses the WebCore and JavascriptCore technologies\nAndroid uses Googles V8 javascript engine’\nBlackberry is very similar to iOS\nwebOS uses a custom graphics engine Piranah\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • w3c accel and compass spec are complex\ncamera ~= capture\nnavigator.network.connection.type due to android bug\nmedia needs html5 audio & video api’s\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×