Chapter 14: WebAssembly

---

Introduction

WebAssembly (Wasm) is a binary instruction format that enables high-performance execution of code on web browsers. It is designed to be a portable compilation target for programming languages like C, C++, and Rust, allowing these languages to run on the web. This chapter explores the basics and use cases of WebAssembly, and how to integrate WebAssembly with JavaScript. Each section includes practical examples to illustrate key concepts and techniques.

---

Basics and Use Cases

WebAssembly is designed to provide near-native performance for web applications, making it ideal for computationally intensive tasks.

Example 1: Compiling C code to WebAssembly involves writing a simple C program and compiling it using Emscripten. This allows C code to run on the web:

c

// hello.c
#include <stdio.h>

int main() {
  printf("Hello, WebAssembly!\n");
  return 0;
}

Compile with Emscripten:

bash

emcc hello.c -s WASM=1 -o hello.html

Example 2: Loading a WebAssembly module in JavaScript involves fetching the .wasm file and compiling it using the WebAssembly API. This enables interaction between JavaScript and WebAssembly:

javascript

fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    console.log('WebAssembly module loaded:', results);
  });

Example 3: Calling a WebAssembly function from JavaScript involves exporting functions from the WebAssembly module and invoking them in JavaScript. This allows JavaScript to leverage WebAssembly’s performance:

c

// add.c
int add(int a, int b) {
  return a + b;
}

Compile with Emscripten:

bash

emcc add.c -s WASM=1 -o add.wasm

JavaScript:

javascript

fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const add = results.instance.exports.add;
    console.log('1 + 2 =', add(1, 2));
  });

Example 4: Using WebAssembly for image processing involves writing an image processing algorithm in a language like C, compiling it to WebAssembly, and using it in a web application:

c

// grayscale.c
void grayscale(unsigned char *image, int width, int height) {
  for (int i = 0; i < width * height * 4; i += 4) {
    unsigned char gray = (image[i] + image[i+1] + image[i+2]) / 3;
    image[i] = image[i+1] = image[i+2] = gray;
  }
}

Compile with Emscripten:

bash

emcc grayscale.c -s WASM=1 -o grayscale.wasm

JavaScript:

javascript

fetch('grayscale.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const grayscale = results.instance.exports.grayscale;
    // Use grayscale function to process image data
  });

Example 5: Using WebAssembly for numerical simulations involves writing a simulation algorithm in a language like C++, compiling it to WebAssembly, and using it in a web application:

cpp

// simulation.cpp
#include <vector>

std::vector<double> simulate(int steps) {
  std::vector<double> results(steps);
  for (int i = 0; i < steps; ++i) {
    results[i] = i * 0.5;
  }
  return results;
}

Compile with Emscripten:

bash

emcc simulation.cpp -s WASM=1 -o simulation.wasm

JavaScript:

javascript

fetch('simulation.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const simulate = results.instance.exports.simulate;
    console.log('Simulation results:', simulate(10));
  });

Example 6: Using WebAssembly for cryptography involves writing cryptographic algorithms in a language like Rust, compiling them to WebAssembly, and using them in a web application:

rust

// crypto.rs
#[no_mangle]
pub extern "C" fn hash(input: &str) -> u32 {
  let mut hasher = std::collections::hash_map::DefaultHasher::new();
  std::hash::Hash::hash(input, &mut hasher);
  hasher.finish() as u32
}

Compile with Rust and wasm-pack:

bash

wasm-pack build --target web

JavaScript:

javascript

fetch('crypto_bg.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const hash = results.instance.exports.hash;
    console.log('Hash of "hello":', hash('hello'));
  });

Example 7: Using WebAssembly for audio processing involves writing an audio processing algorithm in a language like C++, compiling it to WebAssembly, and using it in a web application:

cpp

// audio.cpp
void amplify(float *samples, int length, float factor) {
  for (int i = 0; i < length; ++i) {
    samples[i] *= factor;
  }
}

Compile with Emscripten:

bash

emcc audio.cpp -s WASM=1 -o audio.wasm

JavaScript:

javascript

fetch('audio.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const amplify = results.instance.exports.amplify;
    // Use amplify function to process audio data
  });

Example 8: Using WebAssembly for game development involves writing game logic in a language like C++, compiling it to WebAssembly, and using it in a web application:

cpp

// game.cpp
int score = 0;

void incrementScore() {
  score += 10;
}

int getScore() {
  return score;
}

Compile with Emscripten:

bash

emcc game.cpp -s WASM=1 -o game.wasm

JavaScript:

javascript

fetch('game.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const incrementScore = results.instance.exports.incrementScore;
    const getScore = results.instance.exports.getScore;
    incrementScore();
    console.log('Score:', getScore());
  });

Example 9: Using WebAssembly for data visualization involves writing data processing algorithms in a language like Rust, compiling them to WebAssembly, and using them in a web application:

rust

// visualize.rs
#[no_mangle]
pub extern "C" fn processData(data: &[i32]) -> i32 {
  data.iter().sum()
}

Compile with Rust and wasm-pack:

bash

wasm-pack build --target web

JavaScript:

javascript

fetch('visualize_bg.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const processData = results.instance.exports.processData;
    const data = new Int32Array([1, 2, 3, 4, 5]);
    console.log('Sum of data:', processData(data));
  });

Example 10: Using WebAssembly for machine learning involves writing machine learning algorithms in a language like Python, converting them to WebAssembly via tools like Pyodide, and using them in a web application:

python

# model.py
def predict(data):
    return sum(data) / len(data)

Compile with Pyodide:

bash

pyodide build

JavaScript:

javascript

importScripts('pyodide.js');

(async () => {
  const pyodide = await loadPyodide();
  await pyodide.runPythonAsync(`
    import model
    data = [1, 2, 3, 4, 5]
    result = model.predict(data)
  `);
  const result = pyodide.globals.get('result');
  console.log('Prediction:', result);
})();

---

Integrating WebAssembly with JavaScript

Integrating WebAssembly with JavaScript allows you to leverage WebAssembly’s performance and capabilities within a web application.

Example 1: Loading a WebAssembly module as an ES6 module involves using the import syntax. This allows for a more modular approach to using WebAssembly:

javascript

import { add } from './add.wasm';

console.log('1 + 2 =', add(1, 2));

Example 2: Passing JavaScript objects to WebAssembly involves converting objects to a format that WebAssembly can understand, such as arrays or TypedArrays:

javascript

const data = new Float32Array([1.0, 2.0, 3.0, 4.0]);
const memory = new WebAssembly.Memory({ initial: 1 });
const imports = {
  env: {
    memory,
    dataPtr: 0,
    dataLength: data.length,
  },
};

fetch('process.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, imports))
  .then(results => {
    const process = results.instance.exports.process;
    const dataBuffer = new Float32Array(memory.buffer, 0, data.length);
    dataBuffer.set(data);
    process();
    console.log('Processed data:', dataBuffer);
  });

Example 3: Using WebAssembly to manipulate the DOM involves calling JavaScript functions from WebAssembly to interact with the DOM. This allows WebAssembly to update the web page:

javascript

const importObject = {
  env: {
    alert: function(ptr, len) {
      const memory = new Uint8Array(importObject.env.memory.buffer, ptr, len);
      const message = new TextDecoder('utf-8').decode(memory);
      alert(message);
    },
    memory: new WebAssembly.Memory({ initial: 1 }),
  },
};

fetch('alert.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const showAlert = results.instance.exports.showAlert;
    showAlert();
  });

Example 4: Calling JavaScript functions from WebAssembly involves importing JavaScript functions into the WebAssembly module and invoking them. This enables interaction between WebAssembly and the web environment:

javascript

const importObject = {
  env: {
    log: function(arg) {
      console.log('Called from WebAssembly:', arg);
    },
  },
};

fetch('log.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const callLog = results.instance.exports.callLog;
    callLog(42);
  });

Example 5: Using WebAssembly for asynchronous tasks involves integrating WebAssembly with JavaScript’s async functions. This allows WebAssembly to perform non-blocking operations:

javascript

async function loadWasm() {
  const response = await fetch('async.wasm');
  const bytes = await response.arrayBuffer();
  const results = await WebAssembly.instantiate(bytes);
  return results.instance.exports;
}

loadWasm().then(exports => {
  const result = exports.computeAsync();
  console.log('Async result:', result);
});

Example 6: Integrating WebAssembly with Web Workers involves offloading heavy computations to a Web Worker, allowing WebAssembly to run in a separate thread. This improves performance:

javascript

const worker = new Worker('worker.js');
worker.onmessage = event => {
  console.log('Result from Web Worker:', event.data);
};

worker.postMessage({ wasmUrl: 'compute.wasm' });

// worker.js
self.onmessage = async event => {
  const response = await fetch(event.data.wasmUrl);
  const bytes = await response.arrayBuffer();
  const results = await WebAssembly.instantiate(bytes);
  const compute = results.instance.exports.compute;
  self.postMessage(compute());
};

Example 7: Using WebAssembly with WebGL involves leveraging WebAssembly’s performance to perform complex WebGL operations. This is useful for graphics-intensive applications:

javascript

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
const importObject = {
  env: {
    glClearColor: gl.clearColor.bind(gl),
    glClear: gl.clear.bind(gl),
  },
};

fetch('webgl.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const render = results.instance.exports.render;
    render();
  });

Example 8: Integrating WebAssembly with WebRTC involves using WebAssembly to process real-time audio and video data. This enhances performance for real-time communication applications:

javascript

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream;
    const importObject = {
      env: {
        processFrame: function(ptr, len) {
          // Process video frame with WebAssembly
        },
      },
    };

    fetch('webrtc.wasm')
      .then(response => response.arrayBuffer())
      .then(bytes => WebAssembly.instantiate(bytes, importObject))
      .then(results => {
        const processStream = results.instance.exports.processStream;
        processStream(stream);
      });
  });

Example 9: Using WebAssembly with IndexedDB involves storing and retrieving data from IndexedDB using WebAssembly. This provides persistent storage for web applications:

javascript

const importObject = {
  env: {
    indexedDBOpen: function(dbNamePtr, dbNameLen) {
      const dbName = new TextDecoder('utf-8').decode(new Uint8Array(importObject.env.memory.buffer, dbNamePtr, dbNameLen));
      const request = indexedDB.open(dbName);
      request.onsuccess = function(event) {
        importObject.env.db = event.target.result;
      };
    },
  },
};

fetch('indexeddb.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const openDatabase = results.instance.exports.openDatabase;
    openDatabase();
  });

Example 10: Integrating WebAssembly with WebSockets involves using WebAssembly to handle WebSocket communication. This is useful for real-time applications:

javascript

const importObject = {
  env: {
    websocketSend: function(ptr, len) {
      const message = new TextDecoder('utf-8').decode(new Uint8Array(importObject.env.memory.buffer, ptr, len));
      websocket.send(message);
    },
  },
};

const websocket = new WebSocket('wss://example.com');
websocket.onmessage = function(event) {
  const message = event.data;
  // Process message with WebAssembly
};

fetch('websocket.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(results => {
    const sendMessage = results.instance.exports.sendMessage;
    sendMessage();
  });

---

Conclusion

WebAssembly is a powerful tool for enhancing web applications with near-native performance. This chapter covered the basics of WebAssembly, various use cases, and how to integrate WebAssembly with JavaScript. The provided examples demonstrate practical applications of WebAssembly, from compiling code to interacting with JavaScript, handling DOM manipulation, and performing complex computations. By leveraging WebAssembly, developers can create high-performance, efficient, and feature-rich web applications.