Build Tools

Wasm-Pack

Rust has native WASM support via wasm-pack.

Build command:

wasm-pack build --target web

This compiles your Rust code to WebAssembly and generates JavaScript bindings.

Key Dependencies

Wasm-Bindgen

wasm-bindgen facilitates communication between WebAssembly and JavaScript.

Use case: Exposing Rust functions to JS, importing JS functions into Rust

Console Error Panic Hook

console_error_panic_hook provides better error messages when Rust panics in WASM.

Add to Cargo.toml:

[dependencies]
wasm-bindgen = "0.2"
console_error_panic_hook = "0.1"

Common Gotchas

Memory Management

  • WASM has a linear memory model
  • Need to be careful with memory allocation between JS and Rust
  • Use web-sys for DOM manipulation

Async Operations

  • Rust's async/await works differently in WASM
  • Need wasm-bindgen-futures for promise integration

File Size

  • Debug builds can be large (several MB)
  • Use --release flag and wasm-opt for production

Resources