Get Ahead With HTML5On MobileMarkus Kobler
OverviewOffline StorageGraphicsNetworkingTooling
1) Useable Today
1) Useable Today
1) Useable Today
1) Useable Today
2) Works Offline
3) Immersive & Engaging
4) No Permission Needed
5) Evolving Fast
Simple Sudoku Demoj.mp/sudokuapp
Simple Sudoku Demoj.mp/sudokuapp
Offline Storage
AppCache very simple to add...1) List all your resources in a manifest file
AppCache very simple to add...1) List all your resources in a manifest file2) Reference your manifest file in the <html> tag
Update Manifest file EVERY time ANY required resource changes
Update Manifest file EVERY time ANY required resource changesIf resources fail to download, app will not update!
Update Manifest file EVERY time ANY required resource changes If resources fail to download, app will not update! Your old ...
Web Storage A Simple Key/Value store for strings                  localStorage.setItem("bar", foo);                  local...
Web Storage A Simple Key/Value store for strings                  localStorage.setItem("bar", foo);                  local...
Web Storage A Simple Key/Value store for strings                   localStorage.setItem("bar", foo);                   loc...
Web SQL Database  Power of a client side RDBS  var db = openDatabase(example, 1.0, Checkins, 8192);  db.transaction(functi...
Web SQL Database  Power of a client side RDBS  var db = openDatabase(example, 1.0, Checkins, 8192);  db.transaction(functi...
Web SQL Database  Power of a client side RDBS  var db = openDatabase(example, 1.0, Checkins, 8192);  db.transaction(functi...
Web DB set to be replaced          New initiative around IndexedDB          An indexed object store instead of          SQ...
Graphics
Bling
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
Range of technologies to choose from  CSS3  - Mostly well supported and might get you a long way
Range of technologies to choose from  CSS3  - Mostly well supported and might get you a long way  Canvas and SVG  - Canvas...
Range of technologies to choose from  CSS3  - Mostly well supported and might get you a long way  Canvas and SVG  - Canvas...
Think carefully about how you build your app    Avoid excessive browser reflows wherever possible
Think carefully about how you build your app    Avoid excessive browser reflows wherever possible
Think carefully about how you build your app    Avoid excessive browser reflows wherever possible    Avoid using setTimeout...
Think carefully about how you build your app    Avoid excessive browser reflows wherever possible    Avoid using setTimeout...
Think carefully about how you build your app    Avoid excessive browser reflows wherever possible    Avoid using setTimeout...
Network Effects
Websocket Demo
Tooling
Familiar syntax for web developersBuilt on top of jQueryProvides useful mobile widgetsIt might be all you need...
Familiar syntax for web developers           Built on top of jQuery           Provides useful mobile widgets           It ...
Sencha Touch                      SproutCore- Both modern Open Source projects- Designed with pure JS mobile apps in mind-...
Google Web Toolkit   Java (& XML) at core   Mature and fully featured   Works well with teams of Dev’s   Aggressively opti...
Summing up
HTML5 is still a bit of a jungle...                 Tropic Thunder © 2008 DreamWorks Pictures
...all new technologies can cause initial pain                                     Tropic Thunder © 2008 DreamWorks Pictures
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 bettertime to get started
Thank you for listeningFeedback appreciated@markuskoblerdistinctive.co
Useful Links    Spec’s     - http://www.whatwg.org/specs/web-apps/current-work/multipage/     - http://www.w3.org/TR/html5...
Image Credits  Annie Mole - http://www.flickr.com/photos/anniemole/2424372024/sizes/l/in/photostream/  Yaniv Golan - http:/...
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
Upcoming SlideShare
Loading in …5
×

Get Ahead with HTML5 on Moible

1,092 views
1,052 views

Published on

Slides from a Facebook Developer Garage talk on HTML5 I was asked to give.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,092
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Get Ahead with HTML5 on Moible

  1. 1. Get Ahead With HTML5On MobileMarkus Kobler
  2. 2. OverviewOffline StorageGraphicsNetworkingTooling
  3. 3. 1) Useable Today
  4. 4. 1) Useable Today
  5. 5. 1) Useable Today
  6. 6. 1) Useable Today
  7. 7. 2) Works Offline
  8. 8. 3) Immersive & Engaging
  9. 9. 4) No Permission Needed
  10. 10. 5) Evolving Fast
  11. 11. Simple Sudoku Demoj.mp/sudokuapp
  12. 12. Simple Sudoku Demoj.mp/sudokuapp
  13. 13. Offline Storage
  14. 14. AppCache very simple to add...1) List all your resources in a manifest file
  15. 15. AppCache very simple to add...1) List all your resources in a manifest file2) Reference your manifest file in the <html> tag
  16. 16. Update Manifest file EVERY time ANY required resource changes
  17. 17. Update Manifest file EVERY time ANY required resource changesIf resources fail to download, app will not update!
  18. 18. 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);
  19. 19. Web Storage A Simple Key/Value store for strings localStorage.setItem("bar", foo); localStorage["bar"] = foo;
  20. 20. 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
  21. 21. 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)
  22. 22. 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 ); });
  23. 23. 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
  24. 24. 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...
  25. 25. 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...
  26. 26. Graphics
  27. 27. Bling
  28. 28. Web’s performance is getting quicker every day
  29. 29. If you still need convincing check out http://ro.me/And other demos at www.chromeexperiments.com
  30. 30. Range of technologies to choose from CSS3 - Mostly well supported and might get you a long way
  31. 31. 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
  32. 32. 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...
  33. 33. Think carefully about how you build your app Avoid excessive browser reflows wherever possible
  34. 34. Think carefully about how you build your app Avoid excessive browser reflows wherever possible
  35. 35. Think carefully about how you build your app Avoid excessive browser reflows wherever possible Avoid using setTimeout() loops - Use requestAnimationFrame() instead
  36. 36. 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
  37. 37. 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/
  38. 38. Network Effects
  39. 39. Websocket Demo
  40. 40. Tooling
  41. 41. Familiar syntax for web developersBuilt on top of jQueryProvides useful mobile widgetsIt might be all you need...
  42. 42. 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
  43. 43. Sencha Touch SproutCore- Both modern Open Source projects- Designed with pure JS mobile apps in mind- Backed by two well financed startups
  44. 44. 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
  45. 45. Summing up
  46. 46. HTML5 is still a bit of a jungle... Tropic Thunder © 2008 DreamWorks Pictures
  47. 47. ...all new technologies can cause initial pain Tropic Thunder © 2008 DreamWorks Pictures
  48. 48. Don’t forget to test throughout the development process
  49. 49. and on as many platforms as possible
  50. 50. It’s never been a better
  51. 51. It’s never been a bettertime to get started
  52. 52. Thank you for listeningFeedback appreciated@markuskoblerdistinctive.co
  53. 53. 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/
  54. 54. 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/

×