52
Cross-platform mobile web apps @ jamespearce

Cross platform mobile web apps

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Cross platform mobile web apps

Cross-platformmobile web apps

@ jamespearce

Page 2: Cross platform mobile web apps

Sir Isaac Newton

Page 3: Cross platform mobile web apps

Three Laws of Motion

(the universe works as we might expect it to)

Page 4: Cross platform mobile web apps

Edward MorleyAlbert Michelson

Page 5: Cross platform mobile web apps

Light Travels at aConstant Speed

(the universe doesn’t work as we thought it would)

Page 6: Cross platform mobile web apps
Page 7: Cross platform mobile web apps

Classical Mechanics

Relativistic Mechanics

Quantum Mechanics

Familiarity

Exploration

Exploration

Page 8: Cross platform mobile web apps

The Web Todayis like

Physics in 1900

Page 9: Cross platform mobile web apps

Mobileis our Michelson-Morley

Experiment

Page 10: Cross platform mobile web apps

Mobile Context?One Web?

Responsive Design?Apps or Sites?

(an inability to answer these questions doesnot constitute an excuse not to innovate)

Page 11: Cross platform mobile web apps

Single deviceSedentary userDeclarativeThin client Documents

Multi deviceMobile userImperative

Thick client Applications

*

* or supine, or sedentary, or passive, or...

Page 12: Cross platform mobile web apps

A badge for all these waysthe web is changing

Page 13: Cross platform mobile web apps

Cross-platformmobile web apps

Page 14: Cross platform mobile web apps

What is an app?

Page 15: Cross platform mobile web apps

Consumption vs CreationLinkability

User ExperienceArchitecture

Page 16: Cross platform mobile web apps

Nativeness

Com

prom

ise

Nativeapps

Websites

Webapps

Page 17: Cross platform mobile web apps
Page 18: Cross platform mobile web apps

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

Page 19: Cross platform mobile web apps

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)

Page 20: Cross platform mobile web apps

The web is now as mucha stack

as it is a medium

Page 21: Cross platform mobile web apps
Page 22: Cross platform mobile web apps
Page 23: Cross platform mobile web apps

Cross-platformmobile web apps

Page 24: Cross platform mobile web apps

MS

RIM

Apple

Android

Symbian

Top European Smartphone PlatformsJuly 2011, comScore MobiLens

Page 25: Cross platform mobile web apps

.NET

J2ME

Obj-C

Java

C++

Native programming languages you’ll needJuly 2011

Page 26: Cross platform mobile web apps

IE

WebKit

WebKit

WebKit

WebKit

Browser platforms to targetJuly 2011

Page 27: Cross platform mobile web apps

There is no WebKit on Mobile- @ppk

Page 28: Cross platform mobile web apps

But at least we are usingone language,one markup,

one style system

Page 29: Cross platform mobile web apps

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

Page 30: Cross platform mobile web apps

Capabilities & specifications

Supp

ort 100%

Browsers

Page 31: Cross platform mobile web apps

Capabilities & specifications

100%

Polyfills

Supp

ort

Frameworks Browsers

Page 32: Cross platform mobile web apps
Page 33: Cross platform mobile web apps

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

Page 34: Cross platform mobile web apps
Page 35: Cross platform mobile web apps

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

Page 36: Cross platform mobile web apps
Page 37: Cross platform mobile web apps

Myth busting

Page 38: Cross platform mobile web apps

HTML5 apps can’trun o!ine

(hybrid, appcache, and localStorage...)

Page 39: Cross platform mobile web apps

HTML5 apps can’t match native performance

(true, sometimes)

Page 40: Cross platform mobile web apps

HTML5 apps can’t be monetized

(is this a technology problem?)

Page 41: Cross platform mobile web apps

HTML5 apps can’t accessdevice functionality

(weren’t you listening to Brian?)

Page 42: Cross platform mobile web apps

Nativeness

Com

prom

ise

Nativeapps

Websites

Webapps

Hybridapps

Page 43: Cross platform mobile web apps

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

Page 44: Cross platform mobile web apps

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

Page 45: Cross platform mobile web apps

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

Page 46: Cross platform mobile web apps
Page 47: Cross platform mobile web apps

Native app storeshave a dirty secret

Page 48: Cross platform mobile web apps
Page 49: Cross platform mobile web apps

Apps vs web technologybuilt with

Page 50: Cross platform mobile web apps
Page 51: Cross platform mobile web apps

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

Page 52: Cross platform mobile web apps

James Pearce @ jamespearce