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.

Philly ete-2011

2,178 views

Published on

Published in: Technology
  • Be the first to comment

Philly ete-2011

  1. 1. PhoneGap Past, Present and Future Philly ETE 2011
  2. 2. @davejohnson I’m Canadian eh.
  3. 3. Schedule
  4. 4. Why am I here?
  5. 5. Why am I here?• Beer?
  6. 6. 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
  7. 7. Native languagesiOS .............................. Objective CAndroid ...................... Java ‘Harmony’ / C++BlackBerry ................. Java J2ME / C++ (maybe?)webOS ........................ HTML, CSS and JSWindows Phone 7 ... .NET bsBada ............................. C++
  8. 8. PhoneGap
  9. 9. PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and the native code3. Write a web app!
  10. 10. Write once debug everywhere
  11. 11. Past
  12. 12. document.location = ‘gap://Geolocation’;
  13. 13. [webView stringByEvaluatingJavaScriptFromString:str];
  14. 14. BlackBerry• you don’t want to know
  15. 15. Android• seriously don’t ask
  16. 16. Others• not so hard
  17. 17. MIT/BSD/APACHE
  18. 18. Present
  19. 19. MIT/BSD/APACHE
  20. 20. Supported PlatformsiOS >= 3.2Android >= 1.5BlackBerry >= 4.6webOS >= 1.4.5Symbian >= 1
  21. 21. Deprecated
  22. 22. 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.)
  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. Basics: config.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?
  37. 37. config.xml example
  38. 38. <!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>
  39. 39. Will PhoneGap work on my Chumby?
  40. 40. Can you put PhoneGap apps in the App Store /Android Market / whatever?
  41. 41. Clear as Mud
  42. 42. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
  43. 43. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
  44. 44. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC
  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• NO FAIRY DUST / SPARKLES
  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• NO UNICORNS GET HURT
  47. 47. Our Community
  48. 48. Contributors -- ohloh.net
  49. 49. > 20,000downloads a month
  50. 50. > 2,000messages per month
  51. 51. > 50contributors
  52. 52. > 40tools
  53. 53. > 430,000visits a month to phonegap.com
  54. 54. Partners / Contributors• Nitobi• IBM• Sony Ericsson• Symbian• Palm/HP• RIM• Sencha
  55. 55. Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• IBM
  56. 56. Governance• http://phonegap.lighthouseapp.com (migrating to github today!)• http://wiki.phonegap.com/roadmap-planning• It’s a meritocracy
  57. 57. What device APIs areexposed to PhoneGap?
  58. 58. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
  59. 59. Sensors• GPS• Accelerometer• Compass• Network• Camera
  60. 60. Data• Contacts• Media• File system• Notifications
  61. 61. Events• onload (yah it’s just HTML)• ondeviceready (this is special)• onnativeready• onresume• onpause
  62. 62. dev.w3.org/geo• geolocation• deviceorientation• devicemotion
  63. 63. dev.w3.org/dap• Contacts• Calendar• HTML media capture• Media capture API• Messaging• System info
  64. 64. 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
  65. 65. API “design”The “standards” are a mess.Quotes here are not ironic.
  66. 66. Browser APIs...
  67. 67. Or maybe like this?
  68. 68. Browser Persistence APIs• SQLite has been a complete fuck up.
  69. 69. WAC• formerly JIL and BONDI• a carrier consortium
  70. 70. WAC
  71. 71. 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!
  72. 72. DAP Media Capture
  73. 73. DAP System Info
  74. 74. DAP Sys Info
  75. 75. DAP API OverviewContactsCalendarMedia CaptureMessagingSystem InfoPermissionsGalleryApp LauncherTasks
  76. 76. WAC API OverviewAccelerometerOrientationCameraDevice StatusFilesystemMessagingGeolocationContactsCalendarTasks
  77. 77. Web-ish SDKs Trending.. • Symbian WRT • HP Palm webOS • BlackBerry WebWorks • Samsung Bada * PhoneGap started in 2008 btw...
  78. 78. Everyone Differentiates And their target abstraction is JavaScript?
  79. 79. We will too ...
  80. 80. hi5
  81. 81. How do I extend PhoneGap?
  82. 82. 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.
  83. 83. Plugins • Push notifications • Ads • Analytics • Barcode scanning • Facebook Connecthttp://github.com/phonegap/phonegap-plugins
  84. 84. What tooling is available?
  85. 85. Dreamweaver
  86. 86. HTML5 Debuggingconsole.log(‘foo’);alert(‘bar’);
  87. 87. Weinre(winery or WINNINGery)
  88. 88. What libraries are available?
  89. 89. JavaScipt Libraries• DOM: XUI, Zepto, jQuery, Dojo• Games: PropulsionJS, EaselJS, GameJS, CraftyJS, LimeJS, jGen• UI: jQuery, Sencha, Dojo, Jo, GloveBox• Persistence: Lawnchair, PersistJS, StorageJS• Testing: QUnit, Jasmine, DominatorJS, ThumbsJS
  90. 90. Web VS Native? http://www.flickr.com/photos/40336611@N08/3705419486/sizes/z/
  91. 91. The Web is Native
  92. 92. “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
  93. 93. “97.25% of statistics are wrong” -- Anonymous
  94. 94. “we’d be shut out of most app stores and go back toworrying about distribution.” -- Phil Libin again
  95. 95. “huh?” -- Me
  96. 96. Can you put PhoneGap apps in the App Store /Android Market / whatever?
  97. 97. $12,000,000,000
  98. 98. What would Reed say?
  99. 99. “What the deuce? Areyou bat shit crazy!?!?!”-- Maybe Reed Hastings, Netflix CEO would say this
  100. 100. Why are they using it?
  101. 101. Skills reuse
  102. 102. Time to market
  103. 103. Less code
  104. 104. Less code
  105. 105. App updates
  106. 106. A/B Testing
  107. 107. Building for hundreds of devices!!1!1http://functionsource.com/post/netflix-feature
  108. 108. No shit.
  109. 109. Can the Web feel Native?
  110. 110. “What you call love was invented by guyslike me to sell nylons” -- Don Draper, Mad Men
  111. 111. “Be the needlenot the haystack” -- Don Draper, Mad Men
  112. 112. Games?
  113. 113. Need more examples?
  114. 114. The Future
  115. 115. 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
  116. 116. 1.0 Roadmap pluggable
  117. 117. Plugins remaining work• Discovery• Packaging / installation• Identity / trust
  118. 118. PhoneGap Plugins 1.0CoreMaintained by us.CommunityWild west!PartnerMaintained by you; verified by us. =)
  119. 119. 2.0
  120. 120. Sockets
  121. 121. App updating
  122. 122. A/B testing
  123. 123. Background services
  124. 124. Emulation in the cloud
  125. 125. More, faster devices
  126. 126. Fascinating Year Ahead• BlackBerry WebWorks Playbook• HPalm webOS TouchPad• Gazillions of Android Tablets• TVs and Cars are next - for serious
  127. 127. PhoneGap/Build
  128. 128. http://build.phonegap.com
  129. 129. What do you want punk?
  130. 130. What do you want punk?• Write once run on 5+ platforms
  131. 131. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS
  132. 132. What do you want punk?• Write once run on 5+ platforms• Write using HTML, JavaScript and CSS• Write using standards based APIs
  133. 133. 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
  134. 134. 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
  135. 135. 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?
  136. 136. 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

×