Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Get Ahead with HTML5 on Moible

1,163 views

Published on

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

Published in: Technology
  • Be the first to comment

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/

×