Your SlideShare is downloading. ×
0
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Philly ete-2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Philly ete-2011

1,819

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,819
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

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
  • <menu>, <audio>, <video> ... 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

    ×