21. Update Manifest file EVERY time ANY required resource changes
If resources fail to download, app will not update!
22. Update Manifest file EVERY time ANY required resource changes
If resources fail to download, app will not update!
Your old version will always start first
(Browser does not know if it has a connection initially)
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
23. Web Storage
A Simple Key/Value store for strings
localStorage.setItem("bar", foo);
localStorage["bar"] = foo;
24. Web Storage
A Simple Key/Value store for strings
localStorage.setItem("bar", foo);
localStorage["bar"] = foo;
But nothing to stop you from encoding JSON, image data, etc
25. Web Storage
A Simple Key/Value store for strings
localStorage.setItem("bar", foo);
localStorage["bar"] = foo;
But nothing to stop you from encoding JSON, image data, etc
Tied to a browser session or longer (similar to cookies)
26. Web SQL Database
Power of a client side RDBS
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)"
);
});
db.transaction(function(tx) {
tx.executeSql(
"insert into checkins (time, latitude, longitude) values (?,?,?);",
[checkin.time, checkin.latitude, checkin.longitude],
onSuccessHandler, onErrorHandler
);
});
27. Web SQL Database
Power of a client side RDBS
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)"
);
});
db.transaction(function(tx) {
tx.executeSql(
"insert into checkins (time, latitude, longitude) values (?,?,?);",
[checkin.time, checkin.latitude, checkin.longitude],
onSuccessHandler, onErrorHandler
);
});
That’s both good and bad
28. Web SQL Database
Power of a client side RDBS
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)"
);
});
db.transaction(function(tx) {
tx.executeSql(
"insert into checkins (time, latitude, longitude) values (?,?,?);",
[checkin.time, checkin.latitude, checkin.longitude],
onSuccessHandler, onErrorHandler
);
});
That’s both good and bad
Effectively a JavaScript wrapper around SQLite...
29.
30. Web DB set to be replaced
New initiative around IndexedDB
An indexed object store instead of
SQL
Early implementations in Chrome &
Firefox
But no support on mobile yet...
34. If you still need convincing check out
http://ro.me/
And other demos at www.chromeexperiments.com
35. Range of technologies to choose from
CSS3
- Mostly well supported and might get you a long way
36. Range of technologies to choose from
CSS3
- Mostly well supported and might get you a long way
Canvas and SVG
- Canvas is great for pixel perfect changes
- SVG if vectors are a better fit
37. Range of technologies to choose from
CSS3
- Mostly well supported and might get you a long way
Canvas and SVG
- Canvas is great for pixel perfect changes
- SVG if vectors are a better fit
WebGL
- Not there yet for mobiles and tablets but coming soon...
38. Think carefully about how you build your app
Avoid excessive browser reflows wherever possible
39. Think carefully about how you build your app
Avoid excessive browser reflows wherever possible
40. Think carefully about how you build your app
Avoid excessive browser reflows wherever possible
Avoid using setTimeout() loops
- Use requestAnimationFrame() instead
41. Think carefully about how you build your app
Avoid excessive browser reflows wherever possible
Avoid using setTimeout() loops
- Use requestAnimationFrame() instead
3D CSS transforms can speed up Desktop/iOS apps but
Android still has poor support
42. Think carefully about how you build your app
Avoid excessive browser reflows wherever possible
Avoid using setTimeout() loops
- Use requestAnimationFrame() instead
3D CSS transforms can speed up Desktop/iOS apps but
Android still has poor support
Check out Paul Irish’s great blog posts for more info
http://paulirish.com/2011/dom-html5-css3-performance/
48. Familiar syntax for web developers
Built on top of jQuery
Provides useful mobile widgets
It might be all you need...
49. 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
50.
51. Sencha Touch SproutCore
- Both modern Open Source projects
- Designed with pure JS mobile apps in mind
- Backed by two well financed startups
52. 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