Philly ete-2011

PhoneGap Past, Present and Future

Philly ETE 2011

@davejohnson

I’m Canadian eh.

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

Native languages
iOS .............................. Objective C
Android ...................... Java ‘Harmony’ / C++
BlackBerry ................. Java J2ME / C++ (maybe?)
webOS ........................ HTML, CSS and JS
Windows Phone 7 ... .NET bs
Bada ............................. C++

PhoneGap Pattern

1. Embed a chromeless browser in a native app
2. Create a “bridge” between the browser and
the native code
3. Write a web app!

document.location = ‘gap://Geolocation’;

[webView stringByEvaluatingJavaScriptFromString:str];

BlackBerry

• you don’t want to know

Android

• seriously don’t ask

Supported Platforms
iOS >= 3.2
Android >= 1.5
BlackBerry >= 4.6
webOS >= 1.4.5
Symbian >= 1

Prototype Platforms

Samsung Bada
Qt by way of C++ (MeeGo, desktops, etc)
Qt by way of PySide
Windows Phone 7
OS X Cocoa
Windows by way of WebKit.NET

(Other web business like Chrome App Store and Mozilla’s
Open Web apps are interesting to us.)

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=dev
ice-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
<link rel="stylesheet" media="all and (max-device-
width: 480px)" href="iphone.css">

Media Query
<link rel="stylesheet" media="all and (min-device-
width: 481px) and (max-device-width: 1024px) and
(orientation:portrait)" href="ipad-portrait.css">

Media Query
(orientation:portrait)" href="ipad-portrait.css">
(orientation:landscape)" href="ipad-
landscape.css">

Basics: JavaScript

• Language of the web.
• Scheme with a C syntax.
• Some quirks: http://wtfjs.com

Startup

document.addEventListener(
‘deviceready’,
function() {
alert(‘WINNING!’);
},
false);

Basics: conﬁg.xml

• Lifted from the W3C Widget Spec
• Many variants. See rubygem ‘confetti’
• Handy for packaging metadata.
• Wtf is packaging metadata?

<!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
• WRITE IN HTML, JAVASCRIPT AND CSS

Clear as Mud
• PRODUCE A NATIVE APP PACKAGED
PACKAGED ON A PER PLATFORM BASIS

Clear as Mud
• NO CROSS COMPILING MAGIC

Clear as Mud
• NO FAIRY DUST / SPARKLES

Clear as Mud
• NO FAIRY DUST / SPARKLES
• NO UNICORNS GET HURT

Contributors

-- ohloh.net

> 430,000
visits a month to phonegap.com

Partners / Contributors
• Nitobi
• IBM
• Sony Ericsson
• Symbian
• Palm/HP
• RIM
• Sencha

Power Users

• Alcatel Lucent
• Sabre
• Deutsche Telecom
• IBM

Governance

• http://phonegap.lighthouseapp.com
(migrating to github today!)
• http://wiki.phonegap.com/roadmap-planning
• It’s a meritocracy

What device APIs are
exposed to PhoneGap?

PhoneGap APIs

• Sensors
• Data
• Events

http://docs.phonegap.com

Sensors

• GPS
• Accelerometer
• Compass
• Network
• Camera

Data

• Contacts
• Media
• File system
• Notiﬁcations

Events

• onload (yah it’s just HTML)
• ondeviceready (this is special)
• onnativeready
• onresume
• onpause

dev.w3.org/geo

• geolocation
• deviceorientation
• devicemotion

dev.w3.org/dap
• Contacts
• Calendar
• HTML media capture
• Media capture API
• Messaging
• System info

HTML5
• <canvas> • Cache manifest
• <audio> • postMessage
• <video> • Web SQL
• Drag and drop • localStorage
• File API • Sockets
• History API • Workers
http://dev.w3.org/html5/spec/Overview.html

API “design”
The “standards” are a mess.

Quotes here are not ironic.

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 API Overview
Contacts
Calendar
Media Capture
Messaging
System Info
Permissions
Gallery
App Launcher
Tasks

WAC API Overview
Accelerometer
Orientation
Camera
Device Status
Filesystem
Messaging
Geolocation
Contacts
Calendar
Tasks

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?

Plugins to the rescue
Clean 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.

Plugins

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

HTML5 Debugging

console.log(‘foo’);
alert(‘bar’);

What libraries are
available?

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

Web VS Native?
http://www.ﬂickr.com/photos/40336611@N08/3705419486/sizes/z/

“We could probably save 70% of our
development budget by switching to a
single, cross-platform client, but we
would 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 to
worrying about distribution.”

-- Phil Libin again

“What the deuce? Are
you bat shit crazy!?!?!”

-- Maybe Reed Hastings, Netﬂix CEO would say this

Building for hundreds
of devices!!1!1
http://functionsource.com/post/netﬂix-feature

“What you call love
was invented by guys
like me to sell nylons”
-- Don Draper, Mad Men

“Be the needle
not the haystack”

-- Don Draper, Mad Men

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

Plugins remaining work

• Discovery
• Packaging / installation
• Identity / trust

PhoneGap Plugins 1.0
Core
Maintained by us.

Community
Wild west!

Partner
Maintained by you; veriﬁed by us. =)

Fascinating Year Ahead

• BlackBerry WebWorks Playbook
• HPalm webOS TouchPad
• Gazillions of Android Tablets
• TVs and Cars are next - for serious

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

• 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

Philly ete-2011

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Philly ete-2011

Similaire à Philly ete-2011 (20)

Dernier

Dernier (20)

Philly ete-2011

Notes de l'éditeur