Web workers for heavy computation in Angular - Mini Project: Build & Apply

Web workers for heavy computation

📖 Scenario: You are building an Angular app that calculates the sum of a large list of numbers. To keep the app responsive, you will use a web worker to do the heavy calculation in the background.

🎯 Goal: Create an Angular standalone component that uses a web worker to sum numbers without freezing the UI.

📋 What You'll Learn

Create a list of numbers in the component

Add a threshold variable to control the number of items to sum

Use a web worker to calculate the sum of numbers up to the threshold

Display the result in the component template

💡 Why This Matters

🌍 Real World

Web workers help keep web apps responsive by running heavy tasks in the background, like processing large data sets or complex calculations.

💼 Career

Understanding web workers is useful for frontend developers to improve app performance and user experience, especially in Angular projects.

1

Create the numbers list

In the Angular component, create a variable called numbers and set it to an array containing the numbers from 1 to 1000.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sum-worker',
  standalone: true,
  template: ``,
})
export class SumWorkerComponent {
  // Create the numbers array from 1 to 1000
  // Your code here
}

Hint

Use Array.from with length 1000 and map each index i to i + 1.

2

Add the threshold variable

Add a variable called threshold and set it to 500 in the component class.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sum-worker',
  standalone: true,
  template: ``,
})
export class SumWorkerComponent {
  numbers = Array.from({ length: 1000 }, (_, i) => i + 1);
  // Add threshold variable set to 500
  // Your code here
}

Hint

Just add threshold = 500; inside the class.

3

Use a web worker to sum numbers

Create a web worker instance called worker using new Worker() with the path './sum.worker'. Then add a method called startSum() that sends a message to the worker with the numbers sliced up to threshold. Also add an event listener to worker.onmessage that sets a variable result to the received data.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sum-worker',
  standalone: true,
  template: ``,
})
export class SumWorkerComponent {
  numbers = Array.from({ length: 1000 }, (_, i) => i + 1);
  threshold = 500;

  // Create worker and startSum method
  // Your code here
}

Hint

Use new Worker(new URL('./sum.worker', import.meta.url)) to create the worker. Use postMessage to send data and onmessage to receive the result.

4

Complete the template to show result and start calculation

Update the component template to include a button with (click) event bound to startSum(). Also add a paragraph that shows Sum result: {{ result }}. Make sure the template is inside the template property of the @Component decorator.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sum-worker',
  standalone: true,
  template: `
    
    
  `,
})
export class SumWorkerComponent {
  numbers = Array.from({ length: 1000 }, (_, i) => i + 1);
  threshold = 500;
  worker = new Worker(new URL('./sum.worker', import.meta.url));
  result?: number;

  constructor() {
    this.worker.onmessage = ({ data }) => {
      this.result = data;
    };
  }

  startSum() {
    this.worker.postMessage(this.numbers.slice(0, this.threshold));
  }
}

Hint

Use a button with (click)="startSum()" and a paragraph with interpolation {{ result }}.

Practice

1. What is the main purpose of using Web Workers in an Angular application?

easy

A. To style components dynamically

B. To run heavy computations in the background without freezing the UI

C. To handle HTTP requests faster

D. To manage routing between pages

Solution

1. Step 1: Understand what Web Workers do

   Web Workers allow running scripts in background threads separate from the main UI thread.

2. Step 2: Identify the benefit in Angular apps

   This prevents the UI from freezing during heavy computations, improving user experience.

3. Final Answer:

   To run heavy computations in the background without freezing the UI -> Option B

4. Quick Check:

   Web Workers = background heavy tasks [OK]

Hint: Web Workers keep UI smooth by running heavy tasks separately [OK]

Common Mistakes:

• Thinking Web Workers handle UI styling
• Confusing Web Workers with HTTP request handlers
• Assuming Web Workers manage routing

2. Which Angular CLI command correctly creates a new Web Worker named compute?

easy

A. ng new worker compute

B. ng create worker compute

C. ng add worker compute

D. ng generate worker compute

Solution

1. Step 1: Recall Angular CLI syntax for generating workers

   The correct command to generate a worker is ng generate worker <name>.

2. Step 2: Match the command with the options

   Only ng generate worker compute uses the correct syntax: ng generate worker compute.

3. Final Answer:

   ng generate worker compute -> Option D

4. Quick Check:

   Generate worker = ng generate worker [OK]

Hint: Use 'ng generate worker' to create workers in Angular [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng generate'
• Confusing 'ng add' with worker creation
• Trying 'ng new' which creates projects, not workers

3. Given this Angular Web Worker code snippet, what will be logged in the console?

const worker = new Worker(new URL('./compute.worker', import.meta.url));
worker.onmessage = ({ data }) => console.log('Result:', data);
worker.postMessage(10);

Assuming the worker script doubles the input number and sends it back.

medium

A. Result: undefined

B. Result: 10

C. Result: 20

D. Error: Worker not found

Solution

1. Step 1: Understand the message flow

   The main thread sends 10 to the worker using postMessage(10).

2. Step 2: Worker doubles the input and sends back

   The worker processes 10, doubles it to 20, and sends it back via postMessage.

3. Step 3: Main thread logs the received data

   The onmessage handler logs 'Result: 20'.

4. Final Answer:

   Result: 20 -> Option C

5. Quick Check:

   Input 10 doubled = 20 [OK]

Hint: Worker doubles input, so output is input x 2 [OK]

Common Mistakes:

• Assuming worker returns input unchanged
• Expecting undefined because of async timing
• Thinking worker script is missing causing error

4. What is the main error in this Angular Web Worker usage?

const worker = new Worker('./compute.worker');
worker.onmessage = (event) => console.log(event.data);
worker.postMessage(5);

medium

A. Missing import.meta.url in Worker URL

B. postMessage should be called before onmessage

C. Worker script path should be absolute URL

D. onmessage handler must be async function

Solution

1. Step 1: Check how the Worker is created

   In Angular, the worker URL must use new URL('./compute.worker', import.meta.url) for correct bundling.

2. Step 2: Identify the missing part

   The code uses a plain string './compute.worker' which causes a runtime error because the path is unresolved.

3. Final Answer:

   Missing import.meta.url in Worker URL -> Option A

4. Quick Check:

   Worker URL needs import.meta.url [OK]

Hint: Always use new URL(path, import.meta.url) for worker paths [OK]

Common Mistakes:

• Calling postMessage before setting onmessage
• Using absolute URL instead of relative with import.meta.url
• Making onmessage async unnecessarily

5. You want to perform a heavy calculation on a large array without freezing the UI. Which approach best uses Angular Web Workers to achieve this?

1. Create a worker with Angular CLI.
2. Send the large array to the worker using postMessage.
3. In the worker, process the array and send back the result.
4. Update the UI with the result when received.

What is the best practice to handle the large data transfer efficiently?

hard

A. Use Transferable Objects like ArrayBuffer to avoid copying data

B. Send data as JSON strings to simplify parsing

C. Split the array into small chunks and send each separately

D. Process the array on the main thread to avoid messaging overhead

Solution

1. Step 1: Understand data transfer in Web Workers

   Sending large data copies it by default, which can be slow and freeze UI.

2. Step 2: Use Transferable Objects to optimize

   Transferable Objects like ArrayBuffer transfer ownership without copying, making communication efficient.

3. Step 3: Compare options

   Sending JSON strings adds parsing overhead, splitting chunks adds complexity, and processing on main thread blocks UI.

4. Final Answer:

   Use Transferable Objects like ArrayBuffer to avoid copying data -> Option A

5. Quick Check:

   Transferable Objects = efficient large data transfer [OK]

Hint: Transfer large data with Transferable Objects to avoid UI freeze [OK]

Common Mistakes:

• Sending large data as JSON causing slow parsing
• Splitting data unnecessarily increasing complexity
• Processing heavy tasks on main thread causing freezes