View
33.809
Download
0
Category
Preview:
DESCRIPTION
Citation preview
Cross-platformmobile web apps
@ jamespearce
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)
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
Cross-platformmobile web apps
What is an app?
Consumption vs CreationLinkability
User ExperienceArchitecture
Nativeness
Com
prom
ise
Nativeapps
Websites
Webapps
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
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
Cross-platformmobile web apps
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
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>
Myth busting
HTML5 apps can’trun o!ine
(hybrid, appcache, and localStorage...)
HTML5 apps can’t match native performance
(true, sometimes)
HTML5 apps can’t be monetized
(is this a technology problem?)
HTML5 apps can’t accessdevice functionality
(weren’t you listening to Brian?)
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
Well-established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation.
Tao Te Ching; 38 Ritual
James Pearce @ jamespearce
Recommended