Web Workers

My inspiration how we can use React, Web Workers, and AI frontend technologies

Features

1. Smooth UI when computing something heavy.
2. Predefined React hooks to create a background task.
3. Event-based replies from a task function.
4. Possibility to use promise-based and generator task functions.

Limitations inside task function

1. You cannot use the outer scope because task function is isolated and is run in another thread, but you can pass arguments to task function.
2. You cannot use DOM manipulations.
3. You cannot use recursion inside passed function as argument for a task function. All passed functions become anonymous functions (do not have a name) that's why a function cannot call itself. You can declare a recursive function inside task function or import it via dependencies.

Installation

1. Install npm package

   npm i @tynik/web-workers

2. File worker.worker.js is required by a worker and is fetched when the worker is initiated. You should copy worker.worker.js file from @tynik/web-workers package before you will start your own project. If you use Webpack you can install copy-webpack-plugin package and will add the next configuration to Webpack config file.

   // webpack.config.js
   
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     // webpack settings...
     plugins: [
       new CopyWebpackPlugin({
         patterns: [
           'node_modules/@tynik/web-workers/dist/worker.worker.js'
         ]
       })
     ]
   }

Examples

All examples source directory here.

Also, you can see deployed examples here.

React

1. Pure. Implemented with using base Task class.
2. Base.
3. Tasks queue. Calling the heavy task with different arguments at the same time.
4. Promise-based result.
5. Simple generator.
6. Infinity generator. Task function as infinity generator that automatically stopped after some time.
7. Files processing.
8. Brain.js XOR.

Notes

1. High resolution time metrics. Please, see reduced time precision in Firefox.

API

Task class

1. constructor(func: TaskFunction, { deps?: string[] }) - Initiating a task with creating a new Worker. The task function currently is not run.
2. run(...args: Params): RunTaskAPI - Transfer and run a task function inside created Worker. If you call run many times simultaneously and the previous task function was not completed then a new call will be pushed to the queue and be run when the previous task is finished.
3. stop(): void - Stop the task function executing. Also, the tasks queue will be erased.

RunTaskAPI

The RunTaskAPI interface it is the result of executing run() method.

1. whenSent: Promise<Meta> - Property to subscribe on sent event.
2. whenStarted: Promise<Meta> - Property to subscribe on started event.
3. whenCompleted: Promise<{ result: Result } & Meta> - Property to subscribe on completed event.
4. whenError: Promise<{ result: string } & Meta> - Property to subscribe on error event.
5. next(...args: Params): Promise<{ result: Result } & Meta> - Run the next iteration for a task generator function with transferring arguments.
6. return(value?: any): void - Stop a task generator function with passing value as a result if needed. In common can be used to stop infinity generators.
7. throw(e?: any): void - Throw an error inside a task generator function. The argument e can accept only cloneable objects. To more know about that you can read The structured clone algorithm.