HTML5 unplugged

HTML5
unplugged

marc.baechinger@zuehlke.com
Dienstag, 11. Februar 14

The tale of the
evernet

The World Wide Web.
An evernet?


In der freien Natur weitab von
high speed Internet


in Tiefgaragen und
anderen unterirdischen Räumen

Auf Reisen im Zug...


Text

...spätestens in Tunnels


beim Sparen von Roamingkosten


Ofﬂine
Technology

das Web wird sesshaft


resources

app state

data sources

html, css, js,
json, xml,
png, mp3,
mp4

appcache


localStorage

File API

Database API*

appcache


localStorage

File API

Database API*

Resource caching

<html manifest="sbb.appcache">

CACHE MANIFEST
index.html
styles.css
app.js
NETWORK:
/service/fahrplan.json


Server

Browser
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
GET /sbb.appcache HTTP/1.1
HTTP/1.1 200 OK


Server

Browser
HTTP/1.1 200 OK
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
HTTP/1.1 200 OK

HTTP/1.1 200 OK


Server

Browser
HTTP/1.1 200 OK
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
HTTP/1.1 200 OK

HTTP/1.1 200 OK
GET /styles.css HTTP/1.1
HTTP/1.1 200 OK


Server

Browser
HTTP/1.1 200 OK
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
HTTP/1.1 200 OK

HTTP/1.1 200 OK
GET /styles.css HTTP/1.1
HTTP/1.1 200 OK
GET /app.js HTTP/1.1
HTTP/1.1 200 OK


ofﬂine resource cache

64.88%

22 15 12 5.1 10
Mobile

Desktop

WWW

live reload
demo reload
reload

Application state

localStorage
{
setLastCheckDate: function() {
localStorage.lastCacheCheck = new Date();
console.log(typeof localStorage.lastCacheCheck); // string
},
getLastCheckDate: function () {
if (localStorage.lastCacheCheck) {
return new Date(localStorage.lastCacheCheck);
} else {
return undefined;
}
}
}


localStorage
var storage = {
store: function(name, obj) {
localStorage[name] = JSON.stringify(obj);
},
read: function (name) {
if (localStorage[name]) {
return JSON.parse(localStorage[name]);
} else {
return undefined;
}
}
};


localStorage and sessionStorage

91.85%

22 15 12 5.1 8
Mobile

Desktop

WWW

Data sources

SQL select
var db = openDatabase("fahrplan", "1.0", "SBB",
50*1024*1024);
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM favorite", [],
! ! ! function success (tx, rs) {
! ! ! ! callback({
! ! ! ! ! connections: rs.rows
! ! ! ! });
! ! ! },
! ! ! function error () {
! ! ! ! console.error(arguments);
! ! ! }
);
});

SQL insert
transaction.executeSql(
! "INSERT INTO favorite(dep, arrival)" +
! "VALUES (?,?)",
! [
! connection.departure,
! connection.arrival
],
! successHandler,
! errorHandler
);

45.44%

Web SQL API

22
Mobile

-

12 5.1
Desktop

-

WWW

Indexed DB API

22 15
Mobile

17.92%

Desktop

-

10
WWW

Indexed or SQL DB API

~60%

22 15 12 5.1 10
Mobile

Desktop

WWW

Network monitoring

network state
window.addEventListener("offline", function(e) {
$("#network-monitor").removeClass("online");
}, false);
window.addEventListener("online", function(e) {
$("#network-monitor").addClass("online");
}, false);
var search = function (callback) {
if (navigator.onLine) {
$.ajax({success: callback});
} else {
callback(localStorage.lastSearch);
}
}

navigator.connection

navigator.connection.bandwidth
navigator.connection.metered


navigator.connection.type

Connection.UNKNOWN
Connection.ETHERNET
Connection.WIFI
Connection.CELL_2G
Connection.CELL_3G
Connection.CELL_4G
Connection.NONE

Server availability
// register global ajax handlers
$(document).ajaxSuccess(setOnline);
$(document).ajaxError(setOffline);
// check for backend server availabiliy
var checkServerAvailability = function (callback) {
! $.ajax({
!
url: "data/probe.json",
! ! dataType: "json",
! ! timeout: CONNECTION_TIMEOUT,
! ! complete: callback || function () {}
! });
};
checkServerAvailability();


Platform
integration

WWW

Cordova/
Worklight

Windows RT

Safari iOS

Firefox Aurora

Firefox Android

CEF/App.js/
Brakets shell


Mobile

OSX Dashboard

standalone

Desktop

Firefox OS

Desktop

Mobile
standalone

standalone

OSX Dashboard

Cordova/
Worklight

Windows RT

Safari iOS

Firefox Aurora

Firefox Android

standalone

WWW

CEF/App.js/
Brakets shell


standalone

Firefox OS

Desktop

Mobile
standalone

Cordova/
Worklight

standalone

OSX Dashboard
Appstore

Windows RT

Safari iOS

Appstore

standalone

WWW

CEF/App.js/
Brakets shell

Appstore

Appstore

Firefox Android

Firefox Aurora
standalone


Appstore

Appstore

Firefox OS

Appstore

Modern Browsers

+
+
+
+
+

Desktop/Tablet/Phone
Simple Deployment
Bookmark, Favorites, Pinned Site/Tabs
Browser Home als Einstiegspunkt
Fullscreen Modus verfügbar
keine Desktop-Integration
Abhängigkeit vom Browser als Platform

Add to Home Screen


iOS und Android Apps


Chromium
Embedding Framework

+
+
+

Desktop-Integration
Standalone für Win/Mac/Lin
einheitliche HTML/JS-Engine
Installer notwendig
Build- und Konﬁgurationsskills

Firefox OS/
Marketplace


@marcbaechinger

ks for
tha n
ening
list

Q&A
Browsercoveragedaten: caniuse.com

Backup slides


Wsasx

0.0002%

22 15 12 5.1 8
Mobile

Desktop

WWW

feature testing

Sencha Desktop
Packager


server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
serving
serving

file
file
file
file
file
file
file
file

at:
at:
at:
at:
at:
at:
at:
at:

src/index.html
src/sbb.appcache
src/css/bootstrap.css
src/css/style.css
src/css/bootstrap-responsive.css
src/lib/jquery-1.8.2.js
src/javascript/main.js
src/img/train.jpg

debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving

file
file
file
file
file
file

at:
at:
at:
at:
at:
at:

src/img/train.jpg
src/css/style.css

debug:
debug:
debug:

serving file at:
serving file at:
serving file at:


src/sbb.appcache
src/sbb.appcache
src/sbb.appcache

server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
serving
serving

file
file
file
file
file
file
file
file

at:
at:
at:
at:
at:
at:
at:
at:

src/index.html
src/sbb.appcache
src/css/style.css
src/img/train.jpg

debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving

file
file
file
file
file
file

at:
at:
at:
at:
at:
at:

src/img/train.jpg
src/css/style.css

debug:
debug:
debug:

serving file at:
serving file at:
serving file at:


src/sbb.appcache
src/sbb.appcache
src/sbb.appcache

reload

server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
serving
serving

file
file
file
file
file
file
file
file

at:
at:
at:
at:
at:
at:
at:
at:

src/index.html
src/sbb.appcache
src/css/style.css
src/img/train.jpg

debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving

file
file
file
file
file
file

at:
at:
at:
at:
at:
at:

src/img/train.jpg
src/css/style.css

debug:
debug:
debug:

serving file at:
serving file at:
serving file at:


src/sbb.appcache
src/sbb.appcache
src/sbb.appcache

reload
reload

server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
serving
serving

file
file
file
file
file
file
file
file

at:
at:
at:
at:
at:
at:
at:
at:

src/index.html
src/sbb.appcache
src/css/style.css
src/img/train.jpg

debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving

file
file
file
file
file
file

at:
at:
at:
at:
at:
at:

src/img/train.jpg
src/css/style.css

debug:
debug:
debug:

serving file at:
serving file at:
serving file at:


src/sbb.appcache
src/sbb.appcache
src/sbb.appcache

reload
reload
reload

The HTML(5)
(r)evolution

HTML5 is a conspiracy theory!
• Standardisierung existierender, fortgeschrittener
Browserfeatures

• Öffentlichkeitswirksame Promotion der
Webtechnologie

• Google, Mozilla, Apple, Opera, Microsoft
• die Gunst der x-platform-Problematik nutzend
• von der Webpage zur Webapplication
• mobile is a game changer

JavaScript APIs

JavaScript API werden Web Standards


CSS3 - runde Ecken machen glücklich
•
•
•
•
•

box-sizing
border-radius
opacity
box-shadow, text-shadow
gradients

•

transitions, animations (GPU support)

•

@media queries

•
•
•

simpliﬁzierte DOM-Struktur (tables must die!)
skalierbare, hi-res GUIs (no bitmaps)
Responsive Design


<!DOCTYPE html>

http://www.html5rocks.com

Das Web wurde eine RIA Platform
• Browserkonvergenz auf hohem Niveau
• fortgeschrittener CSS Support
• Ofﬂine und Storage features
• Performance- und Reliability-Boost
• Vendor-Kooperation und Ökosystem
• Applikationen statt Websites (shift of mind)
• erprobte MVC-Architekturen

HTML5 unplugged

Recommended

Recommended

More Related Content

Featured

Featured (20)

HTML5 unplugged