Integrating WebAssembly for Performance-Critical Angular Components

---
description: Guidelines for integrating WebAssembly into Angular projects to enhance performance in computation-intensive tasks.
globs: src/**/*.ts
tags: [Angular, WebAssembly, Performance]
priority: 3
version: 1.0.0
---

# Integrating WebAssembly for Performance-Critical Angular Components

## Context
- Applicable when developing Angular components that require high computational performance.
- Suitable for tasks such as complex calculations, data processing, or real-time analytics.

## Requirements
- **Identify Performance Bottlenecks**: Profile your Angular application to pinpoint components where performance is critical.
- **Develop WebAssembly Modules**: Implement performance-intensive logic in languages like Rust or C++ that compile to WebAssembly.
- **Integrate WebAssembly into Angular**:
  - Compile the WebAssembly module and include the `.wasm` file in your Angular project's assets.
  - Load the WebAssembly module asynchronously within the Angular component using `fetch` and `WebAssembly.instantiate`.
  - Ensure proper type definitions and handle data conversion between JavaScript and WebAssembly.
- **Optimize Communication**: Minimize data transfer between Angular and WebAssembly by:
  - Passing only necessary data.
  - Using shared memory where applicable.
- **Testing**:
  - Write unit tests for WebAssembly functions to ensure correctness.
  - Perform integration tests to verify seamless interaction between Angular components and WebAssembly modules.
- **Performance Monitoring**: Continuously monitor the performance impact of WebAssembly integration and optimize as needed.

## Examples

<example>
**Good Example**: Integrating a WebAssembly module for matrix multiplication in an Angular component.

// matrix-multiplication.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-matrix-multiplication',
  templateUrl: './matrix-multiplication.component.html',
  styleUrls: ['./matrix-multiplication.component.css']
})
export class MatrixMultiplicationComponent implements OnInit {
  private wasmModule: any;

  async ngOnInit() {
    this.wasmModule = await this.loadWasmModule('assets/matrix_multiplication.wasm');
  }

  private async loadWasmModule(path: string): Promise<any> {
    const response = await fetch(path);
    const buffer = await response.arrayBuffer();
    const { instance } = await WebAssembly.instantiate(buffer, {});
    return instance.exports;
  }

  multiplyMatrices(a: number[][], b: number[][]): number[][] {
    // Convert matrices to a format suitable for WebAssembly
    // Call the WebAssembly function
    // Convert the result back to a JavaScript array
  }
}
</example>

<example type="invalid">
**Bad Example**: Performing complex matrix multiplication directly in Angular without WebAssembly, leading to performance issues.

// matrix-multiplication.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-matrix-multiplication',
  templateUrl: './matrix-multiplication.component.html',
  styleUrls: ['./matrix-multiplication.component.css']
})
export class MatrixMultiplicationComponent {
  multiplyMatrices(a: number[][], b: number[][]): number[][] {
    // JavaScript implementation of matrix multiplication
    // This can be slow for large matrices
  }
}
</example>