PhoneGap
About us@nitobi@brianleroux@davejohnson
native vs webThis is the only cat picture, I promise.
PhoneGap is Native    And you write the web.
Supported Platforms• iOS• Android• BlackBerry• Symbian• webOS
Deprecated• Windows Mobile• BlackBerry 4.2
Prototype Platforms•   Bada•   Qt by way of C++ (MeeGo, desktops, etc)•   Qt by way of PySide•   Windows Phone 7•   OS X C...
Contributer Concernstests currently live athttp://github.com/phonegap/mobile-specdocs can be viewed live herehttp://docs.p...
PhoneGap Technique1. Instantiate a chromeless browser instance.2. Implement PhoneGap.exec bridge code.3. Implement native ...
PhoneGap.exec... }
iOS PhoneGap.exec1. Init a webview2. Establish a Native to JavaScript bridge3. Establish a JavaScript to Native bridge
iOS init webview* PhoneGapDelegate.m line 178
iOS Native to JSThis was what inspired the original hack!
iOS JS to Native
document.location// I shit you not
Android• Almost the same, except its the opposite.• Also, a saga of experimentation.
Android webviewimport android.webkit.*      * DroidGap.java
Android JS to Native    Old SchoolOk, that part is easy! No URL hacking!
Unfortunately...Nasty bug in Android 2.3 emulators caused      addJavaScriptInterface to fail...       Possibly some devic...
Android JS to Native    Nu School    onJsPrompt override
onJsPrompt// I shit you not
Android Native to JS           loadUrl       CallbackServer     The saga continues...
Android Native to JS* ghetto, but it works and did work for a very long time
Android Native to JS com.phonegap.CallBackServer.java
Android Native to JS
Learnings.• Android imp details have changed or  manifested bugs. Our interface has not!• Never underestimate the determin...
BlackBerry webview
BlackBerry webview// you can’t make this stuff up!
4.2
document.cookie// I shit you not
BlackBerry JS to Native
BlackBerry Native to JS
Symbian Bridge• A simple JS shim on top of WRT
webOS Bridge• Another shim... but things are getting  interesting here.• NodeJS is available as of webOS 2.0!
Other places• WP7 gives us the ability to bind C# to IE.• Bada and Qt give near full access to  WebKit.
Device APIs• sensors• data
Sensors• GPS• Network• Camera• Battery
Data• Contacts• Media
API “design”The “standards” are a mess.Quotes here are not ironic.
Browser APIs...
Or maybe like this?
Browser Persistence       APIs• SQLite has been a complete fuck up.
WAC• formerly JIL and BONDI• a carrier consortium
WAC
Browser Media APIs• lets not even go here..• audio and video are horribly fucked up• ESPECIALLY on mobile• we fix em w/ Pho...
DAP Media Capture
DAP System Info
DAP Sys Info
DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada     * PhoneGap started in 2008 ...
Everyone Differentiates  And their target abstraction is JavaScript?
Current PhoneGap APIAccelerometerCameraCompassContactsDeviceEventsFileGeolocationMediaNetworkNotificationStorage
Plugins to the rescueClean from an engineering perspective.Lighter builds possible.Adaptable for 3rd party extensions.Port...
Plugin Native Interface
Plugin JS Interface
Remaining work• Discovery• Packaging / installation• Identity / trust
PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
So, what did we learn? • Devices tend to ship a browser. • Additionally they have an SDK. • Browsers have a location.You h...
Mobile web first!• Basics.• Tooling.• Libraries.
Basics: HTML<button>I’m native codes!</button>
Basics: CSS3• media queries come in handy for tablets• many folk using precompilers these days• opacity, rounded corners, ...
Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• ...
config.xml• specify assets for loading in various places  that might be stored in other various places.• icon, splash scree...
config.xml example
Tooling• Compilers/Minifyers• IDES• Emulators• Debuggers
Compilers/Minifiers• YUICompressor• Google Closure• UglyfyJS
IDES• VIM / Emacs• Textmate• Eclipse• Dreamweaver
Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
Debuggers• WebKit nightly is your friend. Mine too.• weinre• console.log is supported btw
Libraries• DOM• Testing• Style/GUI• Persistence
DOM Libs• XUI• Zepto• jQuery• Dojo• html5 mobile boilerplate?
Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
Style / GUI• jquery mobile• sencha touch• dojo mobile• jo
Persistence• Lawnchair• PersistJS
other concerns• toolchain setup is a pain• phonegap/build• competition?• performance of webviews is terrible! my  rounded ...
Phonegap for Engineers
Upcoming SlideShare
Loading in …5
×

Phonegap for Engineers

4,471 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,471
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
121
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Phonegap for Engineers

    1. 1. PhoneGap
    2. 2. About us@nitobi@brianleroux@davejohnson
    3. 3. native vs webThis is the only cat picture, I promise.
    4. 4. PhoneGap is Native And you write the web.
    5. 5. Supported Platforms• iOS• Android• BlackBerry• Symbian• webOS
    6. 6. Deprecated• Windows Mobile• BlackBerry 4.2
    7. 7. Prototype Platforms• Bada• Qt by way of C++ (MeeGo, desktops, etc)• Qt by way of PySide• Windows Phone 7• OS X Cocoa• Windows by way of WebKit.NET (Other web business like Chrome App Store and Mozilla’s Open Web apps are interesting to us.)
    8. 8. Contributer Concernstests currently live athttp://github.com/phonegap/mobile-specdocs can be viewed live herehttp://docs.phonegap.comissue tracker can be viewed herehttp://phonegap.lighthouseapp.comwiki we use for planning herehttp://wiki.phonegap.com
    9. 9. PhoneGap Technique1. Instantiate a chromeless browser instance.2. Implement PhoneGap.exec bridge code.3. Implement native plugin code.4. Implement your JS API by wrapping PhoneGap.exec() into something pretty.
    10. 10. PhoneGap.exec... }
    11. 11. iOS PhoneGap.exec1. Init a webview2. Establish a Native to JavaScript bridge3. Establish a JavaScript to Native bridge
    12. 12. iOS init webview* PhoneGapDelegate.m line 178
    13. 13. iOS Native to JSThis was what inspired the original hack!
    14. 14. iOS JS to Native
    15. 15. document.location// I shit you not
    16. 16. Android• Almost the same, except its the opposite.• Also, a saga of experimentation.
    17. 17. Android webviewimport android.webkit.* * DroidGap.java
    18. 18. Android JS to Native Old SchoolOk, that part is easy! No URL hacking!
    19. 19. Unfortunately...Nasty bug in Android 2.3 emulators caused addJavaScriptInterface to fail... Possibly some devices too.
    20. 20. Android JS to Native Nu School onJsPrompt override
    21. 21. onJsPrompt// I shit you not
    22. 22. Android Native to JS loadUrl CallbackServer The saga continues...
    23. 23. Android Native to JS* ghetto, but it works and did work for a very long time
    24. 24. Android Native to JS com.phonegap.CallBackServer.java
    25. 25. Android Native to JS
    26. 26. Learnings.• Android imp details have changed or manifested bugs. Our interface has not!• Never underestimate the determination of an engineer to abandon all ‘best practices’ in light of solving a tough problem.
    27. 27. BlackBerry webview
    28. 28. BlackBerry webview// you can’t make this stuff up!
    29. 29. 4.2
    30. 30. document.cookie// I shit you not
    31. 31. BlackBerry JS to Native
    32. 32. BlackBerry Native to JS
    33. 33. Symbian Bridge• A simple JS shim on top of WRT
    34. 34. webOS Bridge• Another shim... but things are getting interesting here.• NodeJS is available as of webOS 2.0!
    35. 35. Other places• WP7 gives us the ability to bind C# to IE.• Bada and Qt give near full access to WebKit.
    36. 36. Device APIs• sensors• data
    37. 37. Sensors• GPS• Network• Camera• Battery
    38. 38. Data• Contacts• Media
    39. 39. API “design”The “standards” are a mess.Quotes here are not ironic.
    40. 40. Browser APIs...
    41. 41. Or maybe like this?
    42. 42. Browser Persistence APIs• SQLite has been a complete fuck up.
    43. 43. WAC• formerly JIL and BONDI• a carrier consortium
    44. 44. WAC
    45. 45. Browser Media APIs• lets not even go here..• audio and video are horribly fucked up• ESPECIALLY on mobile• we fix em w/ PhoneGap tho!
    46. 46. DAP Media Capture
    47. 47. DAP System Info
    48. 48. DAP Sys Info
    49. 49. DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
    50. 50. WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
    51. 51. Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada * PhoneGap started in 2008 btw...
    52. 52. Everyone Differentiates And their target abstraction is JavaScript?
    53. 53. Current PhoneGap APIAccelerometerCameraCompassContactsDeviceEventsFileGeolocationMediaNetworkNotificationStorage
    54. 54. Plugins to the rescueClean from an engineering perspective.Lighter builds possible.Adaptable for 3rd party extensions.Portable to new platforms.Secure only use what you need.Override anything with JS or Native code.
    55. 55. Plugin Native Interface
    56. 56. Plugin JS Interface
    57. 57. Remaining work• Discovery• Packaging / installation• Identity / trust
    58. 58. PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
    59. 59. So, what did we learn? • Devices tend to ship a browser. • Additionally they have an SDK. • Browsers have a location.You have everything required to create a bridge!
    60. 60. Mobile web first!• Basics.• Tooling.• Libraries.
    61. 61. Basics: HTML<button>I’m native codes!</button>
    62. 62. Basics: CSS3• media queries come in handy for tablets• many folk using precompilers these days• opacity, rounded corners, gradients and fucking drop shadows fuck ya!
    63. 63. Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
    64. 64. Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?
    65. 65. config.xml• specify assets for loading in various places that might be stored in other various places.• icon, splash screen, index.html path and js pathing• feature capability / security• network restrictions security• title, description, license, author, etc
    66. 66. config.xml example
    67. 67. Tooling• Compilers/Minifyers• IDES• Emulators• Debuggers
    68. 68. Compilers/Minifiers• YUICompressor• Google Closure• UglyfyJS
    69. 69. IDES• VIM / Emacs• Textmate• Eclipse• Dreamweaver
    70. 70. Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
    71. 71. Debuggers• WebKit nightly is your friend. Mine too.• weinre• console.log is supported btw
    72. 72. Libraries• DOM• Testing• Style/GUI• Persistence
    73. 73. DOM Libs• XUI• Zepto• jQuery• Dojo• html5 mobile boilerplate?
    74. 74. Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
    75. 75. Style / GUI• jquery mobile• sencha touch• dojo mobile• jo
    76. 76. Persistence• Lawnchair• PersistJS
    77. 77. other concerns• toolchain setup is a pain• phonegap/build• competition?• performance of webviews is terrible! my rounded corners and css gradients tear!• security: there is none!

    ×