Job Behind the Scene: Web Worker

The Web initially designed to show documents, and JavaScript brought interactivity into it. Modern applications are doing a lot of extra work and computations in addition to UI updates. With those requirements and single-thread for UI, making web app performant and responsive to the user input becomes challenging. Web Worker is the API that provides a beautiful abstraction on top of threading in browsers, and I want to show a real why, when, and how to use it in Angular.

Transcript

1. WEB WORKER J O B B E H I N D T H E S C E N E :
2. VITALII BOBROV • Lead SW Engineer, 2.5 years at EPAM • 7 years as FE Engineer • @AngularWroclaw org and tech speaker @bobrov1989 https://bobrov.dev
3. A B O U T E PA M • Top tech companies projects • Continuous grow - trainings, webinars, conferences • Sandbox and “garage” projects
4. SINGLE THREAD W H AT I S T H E P R O B L E M ?
5. MAIN THREAD
6. D I S A P P O I N T E D U S E R
7. TO USE THE APPLICATION U S E R S H O U L D B E A B L E
8. WORKER THREAD
9. W O R K E R S E C U R I T Y L I M I TAT I O N S • Makes a copy of data • Have no direct access to DOM and global functions • Communicates via messages
10. DON’T OPTIMISE BEFORE GETTING PERFORMANCE ISSUES D I S C L A I M E R
11. C A N C O M P L I C AT E T H E C O D E
12. WEB WORKER H O W T O U S E
13. CREATE A WEB WORKER INSTANCE const worker = new Worker('path/to/worker.js'); https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker
14. BROWSERS SUPPORT https://caniuse.com/#feat=webworkers
15. SETUP COMMUNICATION CHANNEL MAIN THREAD worker.postMessage('data'); worker.addEventListener('message', (event: MessageEvent) => { console.log(event.data); }); addEventListener('message', (event: MessageEvent) => { console.log(event.data); }); postMessage('response'); WORKER THREAD
16. M I G H T C A U S E A H U G E M E M O RY U T I L I S AT I O N
17. BUFFERS FOR DATA TRANSPORT MAIN THREAD WORKER THREAD
18. SHARED ARRAY BUFFERS https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
19. IN PARALLEL R U N M U LT I P L E W O R K E R S
20. WEB WORKERS POOL https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency
21. TO CPU CORE T H R E A D I S N O T E Q U A L
22. SHARED WORKER https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker MAIN THREAD WORKER THREAD
23. COMLINK H E L P E R L I B R A R I E S
24. COMLINK AS EASY TO USE ABSTRACTION https://github.com/GoogleChromeLabs/comlink MAIN THREAD WORKER THREAD
25. USE CASES R E A L A P P L I C AT I O N S
26. DATA MANIPULATION C A S E S T U D Y I
27. R E Q U I R E M E N T S • Sort a list of objects by different parameters • Handle a big lists — 100k+ items
28. T I M E C O M P L E X I T Y — B I G O N O TAT I O N
29. O(n*log(n)) M O S T P E R F O R M A N T S O RT I N G A L G O R I T H M S
30. EXTERNAL SORT PA R A L L E L C H U N K E D S O T I N G
31. EXTERNAL SORT - MAIN THREAD https://en.wikipedia.org/wiki/External_sorting
32. EXTERNAL SORT - MAIN THREAD https://en.wikipedia.org/wiki/External_sorting
33. F U T U R E I M P R O V E M E N T S • Optimise memory usage using ArrayBuffer • Add ability to use different sorting algorithm, ex. topological sort
34. MARKDOWN PARSER C A S E S T U D Y I I
35. R E Q U I R E M E N T S • Parse comments in Markdown • Comments are present in another tab
36. PARSER - MAIN THREAD
37. PARSER - WORKER THREAD
38. F U T U R E I M P R O V E M E N T S • Simplify implementation using Comlink • Improve memory utilisation
39. TUNER AUTOCORRELATION C A S E S T U D Y I I I
40. R E Q U I R E M E N T S • Run autocorrelation on analysed audio data • Debounce audio data requests https://github.com/vitaliy-bobrov/js-rocks/tree/main/src/app/audio/effects/tuner
41. F U T U R E I M P R O V E M E N T S • Implement autocorrelation with WASM (AssemblyScript) • Use Web Worker only for WASM initialisation
42. THANK YOU U S E T H E W E B W O R K E R F O R B E T T E R U X @bobrov1989 https://bobrov.dev