All Projects β†’ pshihn β†’ Workly

pshihn / Workly

Licence: mit
A really simple way to move a function or class to a web worker. πŸ‹οΈβ€β™€οΈβ†’ πŸ˜„

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Workly

Useworker
βš›οΈ useWorker() - A React Hook for Blocking-Free Background Tasks
Stars: ✭ 2,233 (+20.83%)
Mutual labels:  thread, web-worker, web-workers
Greenlet
🦎 Move an async function into its own thread.
Stars: ✭ 4,511 (+144.1%)
Mutual labels:  thread, web-worker, webworker
Wasm Worker
Move a WebAssembly module into its own thread
Stars: ✭ 215 (-88.37%)
Mutual labels:  thread, web-worker
Preact Worker Demo
Demo of preact rendering an entire app in a Web Worker.
Stars: ✭ 204 (-88.96%)
Mutual labels:  thread, web-worker
react-use-comlink
Three ways to use Comlink web workers through React Hooks (and in a typesafe manner).
Stars: ✭ 39 (-97.89%)
Mutual labels:  webworker, web-workers
partytown
Relocate resource intensive third-party scripts off of the main thread and into a web worker. πŸŽ‰
Stars: ✭ 3,626 (+96.21%)
Mutual labels:  web-worker, webworker
Thread
type safe multi-threading made easier
Stars: ✭ 34 (-98.16%)
Mutual labels:  thread, webworker
Worker Plugin
πŸ‘©β€πŸ­ Adds native Web Worker bundling support to Webpack.
Stars: ✭ 1,840 (-0.43%)
Mutual labels:  web-worker, webworker
Alloy Worker
ι’ε‘δΊ‹εŠ‘ηš„ι«˜ε―η”¨ Web Worker ι€šδΏ‘ζ‘†ζžΆ
Stars: ✭ 349 (-81.11%)
Mutual labels:  thread, web-worker
Workerize
πŸ—οΈ Run a module in a Web Worker.
Stars: ✭ 4,134 (+123.7%)
Mutual labels:  web-worker, web-workers
Hamsters.js
100% Vanilla Javascript Multithreading & Parallel Execution Library
Stars: ✭ 517 (-72.02%)
Mutual labels:  thread, web-worker
React Native Threads
Create new JS processes for CPU intensive work
Stars: ✭ 527 (-71.48%)
Mutual labels:  thread, web-worker
Gl vk threaded cadscene
OpenGL and Vulkan comparison on rendering a CAD scene using various techniques
Stars: ✭ 143 (-92.26%)
Mutual labels:  thread
Web Vitals Extension
A Chrome extension to measure essential metrics for a healthy site
Stars: ✭ 1,943 (+5.14%)
Mutual labels:  developer-tools
Haack
Hæck
Stars: ✭ 142 (-92.32%)
Mutual labels:  developer-tools
Httptoolkit Server
The backend of HTTP Toolkit
Stars: ✭ 140 (-92.42%)
Mutual labels:  developer-tools
Vue In Web Worker
Vue.js in Web Worker
Stars: ✭ 149 (-91.94%)
Mutual labels:  web-worker
Vuex Search
Vuex binding for client-side search with indexers and Web Workers πŸ“—πŸ”
Stars: ✭ 147 (-92.05%)
Mutual labels:  web-worker
Stockroom
πŸ—ƒ Offload your store management to a worker easily.
Stars: ✭ 1,745 (-5.57%)
Mutual labels:  web-worker
Artisan Menu
πŸ“ Artisan Menu - Use Artisan via an elegant console GUI
Stars: ✭ 141 (-92.37%)
Mutual labels:  developer-tools

Workly πŸ‹οΈβ€β™€οΈβ†’ πŸ˜„

  • A really simple way to move a stand-alone function/class to a worker thread.
  • Or, expose an object or function in a worker to the main thread.
  • All calls are made asynchronous. Works great with async/await.
  • Only 1kB gzipped.

Install

Download the latest from dist folder

or from npm:

npm install --save workly

Usage

Moving a function to a worker is really simple.

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
})();

Or, in fact a Class

class Adder {
  constructor() {
    this.count = 0;
  }
  add(a, b) {
    this.count++;
    return a + b;
  }
}

(async () => {
  let WAdder = workly.proxy(Adder);
  let a = await new WAdder(); // instance created/running in worker
  console.log(await a.count); // 0
  console.log(await a.add(23, 16)); // 39
  console.log(await a.count); // 1
})();

Custom workers

The above examples only work when the class/function is not dependent on the containing scope, i.e. other libraries or global objects. But, you can create a custom worker.js file and move the code in there. In the worker, you can expose your object/function/class using workly.expose method.

In this example, the function depends on moment.js

worker.js

importScripts('https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js', '../dist/workly.js');
function friendlyTime(value) {
  return moment(value).calendar(null, {
    sameDay: function (now) {
      if (now - this < 1000 * 60) {
        return "[Just now]";
      } else if (now - this < 1000 * 60 * 60) {
        return "[" + Math.round((now - this) / (1000 * 60)) + " mins ago]";
      } else {
        return '[Today at] LT'
      }
    }
  });
}
workly.expose(friendlyTime);

main.js

(async () => {
  let w = workly.proxy("./worker.js");
  let now = Date.now();
  console.log(now);
  console.log(await w(now));
  console.log(await w(now - (24 * 60 * 60 * 1000)));
  console.log(await w(now - (4 * 24 * 60 * 60 * 1000)));
})();

Caveats

  • If you're not using a custom worker, the function/class being pushed to the worker cannot depend on the containing scope.
  • Since workers do not have access to DOM, DOM manipulation is not supported.
  • Objects passed into functions are not passed by reference, so if the function in the worker updates the passed in object, it will not affect the object in the main scope.

Examples

See the examples folder

License

MIT License (c) Preet Shihn

You may also be interested in

windtalk - Simplest way to communicate between windows or iframes. Work with objects/functions defined in another window or iframe.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].