Rust and WebAssembly

What is WebAssembly?

Browsers originally ran only JavaScript. WebAssembly, supported by all major browsers since 2017, is a second language for the web: a compact, binary instruction format that runs in the same safe sandbox as JavaScript, but much closer to native machine speed for heavy calculations. You do not write Wasm by hand; you compile another language, such as Rust, C++ or Go, to it.

When Rust + Wasm makes sense

• Image and video processing in the browser: filters, resizing, background blur.
• PDF, spreadsheet or file-format work done on the user's device, so files never leave it (good for privacy).
• Games, simulations, charts with huge data sets.
• Sharing one tested Rust library between a server and a web front end.

It is not a good fit for ordinary button clicks and form handling: JavaScript is already fast enough there, and crossing between JS and Wasm has a small cost. Wasm also cannot touch the page (the DOM) directly; it goes through JavaScript glue.

The toolchain

rustup target add wasm32-unknown-unknown
cargo install wasm-pack

[package]
name = "emi_calc"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2"

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn emi(principal: f64, yearly_rate: f64, months: u32) -> f64 {
    if yearly_rate == 0.0 {
        return principal / months as f64;
    }
    let r = yearly_rate / 12.0 / 100.0;
    let f = (1.0 + r).powi(months as i32);
    principal * r * f / (f - 1.0)
}

wasm-pack build --target web

<script type="module">
  import init, { emi } from './pkg/emi_calc.js';
  await init();                          // load and start the Wasm module
  console.log(emi(500000, 9, 60).toFixed(2));   // 10379.18
</script>

Size and debugging tips

• Build in release mode (wasm-pack does by default) and avoid heavy dependencies; every crate adds bytes users must download.
• Pass big data as bytes (Vec<u8> / Uint8Array) in one call, rather than calling back and forth thousands of times.
• Add the console_error_panic_hook crate during development so Rust panics show readable messages in the browser console.

Wasm outside the browser

Wasm also runs outside browsers, in runtimes such as Wasmtime and in some edge-computing and plugin platforms. WASI (the WebAssembly System Interface) gives such programs controlled access to files, clocks and networks. Rust supports it with dedicated targets; it is a young, fast-moving area, so read the current documentation before choosing it.

Common mistakes

• Forgetting crate-type = ["cdylib"]: no usable .wasm is produced.
• Opening the HTML file directly from disk. Use a local server (for example python -m http.server).
• Expecting Wasm to speed up DOM-heavy code. It helps with computation, not with page updates.
• Shipping a debug build: much larger and slower.