WASM di Browser: Cara Kerja WebAssembly dan Kenapa Figma/Google Earth Jalan Secepat Native App

WASM di Browser: Cara Kerja WebAssembly dan Kenapa Figma/Google Earth Jalan Secepat Native App

Ketika Figma membuka file 500MB di browser dalam hitungan detik, atau Google Earth merender benua dengan mulus, itu bukan JavaScript biasa. Di baliknya ada teknologi bernama WebAssembly (WASM).

Apa Itu WebAssembly?

WebAssembly adalah format bytecode ringan yang bisa dieksekusi langsung oleh browser. Beda dengan JavaScript yang di-parse dan di-compile saat runtime (just-in-time), WASM sudah dalam bentuk biner yang hampir siap eksekusi. Hasilnya: kecepatan mendekati kode native (C/C++/Rust yang dikompilasi), jauh di atas JavaScript untuk komputasi berat.

Cara Kerja: Dari Kode ke Layar

1. Kompilasi: Kode C++/Rust/Go dikompilasi ke file .wasm (biasanya lewat LLVM toolchain, contoh: emcc untuk Emscripten, wasm-pack untuk Rust).
2. Loading: Browser mengunduh file .wasm, biasanya <2MB, dan mengompilasi ulang ke mesin virtual (baseline compiler → tier-up ke optimizing compiler).
3. Eksesi: Kode berjalan di WebAssembly Stack Machine. Memori WASM terisolasi: satu ArrayBuffer yang dikelola sendiri.
4. Jembatan JS-WASM: JavaScript memanggil fungsi WASM lewat imports/exports. Marshaling data lewat shared memory, minim overhead.
5. Rendering: WASM tidak punya akses DOM. Hasilnya ditaruh di Canvas, WebGL, atau dikirim balik ke JS untuk ditampilkan.

Kenapa Cepat? Tabel Perbandingan

Aspek	JavaScript	WebAssembly
Format	Source/bytecode	Biner pre-compiled
Optimasi	JIT (runtime)	AOT + tier-up
Memory	GC otomatis	Linear memory manual
Floating point	Baik	Sangat baik (IEEE-754 presisi)
Kinerja render loop	30-60 ms/frame	1-3 ms/frame

Kasus Nyata di Produksi

• Figma: Engine rendering C++ dikompilasi ke WASM. Sebelumnya plugin berat memperlambat, sekarang interaksi sekelas desktop app.
• Google Earth: Rendering terrain 3D dengan WebGL + WASM.
• Autodesk AutoCAD: Versi web berjalan dengan kode asli dikompilasi ke WASM.
• FFmpeg (ffmpeg.wasm): Transkripsi video di browser tanpa upload.
• SQLite (sql.js): Query database SQL langsung di client.

Coba Sendiri dalam 10 Menit

// main.rs - pakai wasm-pack
use wasm_bindgen::prelude::*;

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

// JavaScript side
const wasm = await import('./pkg/my_wasm.js');
await wasm.default(); // init

console.log(wasm.fibonacci(40)); // ~100x lebih cepat dari JS recursion

Build dengan: wasm-pack build --target web

Kapan WASM BUKAN Jawabannya?

• DOM manipulation berat – tetap pakai JS, WASM tidak punya akses DOM.
• Aplikasi CRUD sederhana – JS sudah cukup, WASM overkill.
• Binary size ketat – WASM 600KB vs JS bundle 150KB, hitung ulang budget lo.

Masa Depan: WASI & Component Model

WASI (WebAssembly System Interface) membuat WASM tidak lagi tergantung browser: bisa jalan di server, edge (Cloudflare Workers), dan bahkan OS micro. Component Model sedang di-develop agar modul WASM bisa saling terhubung lintas bahasa. Tahun depan, WASM bisa jadi cara standar deploy backend tanpa container.

Kesimpulan

WASM bukan pengganti JavaScript, melainkan rekan kerjanya: JS untuk UI dan logika aplikasi, WASM untuk komputasi berat. Jika aplikasi lo mulai jalan lambat saat data besar atau rendering loop, coba porting bagian kritis ke Rust/C++ lalu compile ke WASM. Hasilnya bisa 10-100x lebih cepat tanpa mengganti framework.

Tags: WebAssembly, WASM, Performance, Frontend