![Web Storage
A Simple Key/Value store for strings
localStorage.setItem("bar", foo);
localStorage["bar"] = foo;](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-23-320.jpg)
![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](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-24-320.jpg)
![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)](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-25-320.jpg)
![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
);
});](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-26-320.jpg)
![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](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-27-320.jpg)
![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...](https://image.slidesharecdn.com/fdgltalk-110616070953-phpapp02/85/Get-Ahead-with-HTML5-on-Moible-28-320.jpg)
Get Ahead with HTML5 on Moible
- 1. Get Ahead With HTML5 On Mobile Markus Kobler
- 10. 3) Immersive & Engaging
- 11. 4) No Permission Needed
- 12. 5) Evolving Fast
- 15. Offline Storage
- 16. AppCache very simple to add... 1) List all your resources in a manifest file
- 17. AppCache very simple to add... 1) List all your resources in a manifest file 2) Reference your manifest file in the <html> tag
- 20. Update Manifest file EVERY time ANY required resource changes
- 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...
- 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...
- 31. Graphics
- 32. Bling
- 33. Web’s performance is getting quicker every day
- 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/
- 43. Network Effects
- 45. Websocket Demo
- 46. Tooling
- 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
- 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
- 53. Summing up
- 54. HTML5 is still a bit of a jungle... Tropic Thunder © 2008 DreamWorks Pictures
- 55. ...all new technologies can cause initial pain Tropic Thunder © 2008 DreamWorks Pictures
- 56. Don’t forget to test throughout the development process
- 57. and on as many platforms as possible
- 58. It’s never been a better
- 59. It’s never been a better time to get started
- 60. Thank you for listening Feedback appreciated @markuskobler distinctive.co
- 61. Useful Links Spec’s - http://www.whatwg.org/specs/web-apps/current-work/multipage/ - http://www.w3.org/TR/html5/offline.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/
- 62. 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/