Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

64,918 views

Published on

Published in: Technology

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

  1. HTML5 is the Future of MobilePhoneGap Takes You there Today Where 2.0 2011
  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. @davejohnson I’m Canadian eh.
  4. Why am I @ Where?• Desperate for speakers?• @brady felt sorry for us?
  5. Why am I @ Where?
  6. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5
  7. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5• Phones are the most ubiquitous geo platform
  8. Why am I @ Where?• Geo APIs are available in mobile phone browsers via HTML5• Phones are the most ubiquitous geo platform• Beer
  9. PhoneGap
  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. What is PhoneGap?
  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. Write once debug everywhere
  14. Supported PlatformsiOS >= 3.2Android >= 1.5BlackBerry >= 4.6webOS >= 1.4.5Symbian >= 1
  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. Deprecated
  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. MIT/BSD/APACHE
  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. 1.0 Roadmap pluggable
  21. 2.0
  22. Fascinating Year Ahead• BlackBerry WebWorks Playbook• HPalm webOS TouchPad• Gazillions of Android Tablets• TVs and Cars are next - for serious
  23. How do you write PhoneGap apps?
  24. Mobile web first!• Basics.• Tooling.• Libraries.
  25. Basics: HTML<button>I’m native codes!</button>
  26. Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  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. CSS3 Animations-webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
  29. Media Query
  30. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
  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. 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. 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. Basics: JavaScript• Language of the web.• Scheme with a C syntax.• Some quirks: http://wtfjs.com
  35. Startupdocument.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
  36. Performance• Use those CSS transforms!• Don’t set style properties inside a loop!• Don’t do what you do on the web!
  37. Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?
  38. config.xml example
  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. Will PhoneGap work on my Chumby?
  41. Can you put PhoneGap apps in the App Store /Android Market / whatever?
  42. Clear as Mud
  43. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
  44. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
  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. 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. 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. Our Community
  49. Contributors -- ohloh.net
  50. Community by Numbers 400,000 20,000 40+ 50+ 435,000 downloads messages tools contributors visits/month
  51. Thousands of Apps
  52. Partners / Contributors• Nitobi• IBM• Sony Ericsson• Symbian• Palm• RIM• Sencha
  53. Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• Ars Technica
  54. Governance• http://phonegap.lighthouseapp.com (migrating to github today!)• http://wiki.phonegap.com/roadmap-planning• It’s a meritocracy
  55. Who dreamed up the PhoneGap APIs?
  56. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
  57. Sensors• GPS• Accelerometer• Compass• Network• Camera
  58. Data• Contacts• Media• File system• Notifications
  59. Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
  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. 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. API “design”The “standards” are a mess.Quotes here are not ironic.
  63. Browser APIs...
  64. Or maybe like this?
  65. Browser Persistence APIs• SQLite has been a complete fuck up.
  66. WAC• formerly JIL and BONDI• a carrier consortium
  67. WAC
  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. DAP Media Capture
  70. DAP System Info
  71. DAP Sys Info
  72. DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
  73. WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
  74. Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada * PhoneGap started in 2008 btw...
  75. Everyone Differentiates And their target abstraction is JavaScript?
  76. We will too ...
  77. How do I extend PhoneGap?
  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. Remaining work• Discovery• Packaging / installation• Identity / trust
  80. PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
  81. Plugins • Push notifications • Ads • Analytics • Barcode scanning • Facebook Connecthttp://github.com/phonegap/phonegap-plugins
  82. What tooling is available?
  83. Compilers / Minifiers• YUICompressor• Google Closure• UglyfyJS
  84. IDES• Textmate (PhoneGap bundle)• Eclipse (AppLaud plugin for Android)• Dreamweaver (CS 5.5)
  85. Emulators• Every SDK has one. Most of them suck.• ios-sim• Ripple• WebKit, eh
  86. Debuggers• WebKit nightly is your friend. Mine too.• Weinre
  87. HTML5 Debugging• console.log is supported btw• so is alert ...
  88. What libraries are available?
  89. DOM Libs• XUI• Zepto• jQuery• Dojo
  90. Canvas Game Libs• PropulsionJS• EaselJS• GameJS• CraftyJS• LimeJS• jGen
  91. Style / GUI Libs• jQuery Mobile• Sencha Touch• Dojo Mobile• Jo• GloveBox• Ekiben
  92. Persistence Libs• Lawnchair• StorageJS• PersistJS
  93. Testing Libs• QUnit• Jasmine• DominatorJS• ThumbsJS
  94. Web VS Native? http://www.flickr.com/photos/40336611@N08/3705419486/sizes/z/
  95. The Web is Native
  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.25% of statistics are wrong” -- Anonymous
  98. “we’d be shut out of most app stores and go back toworrying about distribution.” -- Phil Libin again
  99. “huh?” -- Me
  100. Can you put PhoneGap apps in the App Store /Android Market / whatever?
  101. $12,000,000,000
  102. What would Reed say?
  103. “Are you fucking crazy!?!?!”-- Maybe Reed Hastings, Netflix CEO would say this
  104. Why are they using it?
  105. Skills reuse
  106. Time to market
  107. Less code
  108. Less code
  109. App updates
  110. A/B Testing
  111. Building for hundreds of devices!!1!1http://functionsource.com/post/netflix-feature
  112. No shit.
  113. Can the Web feel Native?
  114. “What you call love was invented by guyslike me to sell nylons” -- Don Draper, Mad Men
  115. “Be the needlenot the haystack” -- Don Draper, Mad Men
  116. Games?
  117. Need more examples?
  118. PhoneGap/Build
  119. http://build.phonegap.com
  120. What do you want punk?
  121. What do you want punk?• Write once run on 5+ platforms
  122. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS
  123. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs
  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. 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. 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. 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. 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

×