Get Ahead with HTML5 on Moible

Markus Kobler Get Ahead With HTML5 On Mobile

Overview Ofﬂine Storage Networking Graphics Tooling

1) Useable Today

2) Works Ofﬂine

3) Immersive & Engaging

4) No Permission Needed

5) Evolving Fast

Simple Sudoku Demo j.mp/sudokuapp

Offline Storage

AppCache very simple to add... 1) List all your resources
in a manifest ﬁle

AppCache very simple to add... 1) List all your resources
in a manifest ﬁle 2) Reference your manifest ﬁle in the <html> tag

Update Manifest ﬁle EVERY time ANY required resource changes

Update Manifest ﬁle EVERY time ANY required resource changes If
resources fail to download, app will not update!

window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); window.location.reload();
} }, false); Update Manifest ﬁle EVERY time ANY required resource changes If resources fail to download, app will not update! Your old version will always start ﬁrst (Browser does not know if it has a connection initially)

A Simple Key/Value store for strings Web Storage localStorage.setItem("bar", foo);
localStorage["bar"] = foo;

A Simple Key/Value store for strings Web Storage localStorage.setItem("bar", foo);
localStorage["bar"] = foo; But nothing to stop you from encoding JSON, image data, etc

A Simple Key/Value store for strings Tied to a browser
session or longer (similar to cookies) Web Storage localStorage.setItem("bar", foo); localStorage["bar"] = foo; But nothing to stop you from encoding JSON, image data, etc

Web SQL Database var db = openDatabase('example', '1.0', 'Checkins', 8192);
db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); Power of a client side RDBS db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); });

Web SQL Database That’s both good and bad var db
= openDatabase('example', '1.0', 'Checkins', 8192); db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); Power of a client side RDBS db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); });

Web SQL Database That’s both good and bad Effectively a
JavaScript wrapper around SQLite... var db = openDatabase('example', '1.0', 'Checkins', 8192); db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); Power of a client side RDBS db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); });

New initiative around IndexedDB An indexed object store instead of
SQL Early implementations in Chrome & Firefox But no support on mobile yet... Web DB set to be replaced

Graphics

Web’s performance is getting quicker every day

If you still need convincing check out http://ro.me/ And other
demos at www.chromeexperiments.com

CSS3 - Mostly well supported and might get you a
long way Range of technologies to choose from

long way Canvas and SVG - Canvas is great for pixel perfect changes - SVG if vectors are a better ﬁt Range of technologies to choose from

long way Canvas and SVG - Canvas is great for pixel perfect changes - SVG if vectors are a better ﬁt WebGL - Not there yet for mobiles and tablets but coming soon... Range of technologies to choose from

Avoid excessive browser reﬂows wherever possible Think carefully about how
you build your app

Think carefully about how you build your app Avoid using
setTimeout() loops - Use requestAnimationFrame() instead Avoid excessive browser reﬂows wherever possible

setTimeout() loops - Use requestAnimationFrame() instead Avoid excessive browser reﬂows wherever possible 3D CSS transforms can speed up Desktop/iOS apps but Android still has poor support

setTimeout() loops - Use requestAnimationFrame() instead Avoid excessive browser reﬂows wherever possible Check out Paul Irish’s great blog posts for more info http://paulirish.com/2011/dom-html5-css3-performance/ 3D CSS transforms can speed up Desktop/iOS apps but Android still has poor support

Network Effects

Websocket Demo

Tooling

Familiar syntax for web developers Built on top of jQuery
Provides useful mobile widgets It might be all you need...

Familiar syntax for web developers Built on top of jQuery
Provides useful mobile widgets It might be all you need... complex apps typically demand more

Sencha Touch SproutCore - Both modern Open Source projects -
Designed with pure JS mobile apps in mind - Backed by two well ﬁnanced startups

Google Web Toolkit Java (& XML) at core Mature and
fully featured Works well with teams of Dev’s Aggressively optimised But will not be to everyone’s taste

Summing up

Don’t forget to test throughout the development process

and on as many platforms as possible

It’s never been a better

It’s never been a better time to get started

Thank you for listening distinctive.co Feedback appreciated @markuskobler

Useful Links Spec’s - http://www.whatwg.org/specs/web-apps/current-work/multipage/ - http://www.w3.org/TR/html5/ofﬂine.html - http://www.w3.org/TR/webstorage/ -
http://www.w3.org/TR/IndexedDB/ - http://www.w3.org/TR/websockets/ Frameworks - http://jquerymobile.com/ - http://www.sencha.com/products/touch/ - http://www.sproutcore.com/ - http://code.google.com/webtoolkit/ Useful Links - http://www.html5rocks.com/ - http://caniuse.com/ - http://html5demos.com/ - http://www.browserscope.org/

Image Credits Annie Mole - http://www.flickr.com/photos/anniemole/2424372024/sizes/l/in/photostream/ Yaniv Golan - http://www.flickr.com/photos/yghelloworld/4964999147/sizes/l/in/photostream/
Achew *Bokehmon* - http://www.flickr.com/photos/achew/3987039984/in/photostream/ Liam Johnson - http://www.flickr.com/photos/livelavalove/4899123302/sizes/l/in/photostream/ Cdevers - http://www.flickr.com/photos/cdevers/4602805654/sizes/l/in/photostream/ Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871132100/sizes/l/in/photostream/ Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871130172/in/photostream/ Afagen - http://www.flickr.com/photos/afagen/4913607219/sizes/l/in/photostream/ Langley Research Center - Nasa http://grin.hq.nasa.gov/ABSTRACTS/GPN-2000-001907.html Ming Xia - http://www.flickr.com/photos/xiaming/476229544/

Get Ahead with HTML5 on Moible

Get Ahead with HTML5 on Moible

More Decks by Markus Kobler

Other Decks in Programming

Featured

Transcript