Worker power!

Presentation about web workers from EmberCamp Chicago 2019.

Transcript

1. !"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() worker power! dan gebhardt @dgeb
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
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
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 #
25. /assets/workers/multiplier.js /assets/app.js # ⚡
26. # Worker
27. # Worker
28. # Worker
29. demo #
32. shared workers
34. /assets/workers/incrementer.js /assets/app.js ⚡
35. MessagePort
36. demo
38. Main threads Worker thread
39. service workers 2
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
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
56. https://www.youtube.com/watch?v=voFXsFRc6jU
57. !"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() Thanks! @dgeb http://bit.ly/ember-workers