Working with WebAssembly and Rust: From A to Z

Introduction to WebAssembly and Rust

WebAssembly (WASM) is a low-level binary instruction format that allows running high-performance code in the browser at near-native speed. Rust, with its ownership system and lack of garbage collector, is an ideal language for compiling to WebAssembly. In this article, we will go from installing tools to creating a full-fledged WASM module in Rust.

Why Rust? It provides safe memory management, minimal binary size, and excellent performance. Combined with WebAssembly, you can write complex algorithms, games, graphics editors, and even full-fledged applications that run in the browser.

Installing Tools and Setting Up the Environment

To get started, you will need:

\n
• Rust (installed via rustup)
\n
• Target platform wasm32-unknown-unknown
\n
• wasm-pack tool (for building and publishing WASM)
\n
• A basic HTTP server (e.g., python3 -m http.server)
\n

Installing the target platform and wasm-pack:

# Install target platform for WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# Install wasm-pack\ncargo install wasm-pack

Now let's create a new project:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Open Cargo.toml and add the dependency:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

The cdylib flag indicates that we are creating a dynamic library compatible with WebAssembly.

Writing Your First WASM Module in Rust

Let's create a simple function that will be accessible from JavaScript. Edit src/lib.rs:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("Hello, {}! Welcome to the world of WebAssembly!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

The #[wasm_bindgen] attribute allows exporting functions to JavaScript. Note: String is automatically converted to a JavaScript string.

Now let's build the project:

wasm-pack build --target web

After building, the following files will appear in the pkg folder:

\n
• wasm_rust_demo_bg.wasm — compiled WASM module
\n
• wasm_rust_demo.js — JavaScript wrapper for convenient import
\n
• wasm_rust_demo.d.ts — TypeScript declarations
\n

Integration with JavaScript and HTML

Create an index.html file in the project root:

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Rust + WebAssembly Demo</title>\n</head>\n<body>\n    <h1>Rust + WebAssembly Example</h1>\n    \n    <div>\n        <h3>greet function</h3>\n        <input type="text" id="nameInput" placeholder="Enter name" value="World">\n        <button id="greetBtn">Greet</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>Fibonacci Numbers</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">Calculate</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/