orabazu / sweet-web-workers

Dead simple example on how to use web workers with react with and without comlink ⚙️

Dead simple web workers ⚙️

This repo is bunch of dead simple examples on how to use web workers with react.

What's inside

There are two implementations vanilla and comlink. First one is vanilla JS approach while the latter one shows how to use it with TS in a more promise-like way.

1- Vanilla Web Worker 🚲

Use vanilla-step1 to practice, and vanilla-step2 to inspect implementation

Where is worker

👀 -> public/long-runner.js

2- Comlink and TS 🚗

Use comlink-step1 to practice, and comlink-step2 to inspect implementation

Where is worker

👀 -> src/workers/long-runner/long-runner.ts

How to start

yarn & yarn start

Useful links

• https://blog.logrocket.com/integrating-web-workers-in-a-react-app-with-comlink/

• https://www.smashingmagazine.com/2020/10/tasks-react-app-web-workers/

• https://github.com/developit/workerize

• https://github.com/GoogleChromeLabs/comlink

• https://kangzeroo.medium.com/case-study-coding-a-high-performance-web-app-2021-tutorial-da6265971753

• https://medium.com/@sadia.islam.badhon/callback-queue-vs-microtask-queue-9dc6a790330e

• https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch1.md#web-assembly-wasm

• https://web.dev/webassembly-threads/#how-webassembly-threads-work

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API#worker_types