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 👋

[@Shakeel714]

Thanks Atila, for sharing your knowledge in a very nice and easy-to-understand way. Very helpful.

[@TeodorDimitrov1991]

Thank you for the video! Exactly what I was looking for.

[@fatahbe7667]

Thanks Atila for the Video, very cool

[@vadimk4310]

Thank you very much! It finally helped me to make webworkers in react/typescript

[@Nick-tv5pu]

Is there really no way to do this without ejecting?

[@swyxTV]

awesome explanation and demo!

[@JayeshBabuAV]

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 ?

[@codingwithnipu]

Please make a video for deep into webworker where should I need use and where no

[@sexrp2380]

Good work! I learned a lot!

[@JasonElliott88]

Nice video Atila. Thanks

[@AtilaDotIO]

Glad you liked it!
Thanks a bunch, Jason!

[@Ryan-fe2du]

I followed your setup but on my react app, when click the button it downloads the TypeScript file. Any idea why this is happening?

[@mohammadbrzbrz72]

Thank you very much ❤️❤️❤️❤️❤️

[@hevans900]

I am struggling to get this to work with typescript using webpack 5 :(

[@SabrinaDias]

webpack5 =. const worker = new Worker(new URL("./worker", import.meta.url), { name: 'runBigTaskWorker', type: 'module'})

[@netraamrale3850]

What about jest tests

[@aleksejrozumnyj8170]

Super cool video, but can anyone explain why the async function is blocking our thread like the sync one, I didn't catch it.

[@painkiller2125]

Thunk u, so cool lesson!

[@Avee27119]

Nice work!!

[@mukeshra5299]

github repo link?

[@kostaskaldis9285]

what about redux and redux thunk? can u make a video how to implement it with these libraries?

[@xavierinthetube]

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.

[@Hiagoleof250]

It does not work on build version

[@samfreshly8198]

Hey mate, does this work with webpack 5? Im having problems trying to set it up.

[@SabrinaDias]

const worker = new Worker(new URL("./worker", import.meta.url), { name: 'runBigTaskWorker', type: 'module'})

[@FlavioZanoni]

Tu é BR?