Web-Workers, React, and TypeScript: Off the main thread!
HTML-код
- Опубликовано: 15 апр 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!
Thunk u, so cool lesson!
Nice work!!
Thank you very much ❤️❤️❤️❤️❤️
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.
Nice video Atila. Thanks
Glad you liked it!
Thanks a bunch, Jason!
Super cool video, but can anyone explain why the async function is blocking our thread like the sync one, I didn't catch it.
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 ?
Please make a video for deep into webworker where should I need use and where no
Is there really no way to do this without ejecting?
what about redux and redux thunk? can u make a video how to implement it with these libraries?
I followed your setup but on my react app, when click the button it downloads the TypeScript file. Any idea why this is happening?
I am struggling to get this to work with typescript using webpack 5 :(
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