Web-Workers, React, and TypeScript: Off the main thread!
Вставка
- Опубліковано 25 сер 2024
- 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.
Thanks Atila for the Video, very cool
Thank you very much! It finally helped me to make webworkers in react/typescript
Is there really no way to do this without ejecting?
awesome explanation and demo!
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
Good work! I learned a lot!
Nice video Atila. Thanks
Glad you liked it!
Thanks a bunch, Jason!
I followed your setup but on my react app, when click the button it downloads the TypeScript file. Any idea why this is happening?
Thank you very much ❤️❤️❤️❤️❤️
I am struggling to get this to work with typescript using webpack 5 :(
webpack5 =. const worker = new Worker(new URL("./worker", import.meta.url), { name: 'runBigTaskWorker', type: 'module'})
What about jest tests
Super cool video, but can anyone explain why the async function is blocking our thread like the sync one, I didn't catch it.
Thunk u, so cool lesson!
Nice work!!
github repo link?
what about redux and redux thunk? can u make a video how to implement it with these libraries?
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.
It does not work on build version
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'})
Tu é BR?