Your Yearly Shot of Angular at

17/04/2024: Angular e Signal Today: Angular e Web Worker

Single-Threaded 🛣

Multi-Threaded 🛣 🛣

🌰 In a nutshell

The Event Loop

BUT

The Synchronous code

     
      const heavyTask = () => {
        for (let i = 0; i < 10000000000; i++) {
          //do something useful
        }
      };
   

• 🐣 Born in 2009
• 🧮 Multi-threaded code execution
• 🔒 Fully isolated
• ✅ Not framework related

Let's Code 👨‍💻

  
  self.onmessage = (event) => {
    console.log("Worker received:", event.data);
    // Do heavy stuff
    self.postMessage(`Hello from worker!`);
  };

Let's Code 👨‍💻

    
  const worker = new Worker("worker.js");

  worker.onmessage = (event) => {
    console.log("Main thread received:", event.data);
    // Do some other stuff
   };
  
   // Starting point
   worker.postMessage("Hello Web Day!");
  

◝(ᵔᗜᵔ)◜

Let's go further ᯓ🏃🏻‍♀️‍➡️

• 📌 data
• 📌 origin
• 📌 source
• 📌 ports

• ⛔ ErrorEvent
• 💬 Optional string on message properties

  worker.onerror = (event) => { 
    console.log(event.message);
  };

🤝🏻 Web Worker - Practical Use Cases

• 🖼️ Image compression and processing
• 🧾 CSV data processing and formatting
• 🧮 Complex algorithms

Let's go further ᯓᯓ🏃🏻‍♀️‍➡️🏃🏻‍♀️‍➡️

🤝🏻 Shared Worker

🤝🏻 Shared Worker

• 🌍 Can be shared across multiple tabs of the same origin
• 😎 Keep alive until all tabs are closed (even if the page is reloaded)
• 💬 Communicate through the MessagePort API

🤝🏻 Shared Worker - Practical Use Cases

• 🗣️ Cross-tab communication through the MessagePort API
• 🗃️ Shared Cache or Data Storage
• 👥 Session Management

Let's Code 👨‍💻

  
    const clients = [];
    
    self.onconnect = (event) => {
      const [port] = event.ports;
      clients.push(port);
      port.postMessage("Worker connected");
      port.onmessage = (e) => {
        clients.forEach((client) =>
          client.postMessage(
            `New client connected with message: "${e.data}"`
          )
        );
      };
    };

Let's Code 👨‍💻

    
    const sharedWorker = new SharedWorker("shared-worker.js");
    sharedWorker.port.start();

    sharedWorker.port.onmessage = (e) => {
      console.log(e.data);
    };

    sharedWorker.port.postMessage("Hello from Tab 1");
  

⛓️‍💥 when client disconnect

Let's Code 👨‍💻

    
  const clients = [];
  self.onconnect = (event) => {
    // ...other stuff
    port.onclose = () => {
      clients.splice(clients.indexOf(port), 1);
      clients.forEach((client) =>
        client.postMessage(
          `Client disconnected. Total clients remaining: ${clients.length}`
        )
      );
    };
  }

• ❌ No access to the DOM
• ❌ No access to global variables like window, document, or parent
• ❌ No synchronous APIs like alert(), confirm(), or prompt()
• ❌ No access to storage APIs

⚙️ Angular CLI

• 🆕 Create new file
• 🆕 Create new file tsconfig.worker.json (only first time)
• 🔄 Update angular.json (only first time)
• 🔄 Update class file only if web worker has the same name

⚙️ Angular CLI

    
      ng g web-worker services/worker-test
      
      CREATE src/app/services/worker-test.worker.ts (157 bytes)
      CREATE tsconfig.worker.json (334 bytes)
      UPDATE angular.json (2946 bytes)
      UPDATE src/app/services/worker-test.service.ts (537 bytes)
    

    
      /// <reference lib="webworker" />

      addEventListener('message', ({ data }) => {
        const response = `worker response to ${data}`;
        postMessage(response);
      });

    
    

    
      // ...
      export class WorkerTestService {
        constructor() { }
      }
      
    if (typeof Worker !== 'undefined') {
        // Create a new
        const worker = new Worker(new URL('./worker-test.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
          console.log(`page got message: ${data}`);
        };
        worker.postMessage('hello');
    } else {
        // Web Workers are not supported in this environment.
        // You should add a fallback so that your program still executes correctly.
      }
    

Let's Code 👨‍💻

    
      addEventListener('message', ({ data }) => {
        heavyTask();
        postMessage(`done "${data}" task`);
      });
    
  

Let's Code 👨‍💻

    
      //...
      export class WorkerTestService {
        #worker!: Worker;
        
        constructor() {
          this.createWorker();
        }
      
        createWorker() {
          this.#worker = new Worker(
            new URL('./worker-test.worker.ts', import.meta.url)
          );
        }
      
      doHeavyWork(data: string): Observable<string> {
          return new Observable((observer) => {
            this.#worker.onmessage = ({ data }: MessageEvent<string>) => {
              observer.next(data);
              observer.complete();
            };
            this.#worker.onerror = (error) => observer.error(error);
            this.#worker.postMessage(data);
          });
        }
      }
    

Let's Code 👨‍💻

    
      // ...
      export class HomeComponent {
        readonly #workerService = inject(WorkerTestService);
        
        startHeavyWorkInWorker() {
          this.#workerService
            .doHeavyWork('daje')
            .subscribe((data) => console.log(data)); // done "daje" task
        }
      }
  

📚 Web Worker Pool

• ♻️ Reduced Overhead
• 💪 Efficient Resource Management
• 🎢 Scalability

Pool worker loop 🔁

Let's Code 👨‍💻

    
  const POOL_SIZE = 4;
  export class WorkerPoolService {
    #workers: Worker[] = [];

    constructor() {
      this.createPoolWorkers();
    }
    createPoolWorkers() {
        for (let i = 0; i < POOL_SIZE; i++) {
          const worker = new Worker(
            new URL('./worker-test.worker.ts', import.meta.url)
          );
          this.#increaseWorkerPool(worker);
        }
    }
    #increaseWorkerPool(worker: Worker) {
      this.#workers.push(worker);
    }
  }
    

Let's Code 👨‍💻

    
    export class WorkerPoolService {
      //...
      getWorker(data: string): Observable<string> | null {
        const worker = this.#workers.pop();
        if (!worker) return null;
        return new Observable((observer) => {
          worker.onmessage = ({ data }: MessageEvent<string>) => {
            observer.next(data);
            observer.complete();
            this.#increaseWorkerPool(worker);
          };
          worker.onerror = (error) => observer.error(error);
          worker.postMessage(data);
        });
      }
    }

Let's Code 👨‍💻

    
      export class PoolWorkerComponent {     
        //...
        startNewHeavyJob(task: string) {
          const newWorker = this.#poolWorkerService.getWorker(task);
          if (!newWorker) {
            this.disableButton.set(true);
            return;
          }
          newWorker.subscribe((data) => {
            this.disableButton.set(false);
            console.log(data);
          });
        }
      }

• ❌ Too Many Workers
• ❌ Passing Large Data Objects
• ❌ Memory and performance impact
• ❌ Using Workers for Small, Frequent Tasks

Questions? 🤔

     
      self.onmessage = async (event) => {
        const { data: question } = event;
        
        const answer = await answer(question);
        self.postMessage(`The answer is: ${answer}`);
      };