HTML5 is the Future of Mobile, PhoneGap Takes You There Today
1. HTML5 is the Future of Mobile
PhoneGap Takes You there Today
Where 2.0 2011
2. Schedule
• Overview
• What is PhoneGap?
• How to write apps
• Community
• API overview
• How to extend PhoneGap
• Tooling
• Libraries
• Web VS Native
• PhoneGap/Build
12. 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
18. Lay of the Land
iOS .............................. Objective C
Android ...................... Java ‘Harmony’ / C++
BlackBerry ................. Java J2ME / C++ (maybe?)
webOS ........................ HTML, CSS and JS
Windows Phone 7 ... .NET bs
Bada ............................. C++
20. 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.)
31. 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!
35. 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">
36. 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">
37. 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">
40. Performance
• Use those CSS transforms!
• Don’t set style properties inside a loop!
• Don’t do what you do on the web!
41. Basics: config.xml
• Lifted from the W3C Widget Spec
• Many variants. See rubygem ‘confetti’
• Handy for packaging metadata.
• Wtf is packaging metadata?
50. Clear as Mud
• WRITE IN HTML, JAVASCRIPT AND CSS
• PRODUCE A NATIVE APP PACKAGED
PACKAGED ON A PER PLATFORM BASIS
51. Clear as Mud
• WRITE IN HTML, JAVASCRIPT AND CSS
• PRODUCE A NATIVE APP PACKAGED
PACKAGED ON A PER PLATFORM BASIS
• NO CROSS COMPILING MAGIC
52. 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
53. 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
66. 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
67.
68. 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
75. 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!
86. 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.
110. “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
144. What do you want punk?
• Write once run on 5+ platforms
145. What do you want punk?
• Write once run on 5+ platforms
• Write using HTML, JavaScript and CSS
146. What do you want punk?
• Write once run on 5+ platforms
• Write using HTML, JavaScript and CSS
• Write using standards based APIs
147. 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
148. 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
149. 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?
150. 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
151. Contributor Concerns
tests currently live at
http://github.com/phonegap/mobile-spec
docs can be viewed live here
http://docs.phonegap.com
issue tracker can be viewed here
http://phonegap.lighthouseapp.com
wiki we use for planning here
http://wiki.phonegap.com
Editor's Notes
\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&#x2019;t flash based :/\n
When I said that PhoneGap apps were &#x201C;native&#x201D; before I wasn&#x2019;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&#x2019;s another number.\n
\n
\n
\n
Another number, twelve billion. That&#x2019;s the market cap of a company that is built on the PhoneGap technique. Anyone know what it is?\n