• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,648
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
118
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
  • \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

Transcript

  • 1. PhoneGap
  • 2. About us@nitobi@brianleroux@davejohnson
  • 3. native vs webThis is the only cat picture, I promise.
  • 4. PhoneGap is Native And you write the web.
  • 5. Supported Platforms• iOS• Android• BlackBerry• Symbian• webOS
  • 6. Deprecated• Windows Mobile• BlackBerry 4.2
  • 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. 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. 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. PhoneGap.exec... }
  • 11. iOS PhoneGap.exec1. Init a webview2. Establish a Native to JavaScript bridge3. Establish a JavaScript to Native bridge
  • 12. iOS init webview* PhoneGapDelegate.m line 178
  • 13. iOS Native to JSThis was what inspired the original hack!
  • 14. iOS JS to Native
  • 15. document.location// I shit you not
  • 16. Android• Almost the same, except its the opposite.• Also, a saga of experimentation.
  • 17. Android webviewimport android.webkit.* * DroidGap.java
  • 18. Android JS to Native Old SchoolOk, that part is easy! No URL hacking!
  • 19. Unfortunately...Nasty bug in Android 2.3 emulators caused addJavaScriptInterface to fail... Possibly some devices too.
  • 20. Android JS to Native Nu School onJsPrompt override
  • 21. onJsPrompt// I shit you not
  • 22. Android Native to JS loadUrl CallbackServer The saga continues...
  • 23. Android Native to JS* ghetto, but it works and did work for a very long time
  • 24. Android Native to JS com.phonegap.CallBackServer.java
  • 25. Android Native to JS
  • 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. BlackBerry webview
  • 28. BlackBerry webview// you can’t make this stuff up!
  • 29. 4.2
  • 30. document.cookie// I shit you not
  • 31. BlackBerry JS to Native
  • 32. BlackBerry Native to JS
  • 33. Symbian Bridge• A simple JS shim on top of WRT
  • 34. webOS Bridge• Another shim... but things are getting interesting here.• NodeJS is available as of webOS 2.0!
  • 35. Other places• WP7 gives us the ability to bind C# to IE.• Bada and Qt give near full access to WebKit.
  • 36. Device APIs• sensors• data
  • 37. Sensors• GPS• Network• Camera• Battery
  • 38. Data• Contacts• Media
  • 39. API “design”The “standards” are a mess.Quotes here are not ironic.
  • 40. Browser APIs...
  • 41. Or maybe like this?
  • 42. Browser Persistence APIs• SQLite has been a complete fuck up.
  • 43. WAC• formerly JIL and BONDI• a carrier consortium
  • 44. WAC
  • 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. DAP Media Capture
  • 47. DAP System Info
  • 48. DAP Sys Info
  • 49. DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
  • 50. WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
  • 51. Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada * PhoneGap started in 2008 btw...
  • 52. Everyone Differentiates And their target abstraction is JavaScript?
  • 53. Current PhoneGap APIAccelerometerCameraCompassContactsDeviceEventsFileGeolocationMediaNetworkNotificationStorage
  • 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. Plugin Native Interface
  • 56. Plugin JS Interface
  • 57. Remaining work• Discovery• Packaging / installation• Identity / trust
  • 58. PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
  • 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. Mobile web first!• Basics.• Tooling.• Libraries.
  • 61. Basics: HTML<button>I’m native codes!</button>
  • 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. Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
  • 64. Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?
  • 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. config.xml example
  • 67. Tooling• Compilers/Minifyers• IDES• Emulators• Debuggers
  • 68. Compilers/Minifiers• YUICompressor• Google Closure• UglyfyJS
  • 69. IDES• VIM / Emacs• Textmate• Eclipse• Dreamweaver
  • 70. Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
  • 71. Debuggers• WebKit nightly is your friend. Mine too.• weinre• console.log is supported btw
  • 72. Libraries• DOM• Testing• Style/GUI• Persistence
  • 73. DOM Libs• XUI• Zepto• jQuery• Dojo• html5 mobile boilerplate?
  • 74. Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
  • 75. Style / GUI• jquery mobile• sencha touch• dojo mobile• jo
  • 76. Persistence• Lawnchair• PersistJS
  • 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!