1~
2WebAssembly (WASM) dimulai sebagai cara untuk menjalankan C++ di browser. Pada 2026, WASM berjalan di mana-mana  -  browser, server, jaringan edge, perangkat tertanam  -  dan menggerakkan beberapa aplikasi paling menuntut di web. Mesin rendering Figma, Adobe Photoshop di web, pemrosesan video Google Meet, dan platform edge compute Cloudflare semuanya berjalan di WebAssembly.
3~
4Chrome Platform Status menempatkan WASM pada sekitar 5,5% dari semua pemuatan halaman Chrome per awal 2026, naik dari 4,5% tahun sebelumnya. Dengan WASM 3.0 menjadi standar W3C dan WASI yang matang menuju 1.0, ekosistem telah mencapai titik balik.
5~
6Panduan ini mencakup semua yang perlu Anda ketahui untuk mulai membangun dengan WebAssembly.
7~
8## Apa itu WebAssembly?
9~
10WebAssembly adalah format instruksi biner yang dirancang sebagai target kompilasi. Anda menulis kode dalam bahasa tingkat tinggi (Rust, C, C++, Go, Kotlin), mengompilasinya ke `.wasm`, dan menjalankannya di lingkungan apa pun yang memiliki WASM runtime  -  browser, Node.js, Cloudflare Workers, Wasmtime, atau Wasmer.
11~
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21~
22### Cara Kerjanya
23~
24WASM adalah **mesin virtual berbasis stack**. Fungsi mendorong dan mengambil nilai pada operand stack. Host runtime (V8 di Chrome, SpiderMonkey di Firefox) mengompilasi JIT bytecode WASM ke kode mesin native, itulah mengapa performanya mendekati native.
25~
26Karakteristik utama:
27~
28- **Eksekusi sandboxed**: Modul WASM hanya dapat mengakses sumber daya yang secara eksplisit diberikan host. Tidak ada filesystem, tidak ada jaringan, tidak ada akses OS kecuali diizinkan. Ini secara fundamental berbeda dari kode native.
29- **Memori linear**: satu `ArrayBuffer` kontigu yang dibagi antara WASM dan host. Data kompleks (string, struct) diteruskan dengan menulis ke memori dan berbagi pointer.
30- **Terbatas tipe**: WASM secara native hanya mendukung empat tipe: `i32`, `i64`, `f32`, `f64`. Segala sesuatu yang lain (string, array, objek) memerlukan pengkodean melalui memori linear atau Component Model.
31- **Portabel**: biner `.wasm` yang sama berjalan di platform apa pun dengan WASM runtime, tanpa kompilasi ulang.
32~
33### WASM vs JavaScript
34~
35WASM tidak menggantikan JavaScript. Ia melengkapinya.
36~
37| Aspek | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parse + compile saat runtime | Biner pra-kompilasi, hanya decode |
40| **Kecepatan eksekusi** | Dioptimalkan JIT, bervariasi | Mendekati native, konsisten |
41| **Startup** | Cepat untuk skrip kecil | Decode cepat, dapat diprediksi |
42| **Akses DOM** | Langsung | Tidak langsung (melalui JS glue) |
43| **Terbaik untuk** | UI, manipulasi DOM, penanganan event | Komputasi intensif CPU |
44| **Garbage collection** | Bawaan | WasmGC (baru), atau manual |
45~
46Gunakan JavaScript untuk pekerjaan UI dan DOM. Gunakan WASM untuk komputasi berat: pemrosesan gambar, enkoding video, simulasi fisika, kriptografi, parsing data.
47~
48## WASM 3.0: Apa yang Baru
49~
50WebAssembly 3.0 menjadi standar W3C pada September 2025, menstandarisasi sembilan fitur yang telah dalam pengembangan selama bertahun-tahun.
51~
52| Fitur | Apa yang Dimungkinkan |
53|---------|----------------|
54| **WasmGC** | Garbage collection native di WASM. Bahasa terkelola (Java, Kotlin, Dart) dapat dikompilasi ke WASM tanpa mengirimkan runtime GC mereka sendiri. Didukung di Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | `try`/`catch` native di WASM. Sebelumnya, pengecualian memerlukan roundtrip mahal ke JavaScript. |
56| **Tail Calls** | Memungkinkan rekursi efisien tanpa stack overflow. Kritis untuk bahasa fungsional. |
57| **Relaxed SIMD** | Instruksi vektor 128-bit untuk pemrosesan data paralel. Memungkinkan optimasi spesifik hardware. |
58| **Memory64** | Memecah batas memori linear 4GB. Diperlukan untuk pemrosesan data skala besar. |
59| **Multi-memory** | Beberapa wilayah memori independen dalam satu modul. |
60~
61Yang paling berdampak adalah **WasmGC**. Sebelumnya, mengompilasi Java atau Kotlin ke WASM berarti mengirimkan garbage collector lengkap sebagai bagian dari biner, membengkakkan ukuran file. Sekarang GC milik browser sendiri menangani manajemen memori untuk modul WASM, seperti yang dilakukannya untuk JavaScript.
62~
63## WASI: WebAssembly di Luar Browser
64~
65WASM di browser kuat, tetapi **WASI (WebAssembly System Interface)** adalah yang membuat WASM menjadi runtime universal. WASI menyediakan antarmuka standar untuk sumber daya sistem  -  file, jaringan, clock, angka acak  -  memungkinkan modul WASM berjalan di luar browser.
66~
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72~
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82~
83WASI Preview 2 (rilis stabil saat ini) mendefinisikan antarmuka berikut:
84~
85- `wasi:filesystem`  -  operasi file melalui capability handle (bukan file descriptor tradisional)
86- `wasi:sockets`  -  jaringan TCP/UDP
87- `wasi:http`  -  penanganan request/response HTTP
88- `wasi:clocks`  -  wall clock, monotonic clock
89- `wasi:random`  -  keacakan kriptografis
90- `wasi:cli`  -  argumen command-line, variabel lingkungan, stdio
91~
92Prinsip utamanya adalah **keamanan berbasis kapabilitas**: modul WASM tidak dapat mengakses filesystem kecuali host secara eksplisit memberikan handle ke direktori tertentu. Ini membuat WASI secara fundamental lebih aman daripada menjalankan executable native.
93~
94### Jalan Menuju WASI 1.0
95~
96WASI 0.3.0 (menambahkan primitif async/concurrency) diharapkan pada 2026, dengan WASI 1.0 menyusul. Tambahan utamanya adalah async yang terintegrasi dengan bahasa dengan streaming I/O zero-copy.
97~
98## Component Model
99~
100Modul WASM inti hanya dapat bertukar angka. **Component Model** mengatasi keterbatasan ini dengan menambahkan sistem tipe yang kaya dan lapisan composability di atas WASM.
101~
102### WIT (WebAssembly Interface Types)
103~
104WIT adalah Interface Definition Language yang memungkinkan komponen mendeklarasikan impor dan ekspor mereka dengan tipe yang kaya  -  string, record, list, variant, enum  -  tidak hanya `i32` dan `f64`.
105~
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109~
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116~
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121~
122world calculator {
123    export operations;
124}
125```
126~
127Toolchain seperti `wit-bindgen` menghasilkan binding spesifik bahasa dari file WIT. Komponen Rust dan komponen Python dapat bertukar string, record, dan list melalui kontrak WIT tanpa salah satu sisi mengetahui bahasa implementasi sisi lainnya.
128~
129## Membangun Modul WASM Pertama Anda dengan Rust
130~
131Rust memiliki tooling WASM paling matang. Mari kita bangun contoh praktis: modul pemrosesan gambar yang berjalan di browser.
132~
133### Pengaturan
134~
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138~
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141~
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146~
147### Konfigurasi Cargo.toml
148~
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154~
155[lib]
156crate-type = ["cdylib"]
157~
158[dependencies]
159wasm-bindgen = "0.2"
160```
161~
162### Tulis Kode Rust
163~
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167~
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185~
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196~
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206~
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221~
222### Build
223~
224```bash
225wasm-pack build --target web
226```
227~
228Ini menghasilkan direktori `pkg/` dengan:
229- `image_processor_bg.wasm`  -  biner WASM yang telah dikompilasi
230- `image_processor.js`  -  kode glue JavaScript dengan definisi TypeScript
231- `package.json`  -  siap dipublikasikan ke npm
232~
233### Gunakan di JavaScript
234~
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244~
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247~
248    let ctx;
249    let imageData;
250~
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255~
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264~
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269~
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274~
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279~
280    setup();
281  </script>
282</body>
283</html>
284```
285~
286Wawasan kuncinya: `imageData.data` adalah `Uint8ClampedArray` yang didukung oleh `ArrayBuffer`. Ketika diteruskan ke WASM, ia berbagi memori yang sama  -  tanpa penyalinan. Fungsi Rust memodifikasi piksel di tempat, dan sisi JavaScript melihat perubahannya segera.
287~
288## Level Lebih Rendah: Instansiasi WASM Manual
289~
290Jika Anda tidak ingin menggunakan `wasm-bindgen`, Anda dapat membuat instance modul WASM secara langsung:
291~
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300~
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306~
307Ini berguna ketika Anda menginginkan overhead minimal dan tidak memerlukan interop tipe yang kaya.
308~
309## Performa: WASM vs JavaScript
310~
311Benchmark dunia nyata menunjukkan percepatan signifikan untuk tugas-tugas intensif CPU:
312~
313| Tugas | JavaScript | WASM | Percepatan |
314|------|-----------|------|---------|
315| Pemrosesan gambar 4K | 180ms | 8ms (dengan SIMD) | 22x |
316| Resize gambar (4K) | 250ms | 45ms | 5,5x |
317| Simulasi fisika (10K entitas) | Kehilangan frame | 60fps mulus | ~10x |
318| Parsing JSON (payload besar) | 12ms | 3ms | 4x |
319| Hashing kriptografis | 45ms | 6ms | 7,5x |
320~
321WASM berjalan pada sekitar 95% dari kecepatan kode native. Peningkatan terbesar datang dari:
322- Performa yang dapat diprediksi (tanpa pemanasan JIT, tanpa jeda GC)
323- Instruksi SIMD untuk pemrosesan data paralel
324- Akses memori langsung tanpa campur tangan garbage collector
325~
326Di mana WASM TIDAK lebih cepat: manipulasi DOM, komputasi kecil, tugas terikat I/O. JavaScript sudah dioptimalkan untuk ini.
327~
328## Kasus Penggunaan Produksi
329~
330### Figma: Rendering Vektor Real-Time
331~
332Mesin rendering inti Figma adalah C++ yang dikompilasi ke WASM. Setiap bentuk, gradien, dan efek dihitung di WASM dan digambar ke elemen Canvas. Ini memungkinkan Figma menangani desain kompleks dengan ribuan lapisan pada 60fps di browser  -  performa yang tidak mungkin dicapai dalam JavaScript murni.
333~
334### Adobe Photoshop di Web
335~
336Adobe memindahkan filter dan alat Photoshop utama ke WASM menggunakan Rust. Benchmark mereka menunjukkan pemrosesan gambar 4K dalam 22ms dengan WASM SIMD vs 180ms di JavaScript  -  peningkatan 8x yang memungkinkan preview filter real-time.
337~
338### Cloudflare Workers
339~
340Cloudflare menjalankan modul WASM dalam V8 isolates di 330+ lokasi edge. Cold start adalah 1-5ms (dibandingkan dengan 100-500ms untuk serverless berbasis container). Pada Februari 2026, mereka menerapkan inferensi Llama-3-8b di seluruh jaringan edge mereka menggunakan WASM.
341~
342### Google Meet
343~
344Background blur dan latar belakang virtual di Google Meet menggunakan WASM dengan SIMD untuk pemrosesan video real-time. Modul WASM memproses setiap frame video cukup cepat untuk mempertahankan video yang mulus pada 30fps.
345~
346## Dukungan Browser (2026)
347~
348| Fitur | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Penuh | Penuh | Penuh | Penuh |
351| Threads | Ya | Ya | Ya | Ya |
352| SIMD (128-bit) | Ya | Ya | Ya | Ya |
353| WasmGC | 119+ | 120+ | 18.2+ | Ya |
354| Exception Handling | Ya | Ya | Ya | Ya |
355| Memory64 | Ya | Ya | Sebagian | Ya |
356~
357Semua browser utama mendukung WASM sepenuhnya. Fitur-fitur yang lebih baru (WasmGC, Exception Handling) telah mencapai ketersediaan luas.
358~
359## Referensi Tooling
360~
361| Tool | Tujuan | Instalasi |
362|------|---------|---------|
363| **wasm-pack** | Build Rust ke WASM, menghasilkan paket npm | `cargo install wasm-pack` |
364| **wasm-bindgen** | Binding interop Rust/JS (digunakan oleh wasm-pack) | Dependency di Cargo.toml |
365| **wasm-opt** | Optimasi ukuran biner (pengurangan 50%+) | Bagian dari Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Menghasilkan binding dari file WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | WASM runtime sisi server (implementasi referensi WASI) | `brew install wasmtime` |
368| **Wasmer** | WASM runtime alternatif dengan dukungan WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Deteksi fitur browser saat runtime | `npm install wasm-feature-detect` |
370~
371### Mengoptimalkan Ukuran Biner
372~
373Biner WASM bisa besar. Berikut cara mengecilkannya:
374~
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383~
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387~
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391~
392Modul WASM Rust tipikal turun dari 500KB menjadi di bawah 50KB dengan optimasi ini.
393~
394## Roadmap Memulai
395~
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401~
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405~
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409~
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413~
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418~
419## Kesimpulan
420~
421WebAssembly tidak lagi eksperimental. Ini adalah teknologi produksi yang digunakan oleh beberapa aplikasi paling menuntut di web. Performa mendekati native, keamanan sandboxed, dan portabilitas universal  -  tidak ada target kompilasi lain yang memberi Anda ketiganya.
422~
423Anda tidak perlu menulis ulang seluruh aplikasi Anda dalam WASM. Mulailah dengan satu fungsi intensif CPU  -  filter gambar, parser data, perhitungan fisika  -  kompilasi ke WASM, dan panggil dari JavaScript. Ukur perbedaannya. Kemudian putuskan di mana lagi WASM dapat membantu.
424~
425Tooling sudah matang, dukungan browser universal, dan ekosistem berkembang. Jika Anda menulis Rust, Anda sudah satu perintah jauhnya dari browser.
426~
427> **Checklist Memulai:**
428>
429> - [x] Rust dan wasm-pack terinstal
430> - [x] Modul WASM pertama dibangun dan berjalan di browser
431> - [x] Interop JavaScript berfungsi (memanggil WASM dari JS)
432> - [x] Release build dengan optimasi ukuran diterapkan
433> - [x] Performa dibandingkan dengan padanan JavaScript murni
434> - [x] WASI dieksplorasi dengan Wasmtime untuk kasus penggunaan sisi server
435~