A Snapshot of the Mobile HTML5 Revolution @ jamespearce The - - PowerPoint PPT Presentation

▶
a snapshot of the mobile html5 revolution
SMART_READER_LITE
LIVE PREVIEW

A Snapshot of the Mobile HTML5 Revolution @ jamespearce The - - PowerPoint PPT Presentation

Jan 21, 2024 189 likes •1.03k views

A Snapshot of the Mobile HTML5 Revolution @ jamespearce The Pledge Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive,

slide-1
SLIDE 1

A Snapshot of the Mobile HTML5 Revolution

@ jamespearce

slide-2
SLIDE 2

The Pledge

slide-3
SLIDE 3

Single device Sedentary user Declarative Thin client Documents Multi device Mobile user Imperative Thick client Applications

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

slide-4
SLIDE 4

A badge for all these ways the web is changing

slide-5
SLIDE 5

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
slide-6
SLIDE 6

WHATWG

slide-7
SLIDE 7

What is an Application?

slide-8
SLIDE 8

Consumption vs Creation? Linkable? User Experience? Architecture?

slide-9
SLIDE 9

Nativeness Site Native apps Web sites Web apps App

slide-10
SLIDE 10

MS

RIM Apple Google Top US Smartphone Platforms August 2011, comScore MobiLens

slide-11
SLIDE 11

C#

J2ME/Air Obj-C Java/C++ Native programming languages you’ll need August 2011

slide-12
SLIDE 12

IE

WebKit WebKit WebKit Browser platforms to target August 2011

slide-13
SLIDE 13

There is no WebKit on Mobile

  • @ppk
slide-14
SLIDE 14

But at least we are using

  • ne language,
  • ne markup,
  • ne style system
slide-15
SLIDE 15

One Stack

slide-16
SLIDE 16

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

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

The Turn

slide-20
SLIDE 20

IE Chrome Safari Firefox iOS BBX Android @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow:

  • pacity:

Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB

slide-21
SLIDE 21

Stay on top of diversity

Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com

slide-22
SLIDE 22

Capabilities & specifications Support 100% Browsers

slide-23
SLIDE 23

Capabilities & specifications 100% Polyfills Support Frameworks Browsers

slide-24
SLIDE 24
slide-25
SLIDE 25

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

slide-26
SLIDE 26
slide-27
SLIDE 27

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

slide-28
SLIDE 28
slide-29
SLIDE 29

One Web stack

Storage Business logic User interface request Rendering server client response

slide-30
SLIDE 30

An Alternative Web Stack

Storage Business logic User interface sync server client Storage API

slide-31
SLIDE 31

But there is a a place for both

slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34

But...

slide-35
SLIDE 35

HTML5 apps can’t match native performance

(true, sometimes)

slide-36
SLIDE 36

http://vimeo.com/30296006 http://vimeo.com/30324079

slide-37
SLIDE 37

Are HTML5 apps more efficient to develop?

(yes, in theory, but it’s early days)

slide-38
SLIDE 38
slide-39
SLIDE 39

24 dev-months for iOS

http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html

slide-40
SLIDE 40

12 further dev-months for Android & BlackBerry

http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html

slide-41
SLIDE 41

...but more engagement than the native app

slide-42
SLIDE 42

Mobile HTML5 development lacks good tooling

(yes)

slide-43
SLIDE 43

http://github.com/jamesgpearce/confess

slide-44
SLIDE 44

Weinre

slide-45
SLIDE 45

HTML5 apps can’t be monetized, can’t be distributed

(not a technology problem)

slide-46
SLIDE 46

Nativeness Compromise Native apps Web sites Web apps Hybrid apps

slide-47
SLIDE 47

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

slide-48
SLIDE 48

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

slide-49
SLIDE 49

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

slide-50
SLIDE 50
slide-51
SLIDE 51

Native app stores have a dirty secret

slide-52
SLIDE 52
slide-53
SLIDE 53

HTML5 apps can’t access device functionality

(goddamn it)

slide-54
SLIDE 54

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

slide-55
SLIDE 55

Hybrid apps

  • the ultimate polyfill
slide-56
SLIDE 56

PhoneGap^H^H^H Apache Callback AppMobi NimbleKit

slide-57
SLIDE 57

Recent browser updates

slide-58
SLIDE 58

iOS 5

Input types contenteditable position:fixed classList XHR2 Script defer & async Inline SVG Web Workers

slide-59
SLIDE 59
  • verflow: scroll;
  • webkit-overflow-scrolling: touch;
slide-60
SLIDE 60

http://jamesgpearce.github.com/compios5/

slide-61
SLIDE 61

Android 4

SVG at all CSS3 3D transforms classList XHR2 Script defer & async <details> & <summary> File reader Device orientation Navigation timing

slide-62
SLIDE 62

window.performance

slide-63
SLIDE 63

<input type="file" id="picker" accept="image/*" capture="camera" > // camcorder // microphone // filesystem var image = picker.files[0];

slide-64
SLIDE 64

The Prestige

slide-65
SLIDE 65

Sir Isaac Newton

slide-66
SLIDE 66

Three Laws of Motion

(the universe works as we might expect it to)

slide-67
SLIDE 67

Edward Morley Albert Michelson

slide-68
SLIDE 68

Light Travels at a Constant Speed

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

slide-69
SLIDE 69
slide-70
SLIDE 70

Classical Mechanics Relativistic Mechanics Quantum Mechanics Familiarity Exploration Exploration

slide-71
SLIDE 71

The Web Today is like Physics in 1900

slide-72
SLIDE 72

Mobile is our Michelson-Morley Experiment

slide-73
SLIDE 73

Apps or Sites? Responsive Design? Browser diversity? Mobile Context? One Web?

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

slide-74
SLIDE 74

What does the web look like when you have...

slide-75
SLIDE 75

Camera Microphone Contacts Calendar Messaging Telephony NFC ?

slide-76
SLIDE 76

Media Capture (HTML) Battery status Contacts Messaging (SMS, MMS...) Network Information API Media Capture (API) Application Registration Calendar Feature Permissions Sensor API Vibration API Menu API Permissions for APIs Audio Volume Beep Gallery Systems info and events Tasks

slide-77
SLIDE 77

Accelerometer Orientation Camera DeviceStatus Filesystem Messaging Geolocation PIM Contacts Calendar Tasks DeviceInteraction APDU (SmartCard) Bluetooth Crypto DLNA Server Push Sensor Telephony

slide-78
SLIDE 78

Telephony Messaging Contacts Clock Camera Filesystem Calculator Device Status Settings Accelerometer Mouse Lock Maps

slide-79
SLIDE 79

The mobile web becomes more than a 320px web

slide-80
SLIDE 80

window.addEventListener( 'appointmentdue', function(appt) { if (device.near(WORK)) { siri.remind( contacts.get('Peter'), calendar.getDetails(appt) ); } }, false );

(PS: This code does not work. Yet)

slide-81
SLIDE 81
slide-82
SLIDE 82

Mobile device APIs are the web’s next great leap forward

slide-83
SLIDE 83
slide-84
SLIDE 84

James Pearce

@ jamespearce