WebAssembly in JavaScript

Why Use WebAssembly with JavaScript?

1. Performance Boost:
   • WebAssembly modules are highly optimized and execute at near-native speed, making them ideal for computationally intensive tasks.
2. Seamless Interoperability:
   • JavaScript acts as the glue, allowing WebAssembly to interact with the DOM, handle user events, and integrate with other APIs.
3. Reusability:
   • You can write critical code (e.g., algorithms) in a language like Rust, C++ or Go, compile it to WebAssembly and call it from JavaScript.
4. Wide Browser Support:
   • Modern browsers, including Chrome, Firefox, Safari and Edge, support WebAssembly natively, enabling smooth integration.

How JavaScript and WebAssembly Work Together

1. Loading a WebAssembly Module:
   • WebAssembly modules are loaded into the browser using JavaScript’s WebAssembly API.
2. Calling WebAssembly Functions:
   • JavaScript can invoke exported functions from a WebAssembly module.
3. Passing Data Between JavaScript and WebAssembly:
   • Primitive types like integers and floats are passed directly. Complex data structures require memory buffers.
4. Using Imports and Exports:
   • WebAssembly modules can import functions from JavaScript or export their own functions for JavaScript to use.

Key Components of WebAssembly in JavaScript

1. WebAssembly Module:
   • The compiled .wasm binary file.
2. WebAssembly Instance:
   • Represents an instance of a WebAssembly module, linking it with imported functions and memory.
3. JavaScript Integration:
   • JavaScript provides the environment for running and interacting with WebAssembly.

Loading and Executing WebAssembly in JavaScript

Example 1: Loading a WebAssembly Module

Here’s how you load and execute a simple WebAssembly module in JavaScript:

WebAssembly Module (in .wat format):

(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
  (export "add" (func $add))
)

Compiling to .wasm :

Use the WABT toolkit to compile:

wat2wasm module.wat -o module.wasm

JavaScript Code:

// Load and instantiate the WebAssembly module
(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const wasmModule = await WebAssembly.instantiate(buffer);

  // Access the exported function
  const add = wasmModule.instance.exports.add;

  // Call the WebAssembly function from JavaScript
  console.log("Result:", add(5, 7)); // Output: 12
})();

Example 2: Passing Data to WebAssembly

When passing large or complex data (e.g., arrays), WebAssembly uses linear memory shared between JavaScript and Wasm.

WebAssembly Module:

(module
  (memory (export "memory") 1)
  (func $sumArray (param i32 i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (loop $loop
      (local.get $i)
      (local.get 1)
      i32.ge_u
      if (result i32) ;; Exit loop
        local.get $sum
        return
      end
      (local.get $sum)
      (local.get 0)
      (local.get $i)
      i32.add ;; Compute the array index
      i32.load ;; Load the value
      i32.add
      local.set $sum
      (local.get $i)
      i32.const 1
      i32.add
      local.set $i
      br $loop
    )
  )
  (export "sumArray" (func $sumArray))
)

JavaScript Code:

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const wasmModule = await WebAssembly.instantiate(buffer);

  const memory = new Uint32Array(wasmModule.instance.exports.memory.buffer);

  // Initialize an array in the shared memory
  memory.set([10, 20, 30, 40], 0); // Array starts at index 0

  // Call the WebAssembly function
  const sumArray = wasmModule.instance.exports.sumArray;
  console.log("Sum:", sumArray(0, 4)); // Output: 100
})();

WebAssembly Imports in JavaScript

WebAssembly modules can import functions from JavaScript for tasks like logging, accessing the DOM or interacting with APIs.

WebAssembly Module:

(module
  (import "env" "log" (func $log (param i32)))
  (func $callLog (param i32)
    local.get 0
    call $log
  )
  (export "callLog" (func $callLog))
)

JavaScript Code:

const imports = {
  env: {
    log: (value) => console.log("Log from Wasm:", value),
  },
};

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const wasmModule = await WebAssembly.instantiate(buffer, imports);

  const callLog = wasmModule.instance.exports.callLog;
  callLog(42); // Output: Log from Wasm: 42
})();

WebAssembly Exports in JavaScript

Exported WebAssembly functions are accessed through the instance.

WebAssembly Module:

(module
  (func $multiply (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.mul
  )
  (export "multiply" (func $multiply))
)

JavaScript Code:

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const wasmModule = await WebAssembly.instantiate(buffer);

  const multiply = wasmModule.instance.exports.multiply;
  console.log("Product:", multiply(6, 7)); // Output: 42
})();

Best Practices for Using WebAssembly with JavaScript

1. Optimize Critical Paths:
   • Use WebAssembly for compute-heavy tasks and JavaScript for application logic.
2. Manage Memory Effectively:
   • Allocate memory wisely, as WebAssembly has a fixed linear memory.
3. Use Source Maps for Debugging:
   • Generate source maps during compilation to debug efficiently.
4. Leverage Imports/Exports:
   • Use imports for interacting with the environment and exports for shared logic.
5. Ensure Browser Compatibility:
   • Check browser support for WebAssembly features.