HTML5 is the Future of MobilePhoneGap Takes You there Today          Where 2.0 2011
Schedule•   Overview•   What is PhoneGap?•   How to write apps•   Community•   API overview•   How to extend PhoneGap•   T...
@davejohnson  I’m Canadian eh.
Why am I @ Where?• Desperate for speakers?• @brady felt sorry for us?
Why am I @ Where?
Why am I @ Where?• Geo APIs are available in mobile phone  browsers via HTML5
Why am I @ Where?• Geo APIs are available in mobile phone  browsers via HTML5• Phones are the most ubiquitous geo  platform
Why am I @ Where?• Geo APIs are available in mobile phone  browsers via HTML5• Phones are the most ubiquitous geo  platfor...
PhoneGap
Worldwide Smartphone Sales November 2010                               Symbian             2%3%              2%           ...
What is PhoneGap?
PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and   the native cod...
Write once debug everywhere
Supported PlatformsiOS >= 3.2Android >= 1.5BlackBerry >= 4.6webOS >= 1.4.5Symbian >= 1
Lay of the LandiOS .............................. Objective CAndroid ...................... Java ‘Harmony’ / C++BlackBerry...
Deprecated
Prototype PlatformsSamsung BadaQt by way of C++ (MeeGo, desktops, etc)Qt by way of PySideWindows Phone 7OS X CocoaWindows ...
MIT/BSD/APACHE
Release Roadmap• 0.9.5 March... uuh• 0.9.6 April... uuh• 1.0 May/June... it’s open source come on!!           http://wiki....
1.0 Roadmap   pluggable
2.0
Fascinating Year Ahead• BlackBerry WebWorks Playbook• HPalm webOS TouchPad• Gazillions of Android Tablets• TVs and Cars ar...
How do you write PhoneGap apps?
Mobile web first!• Basics.• Tooling.• Libraries.
Basics: HTML<button>I’m native codes!</button>
Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=n...
Basics: CSS3• Media queries come in handy for tablets• Many folk using precompilers these days• Opacity, rounded corners, ...
CSS3 Animations-webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
Media Query
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media...
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media...
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media...
Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
Startupdocument.addEventListener(  ‘deviceready’,  function() {     alert(‘WINNING!’);  },  false);
Performance• Use those CSS transforms!• Don’t set style properties inside a loop!• Don’t do what you do on the web!
Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• ...
config.xml example
<!DOCTYPE html><html> <head>  <title>Vanilla</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0...
Will PhoneGap work on my Chumby?
Can you put PhoneGap  apps in the App Store /Android Market / whatever?
Clear as Mud
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS• NO CROSS...
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS• NO CROSS...
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS• NO CROSS...
Our Community
Contributors       -- ohloh.net
Community by Numbers 400,000     20,000     40+       50+          435,000 downloads   messages   tools   contributors   v...
Thousands of Apps
Partners / Contributors•   Nitobi•   IBM•   Sony Ericsson•   Symbian•   Palm•   RIM•   Sencha
Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• Ars Technica
Governance• http://phonegap.lighthouseapp.com  (migrating to github today!)• http://wiki.phonegap.com/roadmap-planning• It...
Who dreamed up the PhoneGap APIs?
PhoneGap APIs• Sensors• Data• Events        http://docs.phonegap.com
Sensors• GPS• Accelerometer• Compass• Network• Camera
Data• Contacts• Media• File system• Notifications
Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
W3C•   dev.w3.org/geo    •   geolocation + deviceorientation +        devicemotion•   dev.w3.org/dap (device apis and poli...
HTML5• <canvas>             • Cache manifest• <audio>              • postMessage• <video>              • Web SQL• Drag and...
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 (atte...
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?
We will too ...
How do I extend  PhoneGap?
Plugins to the rescueClean from an engineering perspective.Lighter builds possible.Adaptable for 3rd party extensions.Port...
Remaining work• Discovery• Packaging / installation• Identity / trust
PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
Plugins • Push notifications • Ads • Analytics • Barcode scanning • Facebook Connecthttp://github.com/phonegap/phonegap-plu...
What tooling is  available?
Compilers / Minifiers• YUICompressor• Google Closure• UglyfyJS
IDES• Textmate (PhoneGap bundle)• Eclipse (AppLaud plugin for Android)• Dreamweaver (CS 5.5)
Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
Debuggers• WebKit nightly is your friend. Mine too.• Weinre
HTML5 Debugging• console.log is supported btw• so is alert ...
What libraries are   available?
DOM Libs• XUI• Zepto• jQuery• Dojo
Canvas Game Libs• PropulsionJS• EaselJS• GameJS• CraftyJS• LimeJS• jGen
Style / GUI Libs• jQuery Mobile• Sencha Touch• Dojo Mobile• Jo• GloveBox• Ekiben
Persistence Libs• Lawnchair• StorageJS• PersistJS
Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
Web VS Native?   http://www.flickr.com/photos/40336611@N08/3705419486/sizes/z/
The Web is Native
“We could probably save 70% of ourdevelopment budget by switching to a single, cross-platform client, but wewould probably...
“97.25% of statistics are wrong”                 -- Anonymous
“we’d be shut out of most app stores and go back toworrying about distribution.”              -- Phil Libin again
“huh?”     -- Me
Can you put PhoneGap  apps in the App Store /Android Market / whatever?
$12,000,000,000
What would Reed say?
“Are you fucking        crazy!?!?!”-- Maybe Reed Hastings, Netflix CEO would say this
Why are they using it?
Skills reuse
Time to market
Less code
Less code
App updates
A/B Testing
Building for hundreds    of devices!!1!1http://functionsource.com/post/netflix-feature
No shit.
Can the Web feel Native?
“What you call love was invented by guyslike me to sell nylons”         -- Don Draper, Mad Men
“Be the needlenot the haystack”      -- Don Draper, Mad Men
Games?
Need more examples?
PhoneGap/Build
http://build.phonegap.com
What do you want punk?
What do you want punk?• Write once run on 5+ platforms
What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS
What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based ...
What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based ...
What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based ...
What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based ...
project resources                    phonegap.com                    docs.phonegap.com                    wiki.phonegap.co...
Contributor Concernstests currently live athttp://github.com/phonegap/mobile-specdocs can be viewed live herehttp://docs.p...
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
Upcoming SlideShare
Loading in...5
×

HTML5 is the Future of Mobile, PhoneGap Takes You There Today

26,942

Published on

Published in: Technology
7 Comments
73 Likes
Statistics
Notes
No Downloads
Views
Total Views
26,942
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
1,696
Comments
7
Likes
73
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • This is a self portrait of me fighting a black beary\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The whole impetus for PhoneGap was the fact that in 2008 we saw growing fragmentation of the smartphone market. It has not gotten any better.\nHow many people here own a Symbian phone? Symbian will be split up between Android and WP7 according to gartner.\n
  • \n
  • PhoneGap is a free and open source framework that enables developers to write cross platform native mobile applications.\n
  • \n
  • This approach lets you write once run anywhere\n
  • \n
  • \n
  • \n
  • \n
  • Windows Mobile\nBB &lt; 4.6\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • We achieve cross platform development through neither magic nor the force, but through HTML, JavaScript and CSS.\n
  • A lot of people like to call this HTML5 for lack of a better term.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • More includes means slower startup. Reduce your HTML, CSS and JS!\n
  • \n
  • specify assets for loading in various places that might be stored in other various places.\nicon, splash screen, index.html path and js pathing\nfeature capability / security\nnetwork restrictions security\ntitle, description, license, author, etc\n
  • Bring it all together\n
  • \n
  • Sure but why do you own a chumby anyhow? In all seriousness it could work on Chumby if it wasn&amp;#x2019;t flash based :/\n
  • When I said that PhoneGap apps were &amp;#x201C;native&amp;#x201D; before I wasn&amp;#x2019;t kidding.\n
  • Do bears shit in the woods\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Guess which line represents the phonegap project?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • PhoneGap is unique in that it is exposing native APIs in JavaScript according to ... standards\n
  • \n
  • \n
  • \n
  • \n
  • For better or worse we follow the W3C\n
  • Since we are browser based, we get to take advantage of the wonders of HTML5 ... sadly this is not really cross browser\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • this one is actually sort of reasonable\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Just over half way here ... should be about 3:10\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
  • I can do that too. Here&amp;#x2019;s another number.\n
  • \n
  • \n
  • \n
  • Another number, twelve billion. That&amp;#x2019;s the market cap of a company that is built on the PhoneGap technique. Anyone know what it is?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Fewer tests, fewer bugs\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
  • HTML5 is the Future of Mobile, PhoneGap Takes You There Today

    1. 1. HTML5 is the Future of MobilePhoneGap Takes You there Today Where 2.0 2011
    2. 2. Schedule• Overview• What is PhoneGap?• How to write apps• Community• API overview• How to extend PhoneGap• Tooling• Libraries• Web VS Native• PhoneGap/Build
    3. 3. @davejohnson I’m Canadian eh.
    4. 4. Why am I @ Where?• Desperate for speakers?• @brady felt sorry for us?
    5. 5. Why am I @ Where?
    6. 6. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5
    7. 7. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5• Phones are the most ubiquitous geo platform
    8. 8. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5• Phones are the most ubiquitous geo platform• Beer
    9. 9. PhoneGap
    10. 10. Worldwide Smartphone Sales November 2010 Symbian 2%3% 2% Android Blackberry 17% 37% iOS Linux Other 15% Windows Mobile 26%http://www.gartner.com/it/page.jsp?id=1466313
    11. 11. What is PhoneGap?
    12. 12. PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and the native code3. Write a web app!
    13. 13. Write once debug everywhere
    14. 14. Supported PlatformsiOS >= 3.2Android >= 1.5BlackBerry >= 4.6webOS >= 1.4.5Symbian >= 1
    15. 15. Lay of the LandiOS .............................. Objective CAndroid ...................... Java ‘Harmony’ / C++BlackBerry ................. Java J2ME / C++ (maybe?)webOS ........................ HTML, CSS and JSWindows Phone 7 ... .NET bsBada ............................. C++
    16. 16. Deprecated
    17. 17. Prototype PlatformsSamsung BadaQt by way of C++ (MeeGo, desktops, etc)Qt by way of PySideWindows Phone 7OS X CocoaWindows by way of WebKit.NET(Other web business like Chrome App Store and Mozilla’sOpen Web apps are interesting to us.)
    18. 18. MIT/BSD/APACHE
    19. 19. Release Roadmap• 0.9.5 March... uuh• 0.9.6 April... uuh• 1.0 May/June... it’s open source come on!! http://wiki.phonegap.com/roadmap-planning
    20. 20. 1.0 Roadmap pluggable
    21. 21. 2.0
    22. 22. Fascinating Year Ahead• BlackBerry WebWorks Playbook• HPalm webOS TouchPad• Gazillions of Android Tablets• TVs and Cars are next - for serious
    23. 23. How do you write PhoneGap apps?
    24. 24. Mobile web first!• Basics.• Tooling.• Libraries.
    25. 25. Basics: HTML<button>I’m native codes!</button>
    26. 26. Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    27. 27. 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!
    28. 28. CSS3 Animations-webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
    29. 29. Media Query
    30. 30. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
    31. 31. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:portrait)" href="ipad-portrait.css">
    32. 32. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:portrait)" href="ipad-portrait.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:landscape)" href="ipad-landscape.css">
    33. 33. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:portrait)" href="ipad-portrait.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:landscape)" href="ipad-landscape.css">
    34. 34. Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
    35. 35. Startupdocument.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
    36. 36. Performance• Use those CSS transforms!• Don’t set style properties inside a loop!• Don’t do what you do on the web!
    37. 37. Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?
    38. 38. config.xml example
    39. 39. <!DOCTYPE html><html> <head> <title>Vanilla</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <link rel="stylesheet" href="css/app.css" type="text/css"media="screen"> </head><body> <h1>Vanilla!</h1> <p>Ice Ice Baby</p><!-- always put phonegap.js first!!! --> <script src="phonegap-0.9.4.js"></script> <script>document.addEventListener(‘deviceready’, function(){}, false); </script></body></html>
    40. 40. Will PhoneGap work on my Chumby?
    41. 41. Can you put PhoneGap apps in the App Store /Android Market / whatever?
    42. 42. Clear as Mud
    43. 43. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
    44. 44. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
    45. 45. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC
    46. 46. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC• NO FAIRY DUST / SPARKLES
    47. 47. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC• NO FAIRY DUST / SPARKLES• NO UNICORNS GET HURT
    48. 48. Our Community
    49. 49. Contributors -- ohloh.net
    50. 50. Community by Numbers 400,000 20,000 40+ 50+ 435,000 downloads messages tools contributors visits/month
    51. 51. Thousands of Apps
    52. 52. Partners / Contributors• Nitobi• IBM• Sony Ericsson• Symbian• Palm• RIM• Sencha
    53. 53. Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• Ars Technica
    54. 54. Governance• http://phonegap.lighthouseapp.com (migrating to github today!)• http://wiki.phonegap.com/roadmap-planning• It’s a meritocracy
    55. 55. Who dreamed up the PhoneGap APIs?
    56. 56. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
    57. 57. Sensors• GPS• Accelerometer• Compass• Network• Camera
    58. 58. Data• Contacts• Media• File system• Notifications
    59. 59. Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
    60. 60. W3C• dev.w3.org/geo • geolocation + deviceorientation + devicemotion• dev.w3.org/dap (device apis and policy) • contacts, calendar, HTML media capture, Media capture api, Messaging, System info• webapi • Web notifications
    61. 61. HTML5• <canvas> • Cache manifest• <audio> • postMessage• <video> • Web SQL• Drag and drop • localStorage• File API • Sockets• History API • Workershttp://dev.w3.org/html5/spec/Overview.html
    62. 62. API “design”The “standards” are a mess.Quotes here are not ironic.
    63. 63. Browser APIs...
    64. 64. Or maybe like this?
    65. 65. Browser Persistence APIs• SQLite has been a complete fuck up.
    66. 66. WAC• formerly JIL and BONDI• a carrier consortium
    67. 67. WAC
    68. 68. Browser Media APIs• Lets not even go here..• Audio and video are horribly fucked up• ESPECIALLY on mobile• We fix ‘em (attempt to) w/ PhoneGap tho!
    69. 69. DAP Media Capture
    70. 70. DAP System Info
    71. 71. DAP Sys Info
    72. 72. DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
    73. 73. WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
    74. 74. Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada * PhoneGap started in 2008 btw...
    75. 75. Everyone Differentiates And their target abstraction is JavaScript?
    76. 76. We will too ...
    77. 77. How do I extend PhoneGap?
    78. 78. 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.
    79. 79. Remaining work• Discovery• Packaging / installation• Identity / trust
    80. 80. PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
    81. 81. Plugins • Push notifications • Ads • Analytics • Barcode scanning • Facebook Connecthttp://github.com/phonegap/phonegap-plugins
    82. 82. What tooling is available?
    83. 83. Compilers / Minifiers• YUICompressor• Google Closure• UglyfyJS
    84. 84. IDES• Textmate (PhoneGap bundle)• Eclipse (AppLaud plugin for Android)• Dreamweaver (CS 5.5)
    85. 85. Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
    86. 86. Debuggers• WebKit nightly is your friend. Mine too.• Weinre
    87. 87. HTML5 Debugging• console.log is supported btw• so is alert ...
    88. 88. What libraries are available?
    89. 89. DOM Libs• XUI• Zepto• jQuery• Dojo
    90. 90. Canvas Game Libs• PropulsionJS• EaselJS• GameJS• CraftyJS• LimeJS• jGen
    91. 91. Style / GUI Libs• jQuery Mobile• Sencha Touch• Dojo Mobile• Jo• GloveBox• Ekiben
    92. 92. Persistence Libs• Lawnchair• StorageJS• PersistJS
    93. 93. Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
    94. 94. Web VS Native? http://www.flickr.com/photos/40336611@N08/3705419486/sizes/z/
    95. 95. The Web is Native
    96. 96. “We could probably save 70% of ourdevelopment budget by switching to a single, cross-platform client, but wewould probably lose 80% of our users.” -- Phil Libin, Evernote CEO
    97. 97. “97.25% of statistics are wrong” -- Anonymous
    98. 98. “we’d be shut out of most app stores and go back toworrying about distribution.” -- Phil Libin again
    99. 99. “huh?” -- Me
    100. 100. Can you put PhoneGap apps in the App Store /Android Market / whatever?
    101. 101. $12,000,000,000
    102. 102. What would Reed say?
    103. 103. “Are you fucking crazy!?!?!”-- Maybe Reed Hastings, Netflix CEO would say this
    104. 104. Why are they using it?
    105. 105. Skills reuse
    106. 106. Time to market
    107. 107. Less code
    108. 108. Less code
    109. 109. App updates
    110. 110. A/B Testing
    111. 111. Building for hundreds of devices!!1!1http://functionsource.com/post/netflix-feature
    112. 112. No shit.
    113. 113. Can the Web feel Native?
    114. 114. “What you call love was invented by guyslike me to sell nylons” -- Don Draper, Mad Men
    115. 115. “Be the needlenot the haystack” -- Don Draper, Mad Men
    116. 116. Games?
    117. 117. Need more examples?
    118. 118. PhoneGap/Build
    119. 119. http://build.phonegap.com
    120. 120. What do you want punk?
    121. 121. What do you want punk?• Write once run on 5+ platforms
    122. 122. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS
    123. 123. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs
    124. 124. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs• Open source in spirit and in practice
    125. 125. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs• Open source in spirit and in practice• Keep the option of adding native code
    126. 126. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs• Open source in spirit and in practice• Keep the option of adding native code• Beer?
    127. 127. project resources phonegap.com docs.phonegap.com wiki.phonegap.com github.com/phonegap phonegap.lighthouseapp.com groups.google.com/group/phonegap twitter.com/phonegap #phonegap on freenode thank you
    128. 128. Contributor 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×