Rust → WebAssembly

Rust adalah bahasa paling populer untuk WebAssembly. Toolchain-nya mature, hasilnya compact, dan integrasi dengan JavaScript sangat baik berkat wasm-bindgen.

Setup Toolchain

# Install Rust (jika belum)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Tambah target wasm32
rustup target add wasm32-unknown-unknown

# Install wasm-pack (build tool untuk Rust→Wasm)
cargo install wasm-pack

Project Pertama

# Buat project baru
cargo new --lib wasm-hello
cd wasm-hello

// Cargo.toml
[package]
name = "wasm-hello"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

// src/lib.rs
use wasm_bindgen::prelude::*;

// Fungsi ini akan bisa dipanggil dari JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Halo, {}! Dari Rust+Wasm 🦀", name)
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

Build

# Build untuk browser (menghasilkan JS wrapper + .wasm)
wasm-pack build --target web

# Output di pkg/:
# ├── wasm_hello_bg.wasm    ← binary Wasm
# ├── wasm_hello.js          ← JS glue code
# ├── wasm_hello.d.ts        ← TypeScript types
# └── package.json           ← siap npm publish

Pakai di Browser

<script type="module">
  import init, { greet, fibonacci } from "./pkg/wasm_hello.js";

  async function main() {
    await init(); // Load dan initialize Wasm module

    console.log(greet("Developer"));
    // "Halo, Developer! Dari Rust+Wasm 🦀"

    console.log(fibonacci(40)); // hasilnya instan!
  }

  main();
</script>

Kenapa Rust untuk Wasm?

• No runtime — Tidak membawa garbage collector, output .wasm kecil
• Memory safety — Ownership system mencegah memory leak tanpa GC
• wasm-bindgen — Otomatis generate JS↔Rust bridge
• Ekosistem — web-sys, js-sys, serde-wasm-bindgen untuk interop lengkap