Running in Parallel: NgRx with WebAssembly, Web Workers and Worklets
summary
UI freezes from heavy computation are framed as a concrete problem and solved with code: offload sorting and Fibonacci/primes to Web Workers, wire worker messages into NgRx effects dispatch mapping so results become actions, and use Worklets (Paint/Animation/Audio) for off-main-thread rendering like a live QR-code background demo that runs in Chrome. WebAssembly is used via assemblyscript -> .wasm build, with explicit notes on linear memory, numeric widths, and that threads ≠ CPU cores so speedups are use-case dependent.
AI-written summary · about
chapters (25)
- 0:00Intro
- 0:47RUNNING IN PARALLEL
- 2:45Topics
- 3:48One Thread
- 4:26Async
- 6:10Multi Thread
- 7:02Worker / Worklet
- 7:59Complicate Code
- 9:32UI Blocking
- 9:55Disappointed User
- 10:31Full-Duplex Communication
- 11:49Web Worker with CLI v8+
- 12:42Worker implementation
- 14:02NgRx Effects
- 17:37Available Worklets
- 19:52Half-Duplex Communication
- 20:51Create Worklet
- 21:22Load Worklet
- 21:39Use Worklet
- 22:10QR Code
- 24:13Available Options
- 25:28Install
- 26:00Build
- 26:45Basic function
- 28:46Load WASM module
related talks
29mParallel computing in ReactJS: Provide a pleasant user experience
34mParallel computing in React
27mWebAssembly for Performant Interactivity
32mWebAssembly for Front End Devs
30mLet the main thread breathe!
31mUnlocking the Potential of Reusable Code with WebAssembly
27mService Workers + WebAssembly
41mCreating High-Performance Web Apps with WebAssembly