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.

1. HTML5, PhoneGap
and what’s next

2. web site
name
ben@mobz.org
twitter / github
email

3. bbirch@aconex.com
Senior UI Engineer / Beer Baron

4. Mobile App Development

5. The Problem
Apple iOS Objective-C
HTC, 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

9. Web vs Native
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
App Portability High None
Performance Fast Very Fast
Native Functionality No All
App Store Distribution No Yes
Extensible No Yes

10. 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 All
App Store Distribution No Yes Yes
Extensible No Yes Yes

11. The Promise

12. Write Once, Run Anywhere
Native Goodies & App Store

13. but first...
A Bit of History

14. Some dudes from Canada

15. Some dudes from Canada
• 2008

16. Some dudes from Canada
• 2008
• iPhoneDevCamp

17. Some dudes from Canada
• 2008
• iPhoneDevCamp
• Working prototype with geolocation

18. Some dudes from Canada
• 2008
• iPhoneDevCamp
• Working prototype with geolocation
• Hangover (probably)

20. • 2008 - iPhone, Android and Blackberry 4

21. • 2008 - iPhone, Android and Blackberry 4
• 2009 - Symbian, webOS

22. • 2008 - iPhone, Android and Blackberry 4
• 2009 - Symbian, webOS
• ‘Rejected’ by Apple

23. • 2010
• Serious Business

24. • Improves consistency of API and implementations across devices
• Improves test coverage and documentation

25. • 1.0 released

26. • 1.0 released

27. • 2011
• WTF Adode?!
• Apache Incubator Project

29. How it actually works

30. How it actually works
Web Tech Not Web Tech

31. How it actually works
Web Tech Not Web Tech
Native Web
Control

32. How it actually works
Web Tech Not Web Tech
Native Web
Control FFI

33. How it actually works
Web Tech Not Web Tech
Common Plugins
Accelerometer
Camera
Capture
Connection
Contacts
Native Web File
Geolocation
Control FFI Notification
Storage ...
Custom Plugins
Badge
Barcode Scanner
Bluetooth
InAppPurchaseManager...

34. The Native Web Control
Basically just a browser...

35. The Native Web Control
Basically just a browser...
with all the chrome removed

36. The Native Web Control
Basically just a browser...
with all the chrome removed
even the top bar

37. The Native Web Control
Basically just a browser...
with all the chrome removed
even the top bar
does everything a browser does

38. 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

39. 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
WebCore
JavascriptCore

40. 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
WebCore
JavascriptCore

41. 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
WebCore
JavascriptCore

42. How it actually works
Web Tech Not Web Tech
Common Plugins
Accelerometer
Camera
Capture
Connection
Contacts
Native Web File
Geolocation
Control FFI Notification
Storage ...
Custom Plugins
Badge
Barcode Scanner
Bluetooth
InAppPurchaseManager...

43. What the FFI?
• Foreign Function Interface
• aka, the Bridge
• aka the Mighty Hack

45. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );

46. • navigator.camera.getPicture( onSuccess, onError, { quality: 50 } );
• PhoneGap.exec( onSuccess, onError,
"com.phonegap.camera", "getPicture", [ { quality: 50 } ] );

47. • 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

48. • 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>

49. • 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” } )

50. • 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” )

51. 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

52. How it actually works
Web Tech Not Web Tech
Common Plugins
Accelerometer
Camera
Capture
Connection
Contacts
Native Web File
Geolocation
Control FFI Notification
Storage ...
Custom Plugins
Badge
Barcode Scanner
Bluetooth
InAppPurchaseManager...

53. Accessing Native APIs
PhoneGap Web App Mobile OS Hardware
Native API Sensors
Web App PhoneGap Plugins Graphics
FFI OS API Network
Javascript
DOM
CSS
Resources
Native Web View
Browser OS API

54. Aside: The ‘Gap’
PhoneGap Web App Mobile OS Hardware
Native API Sensors
Web App PhoneGap Plugins Graphics
The ‘Gap’
FFI OS API Network
Javascript
DOM
CSS
Resources
Native Web View
Browser OS API

55. Aside: The ‘Gap’
Mobile OS Hardware
Native API Sensors
Web App Browser Graphics
Network
Javascript
DOM
Browser OS API
CSS
Resources

56. Aside: The ‘Gap’
Mobile OS Hardware
Native API Sensors
Web App “The Browsergoal
secondof PhoneGap is Graphics
Network
Javascript for the project to cease to exist”
DOM
Browser OS API
CSS • Use W3C Published standards where available
Resources • Provide a reference implementation

57. Plugins
• All API features are plugins
• Common Plugins
• Good support across platforms
• Custom Plugins
• Terrible support across platforms
• Make your own!

58. W3C Compatible Spec Status
Accelerometer 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

59. 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 Yes
Connection 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 Spec
Notification Yes Yes 4.6 Yes Yes Yes Yes
Storage Yes Yes 6.0 Yes Yes

61. Audio/Video

62. Sensors

63. Notification

64. Connection

65. Custom Plugins
• Application Preferences
• Barcode Scanner
• Clipboard
• InAppPurchaseManager
• Keychain
• NativeControl
• Bluetooth

66. PhoneGap Demo

67. Debugging -
weinre

68. PhoneGap Roadmap
• 1.x ( 2011)
• performance, ease of use improvements
• further w3c spec compliance
• 2.x ( 2012 )
• Calendar, Messaging, Bluetooth, Audio/Video

69. Improved Device Support

70. Improved Device Support

71. Improved Device Support

72. Improved Device Support

73. Improved Device Support

74. Improved Device Support

75. Improved Device Support

76. Improved Device Support

77. Improved Device Support

79. web site
name
ben@mobz.org
twitter / github
email