@webos/process
Synopsys
Creation of Dynamic Dedicated WebWorkers, definition of dependencies, promise support.
Motivation
Today we have an opportunity to run a js code in other threads in browsers by using web workers. Web workers give us new flexibility and opportunity for creating more complex js applications. But web workers' api may create complications in some cases: for example, when we want to run the following code:
console.log('Hello world');in other thread, we can do this in two ways:
- Create a new file myWorker.js which will contain the code
console.log('Hello World');and then call it from the main thread by writing
const myWorker = new Worker('./myWorker.js');- Or if we want to create it in a dynamic way, we can write:
const source = 'console.log("Hello world")';
const blob = new Blob([source], {type: 'application/javascript'});
const myWorker = new Worker(URL.createObjectURL(blob));@webos/process lets us create dynamic workers, use and manage them more comfortably and with promise support. There is no need to create a new file, also there is no need in onmessage or onerror callbacks, the latest will work with promise support. For example:
import Process from '@webos/process';
const process = new Process();
process
.setSource(
num => num ** 2
)
.postMessage(12)
.then(
result => console.log('Log ::: Result ::: ', result)
);@webos/process also allows to define dependencies for workers
import Process from '@webos/process';
const process = new Process;
process
.setSource(
arr => _.sortBy(arr),
['https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js']
)
.postMessage([3, 2, 0, 1])
.then(
result => console.log('Log ::: Result ::: ', result)
);Also, you can pass a string to .setSrouce method as a source; in that case, you also need to pass the function name (which is going to be executed from source as a final function) as a third parameter. For example:
import Process from '@webos/process';
const process = new Process;
process
.setSource(
`
const fibs = {};
function fib(n) {
if (n < 2) {
return n;
} else {
if (!((n - 1) in fibs)) {
fibs[n - 1] = fib(n - 1);
}
if (!((n - 2) in fibs)) {
fibs[n - 2] = fib(n -2);
}
return fibs[n - 1] + fibs[n - 2];
}
}
function anotherFunction(x) { return x + 1 }
const oneMoreFunction = opt => { //... }
`,
[],
'fib' // we want to "work" exactly with 'fib' function
)
.postMessage(14)
.then(
result => console.log('Log ::: Result ::: ', result)
);Install
Install for usage
Latest packaged version
npm i @webos/processor
yarn add @webos/processLatest version available in GitHub
npm i https://github.com/webosorg/Processor
yarn add https://github.com/webosorg/ProcessInstall for development
git clone https://github.com/webosorg/Process.gitUsage
NOTE ::: In this stage it's only for browsers.
Simple usage
// Import @webos/process
import Process from '@webos/process';
// Create a new process
const process = new Process;
process
// set source (fn and deps)
.setSource(
num => num ** 2
)
// send data for calculation
.postMessage(12)
// get result
.then(
result => console.log('Log ::: Result ::: ', result)
);With dependencies
// Import @webos/process
import Process from '@webos/process';
// Create a new process
const process = new Process;
process
// set source (fn and deps)
.setSource(
// fn
arr => _.sortBy(arr),
// array of dependencies
['https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js']
)
// send data for calculation
.postMessage([3, 2, 0, 1])
// get result
.then(
result => console.log('Log ::: Result ::: ', result)
);Full Promise support
const process_01 = new Process;
const process_02 = new Process;
const calc_01 = process_01.setSource(arr => arr.sort(arr));
const calc_02 = process_01.setSource(num => num ** 2);
const calc_03 = process_02.setSource(
arr => _.sortBy(arr),
['https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js']
);
Promise.all(
[
calc_01.postMessage([3, 1, 2]),
calc_02.postMessage(12),
calc_03.postMessage(['x', 'y', 'z', 'a', 123])
]
)
.then(result => {
process_01.kill();
process_02.kill();
console.log('Log ::: Result ::: ', result);
});