PhoneGap allows developers to write mobile apps using web technologies like HTML, CSS, and JavaScript. It works by embedding a webview browser into a native app shell, providing a bridge to access device APIs. Developers write their app code once using web standards, and PhoneGap packages it to deploy to various mobile platforms like iOS, Android, and more. It has a large community of contributors and many popular apps have been created with PhoneGap.

1. What’s PhoneGap
Why’s it Awesome
How to use it w/ Facebook

3. PhoneGap === Cordova
http://github.com/apache/incubator-cordova-*

4. PhoneGap Pattern
1. Embed a chromeless browser in a native app
2. Create a “bridge” between the browser and the native code
providing access to native APIs
3. Write a web app
4. Package the web app with the native code and deploy to devices!

6. Write once debug everywhere

9. Take note
• HTML, JS, CSS etc included in app package
• HTML loaded on file:// URI scheme, no cross domain request
restrictions
• Engineering wise, approach is simple to extend to new
platforms

10. Supported Platforms
iOS >= 3.2
Android >= 1.5
BlackBerry >= 4.6
webOS >= 1.4.5
Symbian >= 1
Windows Phone >= 7.5
Samsung Bada = 1

11. MIT/BSD/APACHE

12. Community

13. Contributors
PhoneGap
-- ohloh.net

14. Trends
PhoneGap

15. Community Stuff
800,000 30,000 40+ 50+ 800,000
downloads messages tools contributors visits/month

16. Contributors
• Adobe
• IBM
• Microsoft
• RIM
• HP/Palm
• Salesforce.com

17. Thousands of Apps

18. Users
• Alcatel-Lucent
• Zynga
• Microsoft
• Travelocity
• Vodafone
• Wikipedia

19. Traction
• ~15,000 PhoneGap apps in the App Store
• Most popular categories?
• medical
• news
• business

20. Governance

21. PhoneGap === Cordova
http://github.com/apache/incubator-cordova-*

23. Mobile first!

24. HTML(5)

25. HTML(5)

26. Setup the Viewport

27. CSS3
-webkit-transform:
translate3d(x,y,z) scale3D(1,1,1.0)

28. CSS Media Queries

29. Media Values
• all
• max-device-width: 480px
• min-device-width: 481px
• orientation: portrait
• -webkit-min-device-pixel-ration: 2

30. General Tricks
• window.devicePixelRatio

31. Startup

34. The Future
• Tooling
• WebGL
• Facebook / LinkedIn / Walmart use case
• Continue polyfilling HTML5

35. PhoneGap APIs
• Sensors
• Data
• Events
http://docs.phonegap.com

36. Tooling
• Use any IDE
• Use the platform emulators (at your peril)
• Use Ripple emulator
• Use Web Inspector Remote (Weinre)
• Console.log and alert =(

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

38. Plugins

39. How aboot some code?

40. http://tiny.cc/pg-fb

41. project resources
phonegap.com
docs.phonegap.com
wiki.phonegap.com
github.com/callback
groups.google.com/group/phonegap
#phonegap on freenode
@phonegap
@davejohnson
thanks!