Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Worker power!

E01ec1de2f7783812d2235a6a9aaaeea?s=47 Dan Gebhardt
September 16, 2019

Worker power!

Presentation about web workers from EmberCamp Chicago 2019.

E01ec1de2f7783812d2235a6a9aaaeea?s=128

Dan Gebhardt

September 16, 2019
Tweet

More Decks by Dan Gebhardt

Other Decks in Programming

Transcript

  1. !"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() worker power! dan

    gebhardt @dgeb
  2. None
  3. None
  4. None
  5. web workers dedicated workers shared workers service workers

  6. Main thread • fetching, parsing, running JS • page layout

    • painting • observing user interactions • manipulating the DOM
  7. Main thread Worker threads

  8. Concurrency is about dealing with lots of things at once.

    Parallelism is about doing lots of things at once. - Rob Pike
  9. None
  10. What happens when we exceed the limits of concurrency on

    the main thread? JANK
  11. I know it when I see it. - US Supreme

    Court Justice Potter Stewart Jacobellis v. Ohio, 1964
  12. 60fps

  13. 15ms

  14. None
  15. None
  16. None
  17. • Web workers Multi-threading

  18. ok, let's use workers!

  19. why aren't workers already being used more often?

  20. • new and unproven • lack of browser support •

    lack of capabilities Challenges to using workers
  21. • awkward to use • awkward to test • lack

    of FE framework support ✅ ✅ ✅ DX Challenges to using workers
  22. !"# $%& '() *!" #$% &'( )*! • async communication

    • no shared memory • controlled lifetime • access to browser APIs such as IndexedDB, fetch, etc. • no access to the DOM Characteristics of all workers
  23. dedicated workers #

  24. None
  25. /assets/workers/multiplier.js /assets/app.js # ⚡

  26. # Worker

  27. # Worker

  28. # Worker

  29. demo #

  30. None
  31. None
  32. shared workers

  33. None
  34. /assets/workers/incrementer.js /assets/app.js ⚡

  35. MessagePort

  36. demo

  37. None
  38. Main threads Worker thread

  39. service workers 2

  40. None
  41. https://www.youtube.com/watch?v=hr135pFCLU8

  42. P R O G R E S S I V

    E W E B A P P C H E C K L I S T • Site is served over HTTPS • Pages are responsive • App URLs load while offline • Add to Home screen • Fast first load • And more ...
  43. S E R V I C E W O R

    K E R A B A C K G R O U N D S C R I P T T H AT A C T S A S A P R O X Y B E T W E E N Y O U R A P P L I C AT I O N A N D I T S E N V I R O N M E N T.
  44. // Register service worker if ('serviceWorker' in navigator) { window.addEventListener('load',

    function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration succeeded }, function(err) { // Registration failed }); }); } S E R V I C E W O R K E R / a p p . j s
  45. var CACHE_NAME = 'todo-dino-v1'; Var CACHE_URLS = ['/', '/app.js', '/app.css'];

    self.addEventListener('install', function(event) { // Install app shell event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(CACHE_URLS); }) ); }); S E R V I C E W O R K E R / s w. j s
  46. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) // Check cache .then(function(response) {

    if (response) { return response; // Return from cache } return fetch(event.request); // Fetch if needed }) ); }); S E R V I C E W O R K E R / s w. j s
  47. DX improvements

  48. ember-workers

  49. None
  50. promise-worker

  51. /assets/workers/multiplier.js /assets/app.js # ⚡

  52. /assets/workers/promisified-multiplier.js /assets/app.js ⚡

  53. testing

  54. Testing tips • Write modular code • Unit test your

    modules (w/o workers) • Stub workers in your app
  55. None
  56. https://www.youtube.com/watch?v=voFXsFRc6jU

  57. !"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() Thanks! @dgeb http://bit.ly/ember-workers