Post on 15-Jan-2015
description
HTML5 and the dawn of rich mobile web applications
@ jamespearce
Part I
Mobile & HTML5
Sir Isaac Newton
Three Laws of Motion
(the universe works as we might expect it to)
Edward MorleyAlbert Michelson
Light Travels at aConstant Speed
(the universe doesn’t work as we thought it would)
Classical Mechanics
Relativistic Mechanics
Quantum Mechanics
Familiarity
Exploration
Exploration
The Web Todayis like
Physics in 1900
Mobileis our Michelson-Morley
Experiment
Mobile Context?One Web?
Responsive Design?Apps or Sites?
(an inability to answer these questions doesnot constitute an excuse not to innovate)
Responsive Web Design
@media screen and (max-width: 480px) { #logo { background-image: url(mobile.png); }}
Mobile devices are di!erent
Messaging
Telephone
Camera
Compass
Mobile users are di!erent
Content-Type: application/msword
The Mobile Webis not a
320px Web
Single deviceSedentary userDeclarativeThin client Documents
Multi deviceMobile userImperative
Thick client Applications
*
* or supine, or sedentary, or passive, or...
A badge for all these waysthe web is changing
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
What is an app?
2008
We must have aniPhone App!
2009
We must have anAndroid App!
2010
We must have aniPad App!
2011
We must have a...
omfg
What is an app?
Consumption vs CreationLinkability
User ExperienceArchitecture
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Workers & Parallel
Processing
File SystemsDatabasesApp Caches
Cross-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Network
HTTP
AJAX
Events
Sockets
SSL
(all the elements of a modern application platform)
The web is now as mucha stack
as it is a medium
MS
RIM
Apple
Android
Symbian
Top European Smartphone PlatformsJuly 2011, comScore MobiLens
.NET
J2ME
Obj-C
Java
C++
Native programming languages you’ll needJuly 2011
IE
WebKit
WebKit
WebKit
WebKit
Browser platforms to targetJuly 2011
There is no WebKit on Mobile- @ppk
But at least we are usingone language,one markup,
one style system
IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb@font-face
CanvasHTML5 Audio & Video
rgba(), hsla()border-image:border-radius:
box-shadow:text-shadow:
opacity:Multiple backgrounds
Flexible Box ModelCSS Animations
CSS ColumnsCSS Gradients
CSS ReflectionsCSS 2D TransformsCSS 3D Transforms
CSS TransitionsGeolocation API
local/sessionStorageSVG/SVG Clipping
SMILInline SVG
Drag and Drophashchange
X-window MessagingHistory Management
applicationCacheWeb SocketsWeb Workers
Web SQL DatabaseWebGL
IndexedDB
Stay on top of diversity
Can I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
Capabilities & specifications
Supp
ort 100%
Browsers
Capabilities & specifications
100%
Polyfills
Supp
ort
Frameworks Browsers
<!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>
<!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>
Evolving the web for mobile
HTML, CSS...
Models
Controllers
Views
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
Evolving the web for mobile
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
Evolving the web for mobile
The classic web stack
Storage
Business logic
User interfacereq/res
Rendering
A new web stack
Storage
Security Business logic
User interfacesync
Storage
Write once,run anywhere?
The Mobile Webis not a
320px Web
Proxies
Models
Controllers
Stores
Views Views
json
http://sencha.com/x/cv
Thick client, thin server
The shortfall in the cloud
Location Services
Image Serving
AnalyticsAdaptation
Video Serving
Data SyncWeb Fonts
Ad Serving
Commerce$
Network APIs
http://mysite.com/myimage.png
http://src.sencha.io/http://mysite.com/myimage.png
Myths & rumors
HTML5 apps can’trun o!ine
(hybrid, appcache, and localStorage...)
Going o"ine
http://github.com/jamesgpearce/confess
HTML5 apps can’t match native performance
(true, sometimes)
HTML5 apps can’t be monetized
(is this a technology problem?)
HTML5 apps are more e"cient to develop
(yes, in theory, but diversity remains)
24 dev-monthsfor iOS
http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
12 further dev-monthsfor Android & BlackBerry
http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
...but more engagement thanthe native app
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
Hybridapps
Workers & Parallel
Processing
File SystemsDatabasesApp Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
WebView
Workers & Parallel
Processing
File SystemsDatabasesApp Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
Native Wrapper
WebView
Workers & Parallel
Processing
File SystemsDatabasesApp Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
Native app storeshave a dirty secret
Apps vs web technologybuilt with
James Pearce @ jamespearce