WebAssembly (WASM) Comprehensive Guide#

1
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
2

3
const ffmpeg = createFFmpeg({
4
  log: true,
5
  corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js",
6
});
7

8
async function convertVideo() {
9
  if (!ffmpeg.isLoaded()) {
10
    await ffmpeg.load();
11
  }
12

13
  ffmpeg.FS("writeFile", "input.webm", await fetchFile(videoFile));
14

15
  await ffmpeg.run(
16
    "-i",
17
    "input.webm",
18
    "-t",
19
    "2.5",
20
    "-ss",
21
    "2.0",
22
    "-f",
23
    "gif",
24
    "output.gif"
25
  );
26

27
  const data = ffmpeg.FS("readFile", "output.gif");
28

29
  return new Blob([data.buffer], { type: "image/gif" });
30
}

1
// Performance testing framework
2
function benchmark(name, fn, iterations = 1000000) {
3
  const start = performance.now();
4
  for (let i = 0; i < iterations; i++) {
5
    fn();
6
  }
7
  const end = performance.now();
8
  console.log(`${name}: ${end - start}ms`);
9
}
10

11
// JavaScript implementation
12
function fibonacciJS(n) {
13
  if (n < 2) return n;
14
  return fibonacciJS(n - 1) + fibonacciJS(n - 2);
15
}
16

17
// WebAssembly implementation (compiled from AssemblyScript)
18
import { fibonacci as fibonacciWASM } from "./wasm/fibonacci.js";
19

20
// Compare performance
21
const n = 40;
22
benchmark("JavaScript Fibonacci", () => fibonacciJS(n), 1);
23
benchmark("WebAssembly Fibonacci", () => fibonacciWASM(n), 1);

1
// Managing WASM memory
2
const memory = new WebAssembly.Memory({
3
  initial: 256,
4
  maximum: 512,
5
});
6

7
// Accessing memory from JavaScript
8
const buffer = new Uint8Array(memory.buffer);
9

10
// Growing memory
11
memory.grow(1); // Grow by 1 page (64KB)

1
// Check for SharedArrayBuffer support
2
if (typeof SharedArrayBuffer !== "undefined") {
3
  const sharedMemory = new WebAssembly.Memory({
4
    initial: 1,
5
    maximum: 10,
6
    shared: true,
7
  });
8

9
  // Use with web workers for parallel processing
10
}

1
// Using WASI for system-level operations
2
import { WASI } from "@wasmer/wasi";
3

4
const wasi = new WASI({
5
  args: ["program"],
6
  env: {},
7
  preopens: {
8
    "/sandbox": "/some/real/path",
9
  },
10
});
11

12
const wasmBytes = await fetch("program.wasm").then(res => res.arrayBuffer());
13
const wasmModule = await WebAssembly.instantiate(wasmBytes, {
14
  wasi_snapshot_preview1: wasi.wasiImport,
15
});
16

17
wasi.start(wasmModule.instance);

1
// Profile WASM performance
2
console.profile("WASM Operation");
3
wasmFunction();
4
console.profileEnd("WASM Operation");

1
// Jest configuration for WASM
2
module.exports = {
3
  testEnvironment: "node",
4
  transform: {
5
    "^.+\\.wasm$": "jest-transform-wasm",
6
  },
7
};
8

9
// Test file
10
import { add } from "./math.wasm";
11

12
test("WASM add function", () => {
13
  expect(add(2, 3)).toBe(5);
14
});

1
// Testing WASM with React Testing Library
2
import { render, fireEvent } from "@testing-library/react";
3
import WASMComponent from "./WASMComponent";
4

5
test("WASM component integration", async () => {
6
  const { getByText } = render(<WASMComponent />);
7

8
  fireEvent.click(getByText("Compute"));
9

10
  await waitFor(() => {
11
    expect(getByText(/Result:/)).toBeInTheDocument();
12
  });
13
});

1
// Problem: Not releasing WASM memory
2
const wasmInstance = await WebAssembly.instantiate(wasmBytes);
3

4
// Solution: Proper cleanup
5
class WASMManager {
6
  constructor() {
7
    this.instances = new Set();
8
  }
9

10
  async createInstance(wasmBytes) {
11
    const instance = await WebAssembly.instantiate(wasmBytes);
12
    this.instances.add(instance);
13
    return instance;
14
  }
15

16
  cleanup() {
17
    this.instances.clear();
18
  }
19
}

1
// Problem: Incorrect data types
2
wasmFunction(3.14); // Passing float to i32 parameter
3

4
// Solution: Proper type conversion
5
wasmFunction(Math.floor(3.14)); // Convert to integer

1
try {
2
  const result = await WebAssembly.instantiate(wasmBytes);
3
} catch (error) {
4
  if (error instanceof WebAssembly.CompileError) {
5
    console.error("WASM compilation failed:", error);
6
  } else if (error instanceof WebAssembly.LinkError) {
7
    console.error("WASM linking failed:", error);
8
  } else {
9
    console.error("Unknown WASM error:", error);
10
  }
11
}