Rust WASM Breakthrough: Ship Blazing Browser Code Fast

WebAssembly lets Rust run in browsers at near-native speed. You'll compile a hot function, load it from JavaScript, and watch a filter run 9x faster. No plugins needed.

The boundary is where teams stumble. You'll pass whole buffers instead of per-pixel calls and keep closures alive correctly. Small habits decide everything.

Don't rewrite your app though. You'll profile first, port the 5% that burns CPU, and keep UI in JS. WASM stays surgical.

Setup is three steps: add the wasm32-unknown-unknown target, mark the crate cdylib, and build with wasm-pack. rustup target add wasm32-unknown-unknown installs codegen, crate-type = ["cdylib"] emits a loadable module, and wasm-pack build --target web writes pkg/ with glue.

Serve over HTTP during development. Browsers block WASM loads from file:// URLs, so python3 -m http.server in the project root unblocks testing in seconds.

#[wasm_bindgen] exports functions to JavaScript. Plain numbers and strings cross freely; complex structs need explicit conversion or serialization. Keep signatures flat: numbers in, numbers or strings out.

Annotate sparingly and test each export from Node before wiring the UI. wasm-pack test --node runs exports headlessly, catching signature mistakes 10x faster than browser refresh loops.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: u32, b: u32) -> u32 {
    a + b
}

Batching decides whether WASM wins. One call carrying a 2M-pixel buffer runs in 41ms; 2M calls carrying one pixel each take 380ms. The math is identical; only the call count changes.

Design exports around buffers: accept &[u8], process in place, return counts or compact results. Measure with performance.now() around the batch so regressions show as numbers, not vibes.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn invert(pixels: &mut [u8]) {
    for p in pixels.iter_mut() {
        *p = 255 - *p;
    }
}

Callbacks need Closure::wrap to become JS functions. A stack-local Closure drops at function end, leaving the browser with a dangling hook that fires twice then stops. No error appears in any console.

Persistent listeners must forget() their handle or store it globally. One-line omission, week-long debug. Test navigation and re-registration 10 times before shipping.

Memory is one linear buffer shared with JS. Allocate inside exported functions, return owned values, and never cache &str views across calls. Reallocation or GC can invalidate views silently.

Watch total size: keep first-load modules under 500KB compressed. Split editors and codecs into lazy chunks loaded after first paint.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greeting(name: &str) -> String {
    format!("hello, {}!", name)
}

Test in two layers: pure logic with cargo test, browser behavior with wasm-pack test. Logic tests iterate in milliseconds natively; only boundary and DOM tests need a browser. Most bugs live in logic, so keep them native.

Profile before porting more code. Devtools flame graphs show whether Rust or glue dominates. Port the next hotspot only when measurements justify it.