Your SlideShare is downloading. ×
HTML5, PhoneGap and What's Next
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5, PhoneGap and What's Next

5,330

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). …

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,330
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. HTML5, PhoneGap and what’s next
    • 2. web sitenameben@mobz.org twitter / github email
    • 3. bbirch@aconex.com Senior UI Engineer / Beer Baron
    • 4. Mobile App Development
    • 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. 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. 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. 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. 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. The Promise
    • 11. Write Once, Run AnywhereNative Goodies & App Store
    • 12. but first... A Bit of History
    • 13. Some dudes from Canada
    • 14. Some dudes from Canada• 2008
    • 15. Some dudes from Canada• 2008• iPhoneDevCamp
    • 16. Some dudes from Canada• 2008• iPhoneDevCamp• Working prototype with geolocation
    • 17. Some dudes from Canada• 2008• iPhoneDevCamp• Working prototype with geolocation• Hangover (probably)
    • 18. • 2008 - iPhone, Android and Blackberry 4
    • 19. • 2008 - iPhone, Android and Blackberry 4• 2009 - Symbian, webOS
    • 20. • 2008 - iPhone, Android and Blackberry 4• 2009 - Symbian, webOS • ‘Rejected’ by Apple
    • 21. • 2010• Serious Business
    • 22. • Improves consistency of API and implementations across devices• Improves test coverage and documentation
    • 23. • 1.0 released
    • 24. • 1.0 released
    • 25. • 2011• WTF Adode?!• Apache Incubator Project
    • 26. How it actually works
    • 27. How it actually works Web Tech Not Web Tech
    • 28. How it actually works Web Tech Not Web TechNative Web Control
    • 29. How it actually works Web Tech Not Web TechNative Web Control FFI
    • 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. The Native Web Control Basically just a browser...
    • 32. The Native Web Control Basically just a browser... with all the chrome removed
    • 33. The Native Web Control Basically just a browser... with all the chrome removed even the top bar
    • 34. The Native Web Control Basically just a browser... with all the chrome removed even the top bar does everything a browser does
    • 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. 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. 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. 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. 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. What the FFI?• Foreign Function Interface• aka, the Bridge• aka the Mighty Hack
    • 41. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );
    • 42. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );• PhoneGap.exec( onSuccess, onError, "com.phonegap.camera", "getPicture", [ { quality: 50 } ] );
    • 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. • 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. • 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. • 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. 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. 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. 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. 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. Aside: The ‘Gap’ Mobile OS Hardware Native API SensorsWeb App Browser Graphics NetworkJavascript DOM Browser OS API CSSResources
    • 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. Plugins• All API features are plugins• Common Plugins • Good support across platforms• Custom Plugins • Terrible support across platforms • Make your own!
    • 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. 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. Audio/Video
    • 57. Sensors
    • 58. Notification
    • 59. Connection
    • 60. Custom Plugins• Application Preferences• Barcode Scanner• Clipboard• InAppPurchaseManager• Keychain• NativeControl• Bluetooth
    • 61. PhoneGap Demo
    • 62. Debugging - weinre
    • 63. PhoneGap Roadmap• 1.x ( 2011) • performance, ease of use improvements • further w3c spec compliance• 2.x ( 2012 ) • Calendar, Messaging, Bluetooth, Audio/Video
    • 64. Improved Device Support
    • 65. Improved Device Support
    • 66. Improved Device Support
    • 67. Improved Device Support
    • 68. Improved Device Support
    • 69. Improved Device Support
    • 70. Improved Device Support
    • 71. Improved Device Support
    • 72. Improved Device Support
    • 73. web sitenameben@mobz.org twitter / github email

    ×