PhoneGap allows developers to build native mobile apps using web technologies like HTML, CSS, and JavaScript. It works by wrapping web content in a native container on each mobile platform, allowing developers to write code once and deploy it across iOS, Android, BlackBerry, and other platforms. PhoneGap uses a plugin architecture that enables accessing native device APIs like the camera, contacts, and geolocation from JavaScript. It supports many mobile browsers and platforms, while providing tools for compiling, debugging, and deploying apps.

1. PhoneGap

3. About us
@nitobi
@brianleroux
@davejohnson

4. native vs web
This is the only cat picture, I promise.

5. PhoneGap is Native
And you write the web.

6. Supported Platforms
• iOS
• Android
• BlackBerry
• Symbian
• webOS

7. Deprecated
• Windows Mobile
• BlackBerry 4.2

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

9. Contributer Concerns
tests currently live at
http://github.com/phonegap/mobile-spec
docs can be viewed live here
http://docs.phonegap.com
issue tracker can be viewed here
http://phonegap.lighthouseapp.com
wiki we use for planning here
http://wiki.phonegap.com

10. PhoneGap Technique
1. 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.

11. PhoneGap.exec
...
}

12. iOS PhoneGap.exec
1. Init a webview
2. Establish a Native to JavaScript bridge
3. Establish a JavaScript to Native bridge

13. iOS init webview
* PhoneGapDelegate.m line 178

14. iOS Native to JS
This was what inspired the original hack!

15. iOS JS to Native

16. document.location
// I shit you not

17. Android
• Almost the same, except its the opposite.
• Also, a saga of experimentation.

18. Android webview
import android.webkit.*
* DroidGap.java

19. Android JS to Native
Old School
Ok, that part is easy! No URL hacking!

20. Unfortunately...
Nasty bug in Android 2.3 emulators caused
addJavaScriptInterface to fail...
Possibly some devices too.

21. Android JS to Native
Nu School
onJsPrompt override

22. onJsPrompt
// I shit you not

23. Android Native to JS
loadUrl
CallbackServer
The saga continues...

24. Android Native to JS
* ghetto, but it works and did work for a very long time

25. Android Native to JS
com.phonegap.CallBackServer.java

26. Android Native to JS

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

28. BlackBerry webview

29. BlackBerry webview
// you can’t make this stuff up!

30. 4.2

31. document.cookie
// I shit you not

32. BlackBerry JS to Native

33. BlackBerry Native to JS

34. Symbian Bridge
• A simple JS shim on top of WRT

35. webOS Bridge
• Another shim... but things are getting
interesting here.
• NodeJS is available as of webOS 2.0!

36. Other places
• WP7 gives us the ability to bind C# to IE.
• Bada and Qt give near full access to
WebKit.

37. Device APIs
• sensors
• data

38. Sensors
• GPS
• Network
• Camera
• Battery

39. Data
• Contacts
• Media

40. API “design”
The “standards” are a mess.
Quotes here are not ironic.

41. Browser APIs...

42. Or maybe like this?

43. Browser Persistence
APIs
• SQLite has been a complete fuck up.

44. WAC
• formerly JIL and BONDI
• a carrier consortium

45. WAC

46. Browser Media APIs
• lets not even go here..
• audio and video are horribly fucked up
• ESPECIALLY on mobile
• we fix em w/ PhoneGap tho!

47. DAP Media Capture

48. DAP System Info

49. DAP Sys Info

50. DAP API Overview
Contacts
Calendar
Media Capture
Messaging
System Info
Permissions
Gallery
App Launcher
Tasks

51. WAC API Overview
Accelerometer
Orientation
Camera
Device Status
Filesystem
Messaging
Geolocation
Contacts
Calendar
Tasks

52. Web-ish SDKs Trending..
• Symbian WRT
• HP Palm webOS
• BlackBerry WebWorks
• Samsung Bada
* PhoneGap started in 2008 btw...

53. Everyone Differentiates
And their target abstraction is JavaScript?

54. Current PhoneGap API
Accelerometer
Camera
Compass
Contacts
Device
Events
File
Geolocation
Media
Network
Notification
Storage

55. Plugins to the rescue
Clean 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.

56. Plugin Native Interface

57. Plugin JS Interface

58. Remaining work
• Discovery
• Packaging / installation
• Identity / trust

59. PhoneGap Plugins 1.0
Core
Maintained by us.
Community
Wild west!
Partner
Maintained by you; verified by us. =)

60. 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!

61. Mobile web first!
• Basics.
• Tooling.
• Libraries.

62. Basics: HTML
<button>I’m native codes!</button>

63. 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!

64. Basics: JavaScript
• Language of the web.
• Scheme with a C syntax.
• Some quirks: http://wtfjs.com

65. Basics: config.xml
• Lifted from the W3C Widget Spec
• Many variants. See rubygem ‘confetti’
• Handy for packaging metadata.
• Wtf is packaging metadata?

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

67. config.xml example

68. Tooling
• Compilers/Minifyers
• IDES
• Emulators
• Debuggers

69. Compilers/Minifiers
• YUICompressor
• Google Closure
• UglyfyJS

70. IDES
• VIM / Emacs
• Textmate
• Eclipse
• Dreamweaver

71. Emulators
• Every SDK has one. Most of them suck.
• ios-sim
• Ripple
• WebKit, eh

72. Debuggers
• WebKit nightly is your friend. Mine too.
• weinre
• console.log is supported btw

73. Libraries
• DOM
• Testing
• Style/GUI
• Persistence

74. DOM Libs
• XUI
• Zepto
• jQuery
• Dojo
• html5 mobile boilerplate?

75. Testing Libs
• QUnit
• Jasmine
• DominatorJS
• ThumbsJS

76. Style / GUI
• jquery mobile
• sencha touch
• dojo mobile
• jo

77. Persistence
• Lawnchair
• PersistJS

78. 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!