Web-Workers, React, and TypeScript: Off the main thread!
Vložit
- čas přidán 15. 04. 2021
- 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 👋
Thanks Atila, for sharing your knowledge in a very nice and easy-to-understand way. Very helpful.
Thank you for the video! Exactly what I was looking for.
Thank you very much! It finally helped me to make webworkers in react/typescript
Thanks Atila for the Video, very cool
awesome explanation and demo!
Good work! I learned a lot!
Nice work!!
Was the "Async on Main Thread" faster than the Sync one? It seemed to be, that'd make sense from what you explained in the beginning, but I'm not sure I understood correctly.
Thunk u, so cool lesson!
Nice video Atila. Thanks
Glad you liked it!
Thanks a bunch, Jason!
hi Atila, thanks very much for this video. I have one query. Will this approach allow passing non-serializable data (eg, functions) to the runBigTask function ?
Thank you very much ❤️❤️❤️❤️❤️
Super cool video, but can anyone explain why the async function is blocking our thread like the sync one, I didn't catch it.
I followed your setup but on my react app, when click the button it downloads the TypeScript file. Any idea why this is happening?
Is there really no way to do this without ejecting?
I am struggling to get this to work with typescript using webpack 5 :(
what about redux and redux thunk? can u make a video how to implement it with these libraries?
Please make a video for deep into webworker where should I need use and where no
Hey mate, does this work with webpack 5? Im having problems trying to set it up.
const worker = new Worker(new URL("./worker", import.meta.url), { name: 'runBigTaskWorker', type: 'module'})
It does not work on build version
github repo link?
Tu é BR?
webpack5 =. const worker = new Worker(new URL("./worker", import.meta.url), { name: 'runBigTaskWorker', type: 'module'})
What about jest tests