More Related Content Similar to A Snapshot of the Mobile HTML5 Revolution (20) More from James Pearce (12) A Snapshot of the Mobile HTML5 Revolution3. Single device Multi device
Sedentary user Mobile user
*
Declarative Imperative
Thin client Thick client
Documents Applications
* or supine, or sedentary, or passive, or...
5. HTML5 is a new version of HTML4,
XHTML1, and DOM Level 2 HTML
addressing many of the issues of
those specifications while at the
same time enhancing (X)HTML
to more adequately address Web
applications.
- WHATWG Wiki
9. Web
Site
sites
Web
apps
Native
App
apps
Nativeness
10. MS
RIM
Google
Apple
Top US Smartphone Platforms
August 2011, comScore MobiLens
11. C#
J2ME/Air
Java/C++
Obj-C
Native programming languages you’ll need
August 2011
12. IE
WebKit
WebKit
WebKit
Browser platforms to target
August 2011
14. But at least we are using
one language,
one markup,
one style system
16. Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
20. IE Chrome Safari Firefox iOS BBX Android
@font-face
Canvas
HTML5 Audio & Video
rgba(), hsla()
border-image:
border-radius:
box-shadow:
text-shadow:
opacity:
Multiple backgrounds
Flexible Box Model
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
local/sessionStorage
SVG/SVG Clipping
SMIL
Inline SVG
Drag and Drop
hashchange
X-window Messaging
History Management
applicationCache
Web Sockets
Web Workers
Web SQL Database
WebGL
IndexedDB
21. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
23. 100%
Support
Browsers Polyfills Frameworks
Capabilities & specifications
25. <!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<script src="jq.js"></script><script src="jqm.js"></script>
<link rel="stylesheet" href="jqm.css" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Hello World</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Continents</li>
<li><a href="na.html">North America</a></li>
<li><a href="sa.html">South America</a></li>
<li><a href="eu.html">Europe</a></li>
</ul>
</div>
</div>
</body>
</html>
27. <!DOCTYPE html>
<html>
<head>
<title>Sencha Touch</title>
<script src="st.js"></script>
<link rel="stylesheet" href="st.css" />
<script type="text/javascript" charset="utf-8">
new Ext.Application({
launch: function() {
var continents = new Ext.data.Store({
model: Ext.regModel('', {fields: ['name', 'link']}),
data: [
{name: 'North America', link:'na'},
{name: 'South America', link:'sa'},
{name: 'Europe', link:'eu'}
]
});
new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar', title: 'Hello World',
}],
items: [{
xtype: 'list', store: continents, itemTpl: '{name}'
}]
});
}
});
</script>
</head><body></body>
</html>
29. One Web stack
request
User interface Rendering
response
Business logic
Storage
server client
30. An Alternative Web Stack
User interface
sync
API Business logic
Storage Storage
server client
37. Are HTML5 apps more
e cient to develop?
(yes, in theory, but it’s early days)
39. 24 dev-months
for iOS
http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
47. Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
48. Browser
Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
49. Native Wrapper
WebView
Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
53. HTML5 apps
can’t access
device functionality
(goddamn it)
54. Native Wrapper
WebView
Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
61. Android 4
SVG at all
CSS3 3D transforms
classList
XHR2
Script defer & async
<details> & <summary>
File reader
Device orientation
Navigation timing
66. Three Laws of Motion
(the universe works as we might expect it to)
68. Light Travels at a
Constant Speed
(the universe doesn’t work as we thought it would)
73. Apps or Sites?
Responsive Design?
Browser diversity?
Mobile Context?
One Web?
(an inability to answer these questions does
not constitute an excuse not to innovate)
76. Media Capture (HTML) Media Capture (API)
Battery status Application Registration
Contacts Calendar
Messaging (SMS, MMS...) Feature Permissions
Network Information API Sensor API
Vibration API
Menu API
Audio Volume
Permissions for APIs
Beep
Gallery
Systems info and events
Tasks
77. Accelerometer APDU (SmartCard)
Orientation Bluetooth
Camera Crypto
DeviceStatus DLNA
Filesystem Server Push
Messaging Sensor
Geolocation Telephony
PIM
Contacts
Calendar
Tasks
DeviceInteraction
80. window.addEventListener(
'appointmentdue',
function(appt) {
if (device.near(WORK)) {
siri.remind(
contacts.get('Peter'),
calendar.getDetails(appt)
);
}
},
false
);
(PS: This code does not work. Yet)