HTML5 unplugged

535 views
425 views

Published on

Talk von SBB Developer Day 2012 über HTML5 Applikationen Offline-Applikationen

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

HTML5 unplugged

  1. 1. HTML5 unplugged marc.baechinger@zuehlke.com Dienstag, 11. Februar 14
  2. 2. The tale of the evernet Dienstag, 11. Februar 14
  3. 3. The World Wide Web. An evernet? Dienstag, 11. Februar 14
  4. 4. Dienstag, 11. Februar 14
  5. 5. In der freien Natur weitab von high speed Internet Dienstag, 11. Februar 14
  6. 6. in Tiefgaragen und anderen unterirdischen Räumen Dienstag, 11. Februar 14
  7. 7. Auf Reisen im Zug... Dienstag, 11. Februar 14
  8. 8. Text ...spätestens in Tunnels Dienstag, 11. Februar 14
  9. 9. beim Sparen von Roamingkosten Dienstag, 11. Februar 14
  10. 10. Dienstag, 11. Februar 14
  11. 11. Offline Technology Dienstag, 11. Februar 14
  12. 12. das Web wird sesshaft Dienstag, 11. Februar 14
  13. 13. resources app state data sources html, css, js, json, xml, png, mp3, mp4 appcache Dienstag, 11. Februar 14 localStorage File API Database API*
  14. 14. appcache Dienstag, 11. Februar 14 localStorage File API Database API*
  15. 15. Resource caching Dienstag, 11. Februar 14
  16. 16. <html manifest="sbb.appcache"> CACHE MANIFEST index.html styles.css app.js NETWORK: /service/fahrplan.json Dienstag, 11. Februar 14
  17. 17. Server Browser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
  18. 18. Server Browser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OK GET /index.html HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
  19. 19. Server Browser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OK GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /styles.css HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
  20. 20. Server Browser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OK GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /styles.css HTTP/1.1 HTTP/1.1 200 OK GET /app.js HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
  21. 21. offline resource cache 64.88% 22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
  22. 22. live reload demo reload reload Dienstag, 11. Februar 14
  23. 23. Application state Dienstag, 11. Februar 14
  24. 24. localStorage { setLastCheckDate: function() { localStorage.lastCacheCheck = new Date(); console.log(typeof localStorage.lastCacheCheck); // string }, getLastCheckDate: function () { if (localStorage.lastCacheCheck) { return new Date(localStorage.lastCacheCheck); } else { return undefined; } } } Dienstag, 11. Februar 14
  25. 25. localStorage var storage = { store: function(name, obj) { localStorage[name] = JSON.stringify(obj); }, read: function (name) { if (localStorage[name]) { return JSON.parse(localStorage[name]); } else { return undefined; } } }; Dienstag, 11. Februar 14
  26. 26. localStorage and sessionStorage 91.85% 22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
  27. 27. Data sources Dienstag, 11. Februar 14
  28. 28. SQL select var db = openDatabase("fahrplan", "1.0", "SBB", 50*1024*1024); db.transaction(function(tx) { tx.executeSql("SELECT * FROM favorite", [], ! ! ! function success (tx, rs) { ! ! ! ! callback({ ! ! ! ! ! connections: rs.rows ! ! ! ! }); ! ! ! }, ! ! ! function error () { ! ! ! ! console.error(arguments); ! ! ! } ); }); Dienstag, 11. Februar 14
  29. 29. SQL insert transaction.executeSql( ! "INSERT INTO favorite(dep, arrival)" + ! "VALUES (?,?)", ! [ ! connection.departure, ! connection.arrival ], ! successHandler, ! errorHandler ); Dienstag, 11. Februar 14
  30. 30. 45.44% Web SQL API 22 Mobile Dienstag, 11. Februar 14 - 12 5.1 Desktop - WWW
  31. 31. Indexed DB API 22 15 Mobile Dienstag, 11. Februar 14 17.92% Desktop - 10 WWW
  32. 32. Indexed or SQL DB API ~60% 22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
  33. 33. Network monitoring Dienstag, 11. Februar 14
  34. 34. network state window.addEventListener("offline", function(e) { $("#network-monitor").removeClass("online"); }, false); window.addEventListener("online", function(e) { $("#network-monitor").addClass("online"); }, false); var search = function (callback) { if (navigator.onLine) { $.ajax({success: callback}); } else { callback(localStorage.lastSearch); } } Dienstag, 11. Februar 14
  35. 35. navigator.connection navigator.connection.bandwidth navigator.connection.metered Dienstag, 11. Februar 14
  36. 36. navigator.connection.type Connection.UNKNOWN Connection.ETHERNET Connection.WIFI Connection.CELL_2G Connection.CELL_3G Connection.CELL_4G Connection.NONE Dienstag, 11. Februar 14
  37. 37. Server availability // register global ajax handlers $(document).ajaxSuccess(setOnline); $(document).ajaxError(setOffline); // check for backend server availabiliy var checkServerAvailability = function (callback) { ! $.ajax({ ! url: "data/probe.json", ! ! dataType: "json", ! ! timeout: CONNECTION_TIMEOUT, ! ! complete: callback || function () {} ! }); }; checkServerAvailability(); Dienstag, 11. Februar 14
  38. 38. Platform integration Dienstag, 11. Februar 14
  39. 39. WWW Cordova/ Worklight Windows RT Safari iOS Firefox Aurora Firefox Android CEF/App.js/ Brakets shell Dienstag, 11. Februar 14 Mobile OSX Dashboard standalone Desktop Firefox OS
  40. 40. Desktop Mobile standalone standalone OSX Dashboard Cordova/ Worklight Windows RT Safari iOS Firefox Aurora Firefox Android standalone WWW CEF/App.js/ Brakets shell Dienstag, 11. Februar 14 standalone Firefox OS
  41. 41. Desktop Mobile standalone Cordova/ Worklight standalone OSX Dashboard Appstore Windows RT Safari iOS Appstore standalone WWW CEF/App.js/ Brakets shell Appstore Appstore Firefox Android Firefox Aurora standalone Dienstag, 11. Februar 14 Appstore Appstore Firefox OS Appstore
  42. 42. Modern Browsers + + + + + Dienstag, 11. Februar 14 Desktop/Tablet/Phone Simple Deployment Bookmark, Favorites, Pinned Site/Tabs Browser Home als Einstiegspunkt Fullscreen Modus verfügbar keine Desktop-Integration Abhängigkeit vom Browser als Platform
  43. 43. Add to Home Screen Dienstag, 11. Februar 14
  44. 44. Add to Home Screen Dienstag, 11. Februar 14
  45. 45. Add to Home Screen Dienstag, 11. Februar 14
  46. 46. live reload demo reload reload Dienstag, 11. Februar 14
  47. 47. iOS und Android Apps Dienstag, 11. Februar 14
  48. 48. Chromium Embedding Framework + + + Dienstag, 11. Februar 14 Desktop-Integration Standalone für Win/Mac/Lin einheitliche HTML/JS-Engine Installer notwendig Build- und Konfigurationsskills
  49. 49. Firefox OS/ Marketplace Dienstag, 11. Februar 14
  50. 50. Dienstag, 11. Februar 14
  51. 51. @marcbaechinger ks for tha n ening list Q&A Browsercoveragedaten: caniuse.com Dienstag, 11. Februar 14
  52. 52. Backup slides Dienstag, 11. Februar 14
  53. 53. Wsasx 0.0002% 22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
  54. 54. feature testing Dienstag, 11. Februar 14
  55. 55. Sencha Desktop Packager Dienstag, 11. Februar 14
  56. 56. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache
  57. 57. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache
  58. 58. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload
  59. 59. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload
  60. 60. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload
  61. 61. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload
  62. 62. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving file at: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload reload
  63. 63. The HTML(5) (r)evolution Dienstag, 11. Februar 14
  64. 64. HTML5 is a conspiracy theory! • Standardisierung existierender, fortgeschrittener Browserfeatures • Öffentlichkeitswirksame Promotion der Webtechnologie • Google, Mozilla, Apple, Opera, Microsoft • die Gunst der x-platform-Problematik nutzend • von der Webpage zur Webapplication • mobile is a game changer Dienstag, 11. Februar 14
  65. 65. JavaScript APIs JavaScript API werden Web Standards Dienstag, 11. Februar 14
  66. 66. CSS3 - runde Ecken machen glücklich • • • • • box-sizing border-radius opacity box-shadow, text-shadow gradients • transitions, animations (GPU support) • @media queries • • • simplifizierte DOM-Struktur (tables must die!) skalierbare, hi-res GUIs (no bitmaps) Responsive Design Dienstag, 11. Februar 14
  67. 67. <!DOCTYPE html> http://www.html5rocks.com Dienstag, 11. Februar 14
  68. 68. Das Web wurde eine RIA Platform • Browserkonvergenz auf hohem Niveau • fortgeschrittener CSS Support • Offline und Storage features • Performance- und Reliability-Boost • Vendor-Kooperation und Ökosystem • Applikationen statt Websites (shift of mind) • erprobte MVC-Architekturen Dienstag, 11. Februar 14

×