ola gasidlo
play

Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - - PowerPoint PPT Presentation

Dec 18, 2022 •867 likes •2.22k views

Say Hello To Offline First How to build applications for the real world we <3 GOTOBerlin Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - Co-Organizer of OTSConf && RejectJS twitter: @misprintedtype Agenda 1. What

  1. Say Hello To Offline First How to build applications for the real world we <3 GOTOBerlin

  2. Ola Gasidlo - Developer for +10 years - Core Member of Hoodie - Co-Organizer of OTSConf && RejectJS twitter: @misprintedtype

  3. Agenda 1. What & why? 2. Problems 3. New approach 4. Implementation @misprintedtype

  4. What & why? @misprintedtype

  5. The internet turned 25 last year! @misprintedtype

  6. We grew up. @misprintedtype

  7. @misprintedtype

  8. amount of mobile-only web users is out of reach @misprintedtype

  9. Tell me... @misprintedtype

  10. @misprintedtype

  13. Problems @misprintedtype

  14. @misprintedtype

  15. @misprintedtype

  16. offline > error handling @misprintedtype

  17. inform user @misprintedtype

  18. @misprintedtype

  19. build trust @misprintedtype

  20. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  21. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  22. organise data @misprintedtype

  23. @misprintedtype

  24. decide @misprintedtype

  27. @misprintedtype

  28. @misprintedtype

  29. @misprintedtype

  30. @misprintedtype

  31. ? @misprintedtype

  32. @misprintedtype

  33. @misprintedtype

  34. @misprintedtype

  35. @misprintedtype

  36. @misprintedtype

  37. ? @misprintedtype

  38. ? @misprintedtype

  39. ? @misprintedtype

  40. @misprintedtype

  41. ? @misprintedtype

  42. @misprintedtype

  45. New Approaches @misprintedtype

  46. Rethink! (but how?) @misprintedtype

  47. http://hood.ie

  54. Implementation @misprintedtype

  55. files data

  56. files data

  57. Manifest @misprintedtype

  58. App Cache is a douchebag! http://alistapart.com/article/application-cache-is-a-douchebag

  59. App Manifest 1. Files always come from the cache (also if you are online!) @misprintedtype

  60. App Manifest 2. App Cache only updates if manifest changed @misprintedtype

  61. App Manifest 3. App Cache is an additional cache @misprintedtype

  62. App Manifest 4. Non-cached resources will not load @misprintedtype

  63. App Cache nanny https://www.npmjs.org/package/appcache-nanny @misprintedtype

  64. Wor k i t ! @misprintedtype

  65. Web wha t ?! @misprintedtype

  66. web worker - HTML5 feature - runs JS in browser @misprintedtype

  67. @misprintedtype

  68. UI Events large API data DOM @misprintedtype

  69. @misprintedtype

  70. async !== concurrency @misprintedtype

  71. @misprintedtype

  72. @misprintedtype

  73. @misprintedtype

  74. @misprintedtype

  75. Encoding && decoding large strings Complex mathematical calculations Prefetching && caching data @misprintedtype

  77. Network requests Manipulation on localStorage Image manipulation @misprintedtype

  79. real - time text analysis processing video or audio data Polling web services @misprintedtype

  80. 
 // worker.js - no access // window 
 window.alert(`Work it!`); // document 
 document.getElementById(`danceParty`); // parent 
 window.globalFunction(); @misprintedtype

  81. no libs depending on these objects, for example @misprintedtype

  82. @misprintedtype / @lewiscowper

  83. 
 // worker.js // navigator 
 navigator.onLine; // location 
 location.href; // xhr 
 xmlhttp.send(); @misprintedtype

  84. 
 // worker.js // appCache 
 applicationCache.status; // import 
 import `worker-script`; @misprintedtype

  85. @misprintedtype / @lewiscowper

  86. Web worker s - amazing litte helpers @misprintedtype

  90. 2 t yq e s of worker s - dedicated workers - shared workers @misprintedtype

  91. dedicate d worker @misprintedtype

  92. share d worker @misprintedtype

  93. 
 // available? function areWorkersAvailable() { return !!window.Worker; } @misprintedtype

  94. 
 // run worker run! // app.js 
 var worker = new Worker(`task.js`); @misprintedtype

  95. @misprintedtype

  96. ? @misprintedtype

  98. 
 dem o // map.js 
 http://slides.html5rocks.com/#web-workers @misprintedtype

  99. 
 mor e dem ot // examples.js 
 http://greenido.github.io/Web-Workers-Examples-/ @misprintedtype

  100. @misprintedtype / @lewiscowper

Recommend

More recommend