# Rust dan WebAssembly di 2026: Panduan Wasm, wasm-bindgen dan Pertanyaan Wawancara

> Tutorial Rust WebAssembly dengan wasm-pack dan wasm-bindgen. Pelajari cara membangun, mengoptimalkan, dan menguji modul Wasm dengan contoh praktis.

- Published: 2026-08-07
- Updated: 2026-08-07
- Author: SharpSkill
- Reading time: 5 min

---

Rust WebAssembly (Wasm) menghadirkan performa mendekati native ke aplikasi web dengan mengompilasi kode Rust menjadi format biner yang dapat berjalan di browser dan lingkungan server. Kombinasi jaminan keamanan memori Rust dengan eksekusi sandboxed WebAssembly menciptakan fondasi yang kuat untuk komponen web berkinerja tinggi, mulai dari pemrosesan gambar hingga operasi kriptografi.

> **Poin Penting**
>
> Rust dikompilasi ke WebAssembly melalui `wasm-pack` dan `wasm-bindgen`, menghasilkan modul yang dapat diimpor dan dipanggil langsung oleh JavaScript. Alur kerja melibatkan penulisan fungsi Rust, menambahkan anotasi `#[wasm_bindgen]`, mengompilasi ke `.wasm`, dan mengimpor kode glue JavaScript yang dihasilkan ke aplikasi web manapun.

## Menyiapkan Rust untuk Pengembangan WebAssembly

Toolchain Rust memerlukan target `wasm32-unknown-unknown` dan `wasm-pack` untuk membangun modul WebAssembly. Alat-alat ini menangani kompilasi, optimasi, dan pembuatan binding JavaScript secara otomatis.

```bash
# install-wasm-tools.sh
# Add the WebAssembly target to rustup
rustup target add wasm32-unknown-unknown

# Install wasm-pack for building and packaging
cargo install wasm-pack

# Verify installation
wasm-pack --version
```

Setelah instalasi, buat library crate baru yang dikonfigurasi untuk output WebAssembly. File `Cargo.toml` memerlukan pengaturan khusus untuk kompatibilitas Wasm.

```toml
# Cargo.toml
[package]
name = "wasm-calculator"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2.100"

[profile.release]
opt-level = "z"      # Optimize for size
lto = true           # Link-time optimization
```

Tipe crate `cdylib` menghasilkan library dinamis yang cocok untuk WebAssembly. Optimasi profil release secara signifikan mengurangi ukuran file `.wasm` akhir—sering kali hingga 50% atau lebih dibandingkan build yang tidak dioptimalkan.

## Memahami wasm-bindgen dan Interop JavaScript

Crate [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) menjembatani Rust dan JavaScript dengan menghasilkan binding type-safe secara otomatis. Fungsi yang dianotasi dengan `#[wasm_bindgen]` dapat dipanggil dari JavaScript, sementara fungsi JavaScript dapat diimpor ke Rust.

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

// Export this function to JavaScript
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    // Base cases for recursion
    match n {
        0 => 0,
        1 => 1,
        // Recursive calculation with tail-call optimization
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// Import console.log from JavaScript
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Export a function that uses console.log
#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Hello, {}!", name));
}
```

Blok `extern "C"` mendeklarasikan fungsi JavaScript yang dapat dipanggil oleh kode Rust. Atribut `js_namespace` menentukan objek JavaScript yang berisi fungsi tersebut. Binding dua arah ini memungkinkan integrasi yang mulus antara logika Rust dan API JavaScript.

## Membangun dan Membundel Modul WebAssembly

Perintah `wasm-pack build` mengompilasi Rust ke WebAssembly dan menghasilkan kode wrapper JavaScript. Target yang berbeda cocok untuk lingkungan JavaScript yang berbeda.

```bash
# build-wasm.sh
# Build for bundlers like webpack, Vite, or Rollup
wasm-pack build --target bundler --release

# Build for native ES modules (browser)
wasm-pack build --target web --release

# Build for Node.js
wasm-pack build --target nodejs --release
```

Setiap target menghasilkan output yang berbeda di direktori `pkg/`. Target bundler bekerja dengan bundler JavaScript modern yang mendukung ES modules dan impor WebAssembly. Target web menghasilkan kode yang dapat dimuat langsung di browser melalui `<script type="module">`.

```javascript
// main.js
// Import the generated WebAssembly module
import init, { fibonacci, greet } from './pkg/wasm_calculator.js';

async function run() {
    // Initialize the WebAssembly module
    await init();
    
    // Call exported Rust functions
    const result = fibonacci(20);
    console.log(`fibonacci(20) = ${result}`);
    
    greet('WebAssembly');
}

run();
```

Fungsi `init()` mengambil dan mengompilasi file `.wasm` secara asinkron. Setelah inisialisasi, fungsi yang diekspor berperilaku seperti fungsi JavaScript biasa, dengan wasm-bindgen menangani konversi tipe secara otomatis.

## Bekerja dengan Tipe Kompleks dan Memori

WebAssembly beroperasi pada memori linear—blok byte yang berurutan. Melewatkan tipe kompleks antara Rust dan JavaScript memerlukan serialisasi atau manipulasi memori langsung. Crate `wasm-bindgen` menangani sebagian besar tipe umum secara otomatis.

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

// Enable serde support for wasm-bindgen
#[derive(Serialize, Deserialize)]
pub struct Point {
    pub x: f64,
    pub y: f64,
}

// Accept and return JavaScript objects
#[wasm_bindgen]
pub fn distance(a: JsValue, b: JsValue) -> Result<f64, JsValue> {
    // Deserialize JavaScript objects to Rust structs
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    // Calculate Euclidean distance
    let dx = point_b.x - point_a.x;
    let dy = point_b.y - point_a.y;
    
    Ok((dx * dx + dy * dy).sqrt())
}

// Return a Rust struct as a JavaScript object
#[wasm_bindgen]
pub fn midpoint(a: JsValue, b: JsValue) -> Result<JsValue, JsValue> {
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    let mid = Point {
        x: (point_a.x + point_b.x) / 2.0,
        y: (point_a.y + point_b.y) / 2.0,
    };
    
    // Serialize Rust struct to JavaScript object
    Ok(serde_wasm_bindgen::to_value(&mid)?)
}
```

Crate `serde-wasm-bindgen` (tambahkan ke `Cargo.toml`: `serde-wasm-bindgen = "0.6"` dan `serde = { version = "1.0", features = ["derive"] }`) mengonversi antara objek JavaScript dan tipe Rust secara efisien. Untuk kode yang kritis terhadap performa, akses memori langsung melalui crate `js_sys` dan `web_sys` menghindari overhead serialisasi.

## Mengoptimalkan Performa dan Ukuran WebAssembly

Modul WebAssembly mendapat manfaat dari beberapa teknik optimasi. Pengurangan ukuran meningkatkan waktu loading, sementara optimasi algoritmik meningkatkan performa runtime. Alat [wasm-opt](https://github.com/WebAssembly/binaryen) dari Binaryen menyediakan optimasi tambahan pasca-kompilasi.

```bash
# optimize-wasm.sh
# Install binaryen for wasm-opt
# On macOS: brew install binaryen
# On Ubuntu: apt install binaryen

# Apply aggressive size optimizations
wasm-opt -Oz -o pkg/wasm_calculator_opt.wasm pkg/wasm_calculator_bg.wasm

# Apply speed optimizations instead
wasm-opt -O3 -o pkg/wasm_calculator_fast.wasm pkg/wasm_calculator_bg.wasm
```

Pengaturan Cargo.toml tambahan lebih lanjut mengurangi ukuran output:

```toml
# Cargo.toml - additional optimizations
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true
```

Pengaturan ini menghasilkan output sekecil mungkin dengan mengaktifkan optimasi link-time, mengurangi pembuatan kode paralel, dan menghapus simbol debug. Modul Wasm sederhana dapat menyusut dari 100KB menjadi di bawah 20KB dengan optimasi yang tepat.

## Kasus Penggunaan Praktis: Pemrosesan Gambar di Browser

WebAssembly unggul dalam tugas-tugas yang intensif secara komputasional seperti pemrosesan gambar. Contoh berikut menerapkan filter grayscale ke data gambar, mendemonstrasikan akses memori langsung untuk performa maksimum.

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

#[wasm_bindgen]
pub fn grayscale(data: Clamped<Vec<u8>>, width: u32, height: u32) -> Clamped<Vec<u8>> {
    let mut pixels = data.0;
    let len = (width * height * 4) as usize;
    
    // Process each pixel (RGBA format)
    for i in (0..len).step_by(4) {
        // Calculate luminance using standard coefficients
        let r = pixels[i] as f32;
        let g = pixels[i + 1] as f32;
        let b = pixels[i + 2] as f32;
        
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        // Set RGB channels to grayscale value
        pixels[i] = gray;     // R
        pixels[i + 1] = gray; // G
        pixels[i + 2] = gray; // B
        // Alpha channel (i + 3) remains unchanged
    }
    
    Clamped(pixels)
}
```

Sisi JavaScript mengekstrak data piksel dari canvas, melewatkannya ke Wasm, dan merender hasilnya:

```javascript
// image-processor.js
import init, { grayscale } from './pkg/image_processor.js';

async function applyGrayscale(canvas) {
    await init();
    
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // Pass pixel data to WebAssembly
    const result = grayscale(imageData.data, canvas.width, canvas.height);
    
    // Create new ImageData with processed pixels
    const processed = new ImageData(result, canvas.width, canvas.height);
    ctx.putImageData(processed, 0, 0);
}
```

Pendekatan ini memproses jutaan piksel per detik—secara signifikan lebih cepat daripada kode JavaScript yang setara. Benchmark pada laptop biasa menunjukkan peningkatan kecepatan 3-5x untuk operasi gambar.

## Pertanyaan Wawancara: Konsep Rust WebAssembly

Memahami konsep Rust WebAssembly menunjukkan pengetahuan pemrograman sistem. Pertanyaan-pertanyaan ini sering muncul dalam wawancara untuk peran pengembangan web yang berfokus pada performa.

**T: Apa hubungan antara wasm-bindgen dan interoperabilitas JavaScript?**

wasm-bindgen menghasilkan kode glue JavaScript yang menangani konversi tipe antara Rust dan JavaScript. Ia membuat wrapper JavaScript untuk setiap fungsi Rust yang diekspor, mengelola alokasi memori, encoding string, dan serialisasi tipe kompleks. Tanpa wasm-bindgen, pengembang perlu menangani memori linear WebAssembly secara manual dan mengimplementasikan protokol serialisasi mereka sendiri.

**T: Mengapa WebAssembly menggunakan memori linear, dan apa implikasinya?**

Memori linear WebAssembly adalah array byte yang berurutan dan dapat diubah ukurannya yang dapat diakses oleh kode JavaScript dan Wasm. Desain ini menyediakan keamanan memori melalui pemeriksaan batas dan sandboxing. Implikasinya adalah melewatkan struktur data kompleks memerlukan penyalinan data ke memori linear atau menggunakan referensi dengan manajemen lifetime yang hati-hati. Model kepemilikan Rust selaras dengan batasan ini, karena mencegah dangling pointer dan data race pada waktu kompilasi.

**T: Bagaimana mode `no_std` Rust menguntungkan pengembangan WebAssembly?**

Atribut `#![no_std]` mengecualikan library standar Rust, menghasilkan biner Wasm yang lebih kecil. Tanpa std, pengembang menggunakan crate `core` dan `alloc` untuk fungsionalitas dasar. Pendekatan ini mengurangi ukuran bundle secara dramatis—dari ~100KB menjadi ~10KB untuk modul sederhana. Trade-off-nya adalah kehilangan kemudahan seperti `String`, `Vec`, dan I/O standar, meskipun `alloc` menyediakan tipe yang dialokasikan di heap saat diperlukan.

Untuk eksplorasi lebih dalam tentang pola async Rust yang melengkapi pengembangan WebAssembly, lihat [pertanyaan modul async/await](/technologies/rust/interview-questions/async-await).

## Debugging dan Testing Modul WebAssembly

Testing yang efektif memerlukan baik unit test sisi Rust maupun integration test browser. Perintah `wasm-pack test` menjalankan test di lingkungan browser headless.

```rust
// src/lib.rs
#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    // Configure tests to run in browser
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_fibonacci() {
        assert_eq!(fibonacci(0), 0);
        assert_eq!(fibonacci(1), 1);
        assert_eq!(fibonacci(10), 55);
    }
    
    #[wasm_bindgen_test]
    fn test_greet() {
        // This test verifies greet doesn't panic
        greet("Test User");
    }
}
```

Jalankan test browser dengan Chrome atau Firefox:

```bash
# test-wasm.sh
# Run tests in headless Chrome
wasm-pack test --headless --chrome

# Run tests in headless Firefox
wasm-pack test --headless --firefox
```

Untuk debugging, aktifkan source maps dan output konsol. Crate `console_error_panic_hook` menyediakan pesan panic yang bermakna di konsol browser:

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

#[wasm_bindgen(start)]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}
```

Tambahkan ke `Cargo.toml`: `console_error_panic_hook = "0.1"`. Setup ini menampilkan pesan panic Rust di developer tools browser alih-alih error WebAssembly yang sulit dipahami.

## Kesimpulan

- Rust dikompilasi ke WebAssembly melalui `wasm-pack`, menghasilkan modul yang dapat dipanggil dari JavaScript dengan konversi tipe otomatis
- Atribut `#[wasm_bindgen]` menandai fungsi untuk ekspor; blok `extern "C"` mengimpor fungsi JavaScript ke Rust
- Optimasi ukuran (`opt-level = "z"`, `lto = true`, `wasm-opt -Oz`) mengurangi ukuran bundle sebesar 50-80%
- Tipe kompleks melewati `serde-wasm-bindgen` untuk serialisasi seperti JSON atau akses memori langsung untuk performa maksimum
- Pemrosesan gambar, kriptografi, dan algoritma berat komputasi mengalami peningkatan kecepatan 3-5x dibandingkan implementasi JavaScript
- Testing browser dengan `wasm-pack test --headless` memvalidasi baik logika Rust maupun integrasi JavaScript

Untuk topik Rust terkait, jelajahi [pertanyaan wawancara Cargo & Ecosystem](/technologies/rust/interview-questions/cargo-ecosystem) dan [panduan persiapan wawancara Rust](/blog/rust/rust-interview-questions) lengkap.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/blog/rust/rust-webassembly-wasm-bindgen-tutorial