WebAssembly for People Who Code

WebAssembly lets you run near-native-speed code in the browser. It’s not a language itself. It’s a format your code can be compiled to. Rust, C, C++, AssemblyScript, even Go can target it. We'll get practical: how to set it up, write a module, and call it from JavaScript.

Installing and Setting Up Rust for WASM

First, you need Rust and the `wasm-pack` tool. On macOS or Linux:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

On Windows, use the same `rustup` installer and install `wasm-pack` via `cargo install wasm-pack` in PowerShell.

Create a new Rust library for WebAssembly:

cargo new wasm_example --lib
cd wasm_example

Edit `Cargo.toml` to add `crate-type` for cdylib so it compiles to WASM:

[lib]
crate-type = ["cdylib"]

Writing a Simple Rust Function

Here’s a function to sum an array of numbers:

#[no_mangle]
pub extern "C" fn sum_array(ptr: *const i32, len: usize) -> i32 {
    let slice = unsafe { std::slice::from_raw_parts(ptr, len) };
    slice.iter().sum()
}

Compile it to WebAssembly with `wasm-pack build --target web`. You’ll get a `pkg` folder with your `.wasm` and JS bindings.

In your JS code, you can call it like this:

import init, { sum_array } from './pkg/wasm_example.js';

async function run() {
  await init();
  const numbers = new Int32Array([1,2,3,4,5]);
  const total = sum_array(numbers, numbers.length);
  console.log(total); // 15
}

run();

Trying AssemblyScript

AssemblyScript is TypeScript-like and compiles directly to WASM. It’s a good choice if you know JS/TS and want to dip a toe in WebAssembly without Rust.

Install AssemblyScript via npm:

npm install -g assemblyscript
asc init my_asc_project

Create a simple `sum.ts` in `assembly/`:

export function sum(arr: Int32Array): i32 {
  let total: i32 = 0;
  for (let i = 0; i < arr.length; i++) {
    total += arr[i];
  }
  return total;
}

Compile it with `asc assembly/sum.ts -b build/sum.wasm -t build/sum.wat --sourceMap` and call it from JS:

const fs = require('fs');
const bytes = fs.readFileSync('./build/sum.wasm');

(async () => {
  const obj = await WebAssembly.instantiate(bytes);
  const sum = obj.instance.exports.sum;
  console.log(sum(new Int32Array([1,2,3,4,5])));
})();

Why Bother

You don’t need to rewrite your whole app in WASM. The fun is picking one part that benefits from predictable speed or heavy computation. Loops, math, image crunching, parsing, things JS struggles with. Write it once in Rust or AssemblyScript, compile, drop it in the browser, and watch your app feel smoother.

Bonus: knowing WASM is a neat brag. You can casually mention at work: 'Oh, that? Offloaded to WebAssembly. Totally worth it.' People nod. You look smart. Yayy.