HTML5 and the dawn of rich mobile web applications pt 1

HTML5 and the dawn of rich mobile web applications @ jamespearce

Part IMobile & HTML5

Sir Isaac Newton

Three Laws of Motion(the universe works as we might expect it to)

Albert Michelson Edward Morley

Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)

Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration

The Web Today is likePhysics in 1900

Mobileis our Michelson-Morley Experiment

Mobile Context? One Web? Responsive Design? Apps or Sites?(an inability to answer these questions does not 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 Telephone Messaging Camera Compass Mobile users are di erent

Content-Type: application/msword

The Mobile Web is not a 320px Web

Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...

A badge for all these ways the web is changing

HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those speciﬁcations while at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki

What is an app?

2008We must have an iPhone App!

2009We must have an Android App!

2010We must have an iPad App!

2011We must have a...

What is an app?

Consumption vs Creation Linkability User Experience Architecture

WebCompromise sites Web apps Native apps Nativeness

WebFont Video Audio GraphicsDevice Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)

The web is now as much a stack as it is a medium

MS RIM Symbian Apple AndroidTop European Smartphone Platforms July 2011, comScore MobiLens

.NET J2ME C++ Obj-C JavaNative programming languages you’ll need July 2011

IE WebKit WebKitWebKit WebKitBrowser platforms to target July 2011

There is no WebKit on Mobile - @ppk

But at least we are using one 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 Model CSS Animations CSS Columns CSS Gradients CSS Reﬂections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchangeX-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB

Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com

100%Support Browsers Capabilities & speciﬁcations

100%Support Browsers Polyﬁlls Frameworks Capabilities & speciﬁcations

<!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 Views HTML, CSS... Controllers Models

Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models

Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models

The classic web stack req/resUser interface RenderingBusiness logic Storage

A new web stack User interface syncSecurity Business logicStorage Storage

Write once,run anywhere?

The Mobile Web is not a 320px Web

Views Views Controllers Models Stores Proxies n jso

http://sencha.com/x/cv

Thick client, thin serverThe shortfall in the cloud

Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs

http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png

Myths & rumors

HTML5 apps can’t run o ine(hybrid, appcache, and localStorage...)

Going o inehttp://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-months for iOShttp://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 moreengagementthanthe native app

WebCompromise sites Web apps Hybrid apps Native apps Nativeness

Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing

WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing

Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing

Native app storeshave a dirty secret

built withApps vs web technology

James Pearce@ jamespearce

http://paper.li	141
http://a0.twimg.com	69
http://us-w1.rockmelt.com	38
http://lanyrd.com	32
http://thenativeapp.com	27
http://www.techgig.com	22
http://www.linkedin.com	3
https://si0.twimg.com	2
http://blog.slideshare.net	1
https://twimg0-a.akamaihd.net	1

HTML5 and the dawn of rich mobile web applications pt 1

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 336

Statistics

HTML5 and the dawn of rich mobile web applications pt 1 Presentation Transcript