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

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

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 ﬁrst!• 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">

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: conﬁg.xml• Lifted from the W3C Widget Spec• Many variants. See rubygem ‘confetti’• Handy for packaging metadata.• Wtf is packaging metadata?

conﬁg.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> <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• Notiﬁcations

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 notiﬁcations

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

Browser Media APIs• Lets not even go here..• Audio and video are horribly fucked up• ESPECIALLY on mobile• We ﬁx ‘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; veriﬁed by us. =)

Plugins • Push notiﬁcations • Ads • Analytics • Barcode scanning • Facebook Connecthttp://github.com/phonegap/phonegap-plugins

What tooling is available?

Compilers / Miniﬁers• 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.ﬂickr.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, Netﬂix CEO would say this

Why are they using it?

Skills reuse

Time to market

Less code

App updates

A/B Testing

Building for hundreds of devices!!1!1http://functionsource.com/post/netﬂix-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

http://www.scoop.it	238
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://astutemoney.in.sv7.premiumwebserver.com	8
http://pushidea.blogspot.com	7
http://merca1navojoa.blogspot.com	7
http://twitter.com	6
http://translate.googleusercontent.com	4
http://abava.blogspot.ru	3
http://www.slideshare.net	3
http://mwhiffen	2
http://localhost	2
http://blog.naver.com	2
http://abava.blogspot.co.uk	2
https://twitter.com	1
http://staging.fellownation.com	1
http://pushidea.blogspot.fr	1
http://slideclip.b-prep.com	1
http://www.turopadetrabajo.com	1
http://a0.twimg.com	1
http://www.techgig.com	1
http://static.slidesharecdn.com	1
http://localhost:1194	1

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

by davyjones

Accessibility

Categories

Upload Details

Usage Rights

29 Embeds 754

Statistics

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