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

on

  • 27,050 views

 

Statistics

Views

Total Views
27,050
Views on SlideShare
26,194
Embed Views
856

Actions

Likes
72
Downloads
1,676
Comments
7

34 Embeds 856

http://www.scoop.it 325
http://westhigh.eu5.org 171
http://where2conf.com 137
http://whereconf.com 48
http://paper.li 35
http://abava.blogspot.com 22
http://linkeddata.uriburner.com 19
http://192.168.1.113 17
http://kalovskihost.com 12
http://abava.blogspot.ru 9
http://pushidea.blogspot.com 9
http://astutemoney.in.sv7.premiumwebserver.com 8
http://merca1navojoa.blogspot.com 7
http://twitter.com 6
http://translate.googleusercontent.com 4
http://192.168.6.52 3
http://www.slideshare.net 3
http://mwhiffen 2
http://blog.naver.com 2
http://localhost 2
http://abava.blogspot.co.uk 2
http://pushidea.blogspot.ru 1
http://role-sandbox.eu 1
http://mfo.yoursmartersite.com.au 1
http://staging.fellownation.com 1
http://pushidea.blogspot.fr 1
http://slideclip.b-prep.com 1
http://a0.twimg.com 1
http://www.techgig.com 1
http://localhost:1194 1
http://static.slidesharecdn.com 1
http://www.turopadetrabajo.com 1
https://twitter.com 1
http://pushidea.blogspot.com.au 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 < 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’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
  • 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’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
  • \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 HTML5 is the Future of Mobile, PhoneGap Takes You There Today Presentation Transcript

  • 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• Tooling• Libraries• Web VS Native• PhoneGap/Build
  • @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 platform• Beer
  • PhoneGap
  • 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
  • What is PhoneGap?
  • PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and the native code3. Write a web app!
  • 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 ................. Java J2ME / C++ (maybe?)webOS ........................ HTML, CSS and JSWindows Phone 7 ... .NET bsBada ............................. C++
  • Deprecated
  • 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.)
  • 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.phonegap.com/roadmap-planning
  • 1.0 Roadmap pluggable
  • 2.0
  • Fascinating Year Ahead• BlackBerry WebWorks Playbook• HPalm webOS TouchPad• Gazillions of Android Tablets• TVs and Cars are next - for serious
  • 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=no;" />
  • 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!
  • 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="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:portrait)" href="ipad-portrait.css">
  • 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">
  • 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">
  • 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.• Wtf is packaging metadata?
  • config.xml example
  • <!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>
  • 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 COMPILING MAGIC
  • 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
  • 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
  • Our Community
  • Contributors -- ohloh.net
  • Community by Numbers 400,000 20,000 40+ 50+ 435,000 downloads messages tools contributors visits/month
  • 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’s a meritocracy
  • 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 policy) • contacts, calendar, HTML media capture, Media capture api, Messaging, System info• webapi • Web notifications
  • 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
  • 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 (attempt to) w/ PhoneGap tho!
  • 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 btw...
  • 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.Portable to new platforms.Secure only use what you need.Override anything with JS or Native code.
  • 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-plugins
  • 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 lose 80% of our users.” -- Phil Libin, Evernote CEO
  • “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 APIs
  • 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
  • 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
  • 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?
  • 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
  • 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