Effective utilization of web workers with Aurelia and TypeScript

Question

Effective utilization of web workers with Aurelia and TypeScript

Unfortunately, my search for a solution to this issue across the internet has been fruitless.

I am currently working on an Aurelia application that is built using TypeScript, Aurelia CLI, and RequireJS. The project structure looks like this:

|data
   |-MyService.ts
|workers
   |-SomeWorker.ts/js

There is a package called aurelia-pal-worker, however it lacks comprehensive documentation and detailed examples.

Methods I've experimented with so far

Typed-Web-Workers, which proved to be restrictive
Created a SomeWorker.js file and integrated Browserify as an additional build step in the aurelia_project.

The Browserify approach functions well when external libraries like RxJs are required. However, it fails when attempting to require("../data/MyService.ts"). To make this work, I would need to replace the entire build process with one that runs the whole Aurelia project through Browserify with the tsify plugin.

It appears that I have three potential solutions:

Find a successful example of compiling a TypeScript file into a web worker and utilizing aurelia-pal-worker for importing dependencies.
Utilize TypedWorker and place resource-intensive functions into a thread like:
```
new TypedWoker(expensiveFuncFromService, handleOutput)
```
Compile MyService.ts into separate JS files (rather than bundling them) and require them in this manner:
require("/scripts/MyService.js")

The latter two options do not seem particularly appealing to me, but they should be relatively simple to execute. Any guidance or examples would be greatly appreciated!

PS: For those unfamiliar with Aurelia: It utilizes a gulp pipeline behind the scenes.

typescript browserify aurelia web-worker

Answer 1

Answer №1

After experimenting with different solutions, I decided to migrate to a webpack-based approach, allowing me to leverage the powerful features of webpack-worker-loader.

This choice struck the perfect balance between adapting my existing project and getting it back up and running swiftly.

Here is the final implementation:

custom_typings/worker-loader.d.ts

declare module "worker-loader!*" {
  const content: new () => any;
  export = content;
}

worker/some-service.ts

export class SomeService {
  public doStuff() {
    console.log("[SomeService] Stuff was done");
  }
}

worker/my-worker.ts

import "rxjs/add/observable/interval";

import { Observable } from "rxjs/Observable";
import { SomeService } from "./some-service";

const svc = new SomeService();
svc.doStuff();

console.log("[Worker] Did stuff");
onmessage = event => {
    console.log(event);
};

Observable.interval(1000).subscribe(x => postMessage(x));

Once the worker is loaded like this:

import * as MyWorker from "worker-loader!./worker/my-worker";
const worker = new MyWorker();
worker.onmessage = msg => console.log("[MyClass] got msg from worker", msg);

The following console output will be generated:

1: "[SomeService] Stuff was done"
2: "[Worker] Did stuff"
3: "[MyClass] got msg from worker", 1
4: "[MyClass] got msg from worker", 2
...

Need full dependency injection in a worker?

No worries, thanks to this insightful answer, I discovered how to adapt this using our webpack-powered solution:

let container: Container = null;
let myService: SuperComplexService = null;

// Import the loader abstraction, so the DI container knows how to resolve our modules.
import("aurelia-pal-worker")
  .then(pal => pal.initialize())
  // We need some polyfills (like "Reflect.defineMetadata")
  .then(() => import("aurelia-polyfills"))
  // Then we get the DI service and create a container
  .then(() => import("aurelia-dependency-injection"))
  .then(({ Container }) => (container = new Container()))
  .then(() => import("../services/my-super-complex-service")) // Here we go!
  .then(({ SuperComplexService }) => (myService = container.get(SuperComplexService) as SuperComplexService))
  .then(() => startWorker());

const startWorker = async() => {
  // Let's get going!
}

All credit for this loader-chain goes to @jeremy-danyow.

Answer 2

After experimenting with different solutions, I decided to migrate to a webpack-based approach, allowing me to leverage the powerful features of webpack-worker-loader.

This choice struck the perfect balance between adapting my existing project and getting it back up and running swiftly.

Here is the final implementation:

custom_typings/worker-loader.d.ts

declare module "worker-loader!*" {
  const content: new () => any;
  export = content;
}

worker/some-service.ts

export class SomeService {
  public doStuff() {
    console.log("[SomeService] Stuff was done");
  }
}

worker/my-worker.ts

import "rxjs/add/observable/interval";

import { Observable } from "rxjs/Observable";
import { SomeService } from "./some-service";

const svc = new SomeService();
svc.doStuff();

console.log("[Worker] Did stuff");
onmessage = event => {
    console.log(event);
};

Observable.interval(1000).subscribe(x => postMessage(x));

Once the worker is loaded like this:

import * as MyWorker from "worker-loader!./worker/my-worker";
const worker = new MyWorker();
worker.onmessage = msg => console.log("[MyClass] got msg from worker", msg);

The following console output will be generated:

1: "[SomeService] Stuff was done"
2: "[Worker] Did stuff"
3: "[MyClass] got msg from worker", 1
4: "[MyClass] got msg from worker", 2
...

Need full dependency injection in a worker?

No worries, thanks to this insightful answer, I discovered how to adapt this using our webpack-powered solution:

let container: Container = null;
let myService: SuperComplexService = null;

// Import the loader abstraction, so the DI container knows how to resolve our modules.
import("aurelia-pal-worker")
  .then(pal => pal.initialize())
  // We need some polyfills (like "Reflect.defineMetadata")
  .then(() => import("aurelia-polyfills"))
  // Then we get the DI service and create a container
  .then(() => import("aurelia-dependency-injection"))
  .then(({ Container }) => (container = new Container()))
  .then(() => import("../services/my-super-complex-service")) // Here we go!
  .then(({ SuperComplexService }) => (myService = container.get(SuperComplexService) as SuperComplexService))
  .then(() => startWorker());

const startWorker = async() => {
  // Let's get going!
}

All credit for this loader-chain goes to @jeremy-danyow.

Effective utilization of web workers with Aurelia and TypeScript

Answer №1

Similar questions

An obstacle encountered while using the Laravel 5.2 framework in conjunction with AngularJS 2.0 beta

Guide to incorporating ThreeJS Collada loader with TypeScript / Angular CLI

Modifying the state of one React component using another

Share edited collection with Observer

Angular II slash avoiding Pipe

Detecting and clearing custom visual filters in Power BI

TypeScript is throwing an error because it is unable to recognize the identifiers such as WeakMap

What causes React component state initialization to return a `never` type when set to null?

Enhance the appearance of a custom checkbox component in Angular

What is the method for transmitting a concealed attribute "dragable" to my component?

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Guide on removing a key from an object in TypeScript

Change the German number format from (0,01) to the English number format (0.01) using Angular 8

Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

NestJS's "Exclude" decorator in class-transformer does not exclude the property as expected

Struggling to access properties of a javascript object while trying to slice it within table pagination

Pairing objects by utilizing a Universal Mapper

Consolidate all RxJS operators into a single class property for re-exporting

Adjusting the value of a mat-option depending on a condition in *ngIf

Error with React Query Mutation and TypeScript: The argument '{ surgeryID: any; stageTitle: any; }' cannot be assigned to a parameter of type 'void'