pshihn / workly Goto Github PK
View Code? Open in Web Editor NEWA really simple way to move a function or class to a web worker. ๐๏ธโโ๏ธโ ๐
License: MIT License
A really simple way to move a function or class to a web worker. ๐๏ธโโ๏ธโ ๐
License: MIT License
I've tested the library against Chrome, Edge, Firefox and IE11, unfortunately only IE11 doesn't work properly due to the Proxy
issue. Proxy
is an ES6 feature and can not be polyfilled.
Is there any solution for this problem?
Hi! The library is great but in has a disadvantage: it doesn't support Common JS import (i.e. const workly = require('workly');
).
I understand that NodeJS doesn't support web workers but CJS is used in other cases, e.g. in Electron (which supports both browser and NodeJS APIs) or bundling JS files using Rollup.
I thing exporting the library in the UMD format is a great solution.
Passing functions, calling functions
how to determine if workers are running, lets say if I click an event to spin off a worker, what is the best approach to see if the previous workers are done processing before I begin the new worker?
Not really an issue but I was wondering if you're aware of @developit's workerize and greenlet ?
When I try to run this code it returns the error below. I'm using node v14.5.0.
code:
const workly = require('workly');
function busyAdd(a, b) {
let st = Date.now();
while (true) {
if ((Date.now() - st) > 2000) break;
}
return a + b;
}
(async() => {
let workerAdd = workly.proxy(busyAdd);
console.log(await workerAdd(23, 16)); // 39
// the busyAdd is executed in a worker so
// the UI does not get blocked
})();
error:
(node:33541) UnhandledPromiseRejectionWarning: ReferenceError: Blob is not defined
at Object.t.proxy (/Users/maxcampbell/Desktop/Web Dev/gpu.js/node_modules/workly/dist/workly.umd.js:1:2011)
at /Users/maxcampbell/Desktop/Web Dev/gpu.js/test.js:12:28
at Object.<anonymous> (/Users/maxcampbell/Desktop/Web Dev/gpu.js/test.js:16:3)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
(Use `node --trace-warnings ...` to show where the warning was created)
(node:33541) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:33541) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Maybe I miss something but when I do:
import workly from 'workly'
the workly
object is empty.
I run a task in worker, and it should send out the progress / rate
of the task.
There seems to be no way to post messages in the code of worker, or terminal
the worker.
Are there plans to add it? Open to PRs? This lib looks awesome but I need Transferable support.
I tried to make it as clear as possible in the title that this is not exactly an "issue" :-)
I've been using workly in a TS project and it works like a charm.
I thought I'd share here my experience, in case it helps. I think it might be useful also to add some of the following instructions to the README.
Since deferring to workly a pure TS class did not work (as expected), my approach was to build the classes I needed as a UMD with WebPack, and then the process is very simple. I'll explain it with some sample code.
Let's take the Example
class in ./src/example.class.ts
:
import { SomeThirdParyLibFromNpm } from 'someThirdParyLibFromNpm';
import * as otherNpmLibWithoutTSSupport from 'otherNomLibWithoutTSSupport';
import * as workly from 'workly';
export class Example {
constructor(
private myState: AReduxState // example to clarify that we cannot rely on any kind of import, see later
) { }
public someExpensiveTask(): any {
const whatever = SomeThirdParyLibFromNpm.heavyCpu();
const whatever += otherNpmLibWithoutTSSupport.otherExpensiveStuff();
return whatever;
}
}
workly.expose(Example);
The only thing that we must be aware of, is that this class cannot depend on global/scoped objects of the current project, like any process delegated to a WebWorker. So we cannot import a global const
defined/modified at runtime, or rely on libraries like Redux
. In such cases I would suggest to pass the values to the constructor like in the above example.
Then we build the UMD with WebPack. Here's my config for webpack.worker.config.js
:
const path = require('path');
module.exports = {
entry: {
example: './src/example.class.ts'
},
resolve: {
extensions: ['.ts']
},
target: 'webworker',
node: {
__dirname: true
},
output: {
path: path.join(__dirname, 'src/assets/js'),
filename: '[name].umd.min.js',
library: 'Example',
libraryTarget: 'umd'
},
module: {
rules: [{
test: /\.ts$/,
loader: 'ts-loader'
}]
},
mode: "production"
}
Then run in the console:
webpack --config webpack.worker.config.js --progress --colors
Then whenever we want to execute the Example
class in a separate thread, thanks to workly we simply need to write in our TS code:
import * as workly from 'workly';
....
const WExample = workly.proxy('/assets/js/example.umd.min.js');
const objWorker = await new WExample(this.myState);
this.whatEver = await objWorker.someExpensiveTask();
In this way we get the double advantage of multi-threading our app, and also some chunks of our code can be downloaded only when needed :-).
PS Thanks for this awesome library!
Hi! The problem described in #4 has become actual again. Workly can't be used in an Electron application.
You need only to replace iife
with umd
in rollup.config.js in order to resolve it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.