https://github.com/wildhoney/freelancer
:necktie: An implementation of on-the-fly defined WebWorkers that are created inline using data URIs, rather than separate physical files — for the benefit of all humanity.
https://github.com/wildhoney/freelancer
concurrency concurrent sharedworker webworker webworkers
Last synced: 2 months ago
JSON representation
:necktie: An implementation of on-the-fly defined WebWorkers that are created inline using data URIs, rather than separate physical files — for the benefit of all humanity.
- Host: GitHub
- URL: https://github.com/wildhoney/freelancer
- Owner: Wildhoney
- License: gpl-3.0
- Created: 2017-02-28T14:42:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-07T08:36:45.000Z (over 8 years ago)
- Last Synced: 2025-03-29T00:12:47.799Z (3 months ago)
- Topics: concurrency, concurrent, sharedworker, webworker, webworkers
- Language: JavaScript
- Homepage: https://freelancer-app.herokuapp.com/
- Size: 1.88 MB
- Stars: 67
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
> `npm i freelancer --save`
> An implementation of on-the-fly defined WebWorkers that are created inline using data URIs, rather than separate physical files — for the benefit of all humanity.
> **example:** [heroku](https://freelancer-app.herokuapp.com/) • ~500 bytes gzipped.
## Getting Started
`Freelancer` uses the **same** interface as `Worker` except the passed parameters upon instantiation are *slightly* different.
Normally when invoking `new Worker` you pass the location of the file, whereas with `new Freelancer` you pass a function that contains the body of the worker.
`Freelancer` also allows an *optional* [second parameter](#passing-parameters) to be passed that allows you to send additional options to the worker.
```javascript
import { Freelancer } from 'freelancer';
const worker = new Freelancer(() => {
self.addEventListener('message', event => {
console.log(event.data);
self.postMessage('Pong!');
});
});
worker.addEventListener('message', event => console.log(event.data));
worker.postMessage('Ping?');
```
It's worth bearing in mind that the worker is still a separate thread and thus the typical [rules of closures](https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) no longer apply – any parameters you would like to be received by the worker would need to be sent using `postMessage` or by [passing parameters](#passing-parameters) upon instantiation.
## Passing Parameters
Upon instantiation of `Freelancer` you can use the second parameter to pass options that will be pushed to the worker – passed options will be serialized using `JSON.stringify` and thus any data sent needs to be serializable – which essentially means you're unable to pass by reference, and circular references will cause issues.
```javascript
import { SharedFreelancer } from 'freelancer';
const options = { send: 'Ping?', respond: 'Pong!' };
const worker = new SharedFreelancer(options => {
self.addEventListener('message', event => {
console.log(event.data);
self.postMessage(options.respond);
});
}, options);
worker.addEventListener('message', event => console.log(event.data));
worker.postMessage(options.send);
```
Although we refer to it as the *second parameter* you are in fact able to pass an infinite amount of parameters to the worker – the only requirement is that the first parameter is the worker's function.
## Dynamic Imports
When defining a worker inline you'll lose the ability to `import` because the declaration needs to be at the top-level – instead you should prefer [dynamic `import`s](https://github.com/tc39/proposal-dynamic-import) using `async` functions or a simple `Promise.then`.
```javascript
import { Freelancer } from 'freelancer';
import translate from './translator';
const worker = new Freelancer(async () => {
const translate = await import('./translator');
self.addEventListener('message', event => {
self.postMessage(translate(options.respond));
});
});
worker.postMessage(translate(options.send));
```
## Unsupported Worker
In some cases `SharedWorker` — or to a lesser extent `Worker` — may be `undefined` due to a lack of browser support ([see issue](https://github.com/Wildhoney/Freelancer/issues/2)). When a worker is unsupported you'll receive an error message, and thus it's crucial to [determine browser support](http://caniuse.com/#feat=sharedworkers) before using a particular worker.
[](http://forthebadge.com)