HTML5 and the dawn of rich mobile web applications pt 1

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...

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...


JSON

Models

Controllers

Mobile

DesktopSw

itch

ers

RESTonce


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


JavaScript

Semantic HTML



Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL

WebView

Workers & Parallel

Processing


JavaScript

Semantic HTML



Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL

Native Wrapper

WebView

Workers & Parallel

Processing


JavaScript

Semantic HTML



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

HTML5 and the dawn of rich mobile web applications pt 1

Technology

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