Philly ete-2011
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,177
On Slideshare
2,176
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 1

http://a0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • This is a self portrait of me fighting a black beary\nI am CTO and co-founder of a mobile web consulting company in Vancouver.\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
  • \n
  • That’s why we like HTML5. When you combine HTML5 with ...\n
  • mobile phones\n
  • you get PhoneGap. PhoneGap is a free and open source framework that enables developers to write cross platform native mobile applications.\n
  • \n
  • \n
  • \n
  • \n
  • created in aug 2008 over a bunch of beer\n
  • We realized that we could talk between JavaScript and Objective-C!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Then IBM decided to contribute...\n
  • awesome\n
  • A big reason that any of this happened was because of our licensing!\n
  • \n
  • oddly enough we have not even changed our licensing!\n
  • \n
  • Windows Mobile\nBB < 4.6\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’t flash based :/\n
  • When I said that PhoneGap apps were “native” before I wasn’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
  • \n
  • \n
  • \n
  • \n
  • PhoneGap is unique in that it is exposing native APIs in JavaScript according to ... standards\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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
  • \n
  • Just over half way here ... is everyone still alive?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • There is all sorts of tooling available. JS minifiers, IDEs, \n
  • \n
  • You can use device emulators but they usually suck. Try Ripple or just use WebKit\n
  • In summary just use the web development tools you already know and use.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • I can do that too. Here’s another number.\n
  • \n
  • \n
  • \n
  • Another number, twelve billion. That’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
  • “feeling” native is something that you have been programmed to feel.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • , , ... etc\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

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