Web-Workers, React, and TypeScript: Off the main thread!
Web-Workers are an extreme powerful API which has been available for quite a while. It allow developers to split their tasks into multiple threads so the perceived performance is not damaged even when we must do extreme processing on the client-side. On this video, I will show you how to send your application state to a Web-Worker and have it processed without affecting the Main Thread performance! Blocking script? Never again! ⚡️
===================================
|| shameless mandatory buzzword abuse: ||
|| Web Workers are B.L.A.Z.I.N.G fast!!! ||
===================================
📽 Chapters
0:25 Install dependencies 📦
1:16 Concepts: Sync / Async / Multi-Thread 🎓
3:08 What are Web-Workers? 🧐
4:34 Add Web-Worker support to tsconfig.json and webpack.config.js ⚙️
5:49 Small CSS adjustments for presentation purposes 🎨
6:15 Add components to App.tsx 🧩
8:20 Create thread-blocking task 🕰
9:41 Use the task inside a sync and inside an async function (Promise) 🙏
10:37 Add tasks to click handlers 🐭
12:11 Create the Web-Worker file 🚜
12:33 What does Comlink actually do? RPC + Proxy 📡
14:28 Add the Web-Worker to our runtime function calls in App.tsx 🛰
15:57 Example Showdown: Sync vs Async vs Mult-Thread 🥊
18:05 Final considerations 👋
On this page of the site you can watch the video online Web-Workers, React, and TypeScript: Off the main thread! with a duration of hours minute second in good quality, which was uploaded by the user Atila 16 April 2021, share the link with friends and acquaintances, this video has already been watched 24,779 times on youtube and it was liked by 480 viewers. Enjoy your viewing!
