Rust WASM (WebAssembly) with Examples

What is WebAssembly (WASM)?

WebAssembly is a low-level, binary format designed to run on web browsers and other environments. It is fast, secure, and portable. WASM can be used to execute code written in languages like Rust, C, or C++ directly in the browser, bridging the gap between native and web performance.

Why Use Rust for WASM?

Rust is an excellent choice for WebAssembly development because:

Memory Safety: Rust prevents memory-related bugs, a common issue in web development.
Performance: Rust’s compiled output is highly optimized, making it ideal for WASM.
Small Binary Size: Rust produces compact WASM files, improving load times.
Interoperability: Rust integrates seamlessly with JavaScript using tools like wasm-bindgen.

Setting Up Rust for WASM

Step 1: Install Rust and WASM Toolchain

Install the Rust toolchain:

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

Add the WebAssembly target:

rustup target add wasm32-unknown-unknown

Install wasm-pack for building and bundling Rust into WASM:

cargo install wasm-pack

Creating a Rust WASM Project

Step 1: Create a New Project

Create a new Rust library project:

cargo new --lib rust_wasm_example
cd rust_wasm_example

Step 2: Update Cargo.toml

Add the following dependencies for WebAssembly:

[dependencies]
wasm-bindgen = "0.2"

[lib]
crate-type = ["cdylib"] # Compile as a shared library for WASM

Step 3: Write Your Rust Code

Create a simple Rust function to export as WebAssembly:

use wasm_bindgen::prelude::*;

// Expose this function to JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! Welcome to Rust WASM.", name)
}

Building and Running Your WASM Module

Step 1: Build the Project

Use wasm-pack to build your project:

wasm-pack build --target web

This generates a pkg/ directory containing the WASM file and JavaScript bindings.

Step 2: Integrate with HTML/JavaScript

Create an HTML file to load and run your WASM module:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust WASM Example</title>
</head>
<body>
    <h1>Rust WASM Example</h1>
    <button id="greet-button">Greet</button>
    <script type="module">
        import init, { greet } from './pkg/rust_wasm_example.js';

        async function run() {
            await init(); // Initialize WASM module
            document.getElementById('greet-button').addEventListener('click', () => {
                alert(greet("Rust Developer"));
            });
        }

        run();
    </script>
</body>
</html>

Serve this file using a web server (e.g., python -m http.server) and open it in your browser. When you click the “Greet” button, a message will appear.

Advanced Features

1. Interacting with JavaScript

You can call JavaScript functions directly from Rust using wasm-bindgen.

Example:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str); // Import JavaScript's alert function
}

#[wasm_bindgen]
pub fn show_alert(message: &str) {
    alert(message);
}

2. Memory Management

Rust allows sharing memory between WASM and JavaScript using wasm-bindgen’s JsValue.