WebAssembly di Production

WebAssembly bukan teknologi eksperimental — perusahaan besar sudah memakainya di production untuk performa dan efisiensi yang tidak bisa dicapai JavaScript alone.

Real-World Case Studies

Figma — Design Tool

• Rendering engine ditulis di C++, compile ke Wasm
• 3x lebih cepat dari versi JavaScript sebelumnya
• Load time berkurang 3x setelah migrasi ke Wasm
• Handles complex designs dengan ribuan layers secara smooth

Google Earth — 3D Globe

• Port dari native app (C++) ke browser via Emscripten + Wasm
• Jutaan polygon di-render real-time di browser
• Tanpa Wasm, ini tidak mungkin di browser

AutoCAD — CAD Software

• 30 tahun codebase C++ di-compile ke Wasm
• Berjalan di browser tanpa install — pertama kali dalam sejarah AutoCAD

Shopify — Checkout Extensions

• Merchant code berjalan di Wasm sandbox
• Aman: merchant code tidak bisa akses data lain
• Cepat: sub-millisecond execution

Production Checklist

// 1. Streaming Compilation
// Browser bisa compile Wasm SAMBIL download
// Pastikan server kirim correct MIME type:
Content-Type: application/wasm

// 2. Caching
// .wasm files bisa di-cache agresif (content immutable)
Cache-Control: public, max-age=31536000, immutable

// 3. Compression
// Brotli compression sangat efektif untuk .wasm
Content-Encoding: br
// Brotli bisa mengurangi size 30-50%

// 4. Code Splitting
// Jangan load semua Wasm upfront
const heavyModule = await import("./heavy-wasm-wrapper.js");
// Load hanya saat dibutuhkan

Error Handling

// Wasm bisa trap (crash) — handle gracefully
try {
  const result = wasmModule.compute(input);
  return result;
} catch (error) {
  if (error instanceof WebAssembly.RuntimeError) {
    console.error("Wasm trap:", error.message);
    // Kemungkinan: out of bounds, stack overflow,
    // unreachable, integer overflow
  }
  // Fallback ke JavaScript implementation
  return jsCompute(input);
}

// Feature detection
if (typeof WebAssembly === "object") {
  // Load Wasm module
} else {
  // Fallback ke JS polyfill
}

Monitoring & Observability

// Track Wasm performance di production
const metrics = {
  loadTime: 0,
  compileTime: 0,
  executionTime: 0,
};

const t0 = performance.now();
const response = await fetch("module.wasm");
metrics.loadTime = performance.now() - t0;

const t1 = performance.now();
const { instance } = await WebAssembly.instantiateStreaming(response);
metrics.compileTime = performance.now() - t1;

const t2 = performance.now();
instance.exports.process(data);
metrics.executionTime = performance.now() - t2;

// Kirim ke analytics
analytics.track("wasm_performance", metrics);

Kapan Adopt Wasm di Project Kamu?

• Ya, jika: Ada bottleneck CPU-intensive yang terbukti dari profiling
• Ya, jika: Perlu port existing C/C++/Rust library ke browser
• Ya, jika: Butuh consistent, predictable performance (game, audio, video)
• Belum perlu, jika: Bottleneck ada di network/DOM, bukan compute
• Belum perlu, jika: JavaScript sudah cukup cepat untuk use case kamu
• Belum perlu, jika: Tim belum familiar Rust/C++ dan tidak ada waktu belajar

Masa Depan Wasm

• GC proposal — Wasm native GC, memungkinkan Kotlin, Java, Dart compile ke Wasm efisien
• Component Model — Cross-language interop tanpa glue code
• WASI Preview 2 — HTTP, sockets, filesystem standar
• Exception Handling — Try/catch native di Wasm
• Tail calls — Optimasi untuk functional languages