1 
2WebAssembly (WASM) bermula sebagai cara untuk menjalankan C++ dalam pelayar. Pada 2026, ia berjalan di mana-mana  -  pelayar, pelayan, rangkaian edge, peranti terbenam  -  dan menggerakkan beberapa aplikasi paling mencabar di web. Enjin rendering Figma, Adobe Photoshop di web, pemprosesan video Google Meet, dan platform edge compute Cloudflare semuanya berjalan pada WebAssembly.
3 
4Chrome Platform Status meletakkan WASM pada kira-kira 5.5% daripada semua pemuatan halaman Chrome pada awal 2026, meningkat daripada 4.5% tahun sebelumnya. Dengan WASM 3.0 menjadi standard W3C dan WASI matang menuju 1.0, ekosistem telah mencapai titik perubahan.
5 
6Panduan ini merangkumi segala yang anda perlu tahu untuk mula membina dengan WebAssembly.
7 
8## Apa itu WebAssembly?
9 
10WebAssembly ialah format arahan binari yang direka sebagai sasaran kompilasi. Anda menulis kod dalam bahasa peringkat tinggi (Rust, C, C++, Go, Kotlin), mengompilkannya ke `.wasm`, dan menjalankannya dalam sebarang persekitaran yang mempunyai WASM runtime  -  pelayar, 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 Ia Berfungsi
23 
24WASM ialah **mesin maya berasaskan stack**. Fungsi menolak dan memuncakkan nilai pada operand stack. Host runtime (V8 dalam Chrome, SpiderMonkey dalam Firefox) mengkompil-JIT bytecode WASM ke kod mesin asli, itulah sebabnya prestasi hampir setara dengan native.
25 
26Ciri-ciri utama:
27 
28- **Pelaksanaan sandboxed**: Modul WASM hanya boleh mengakses sumber yang diberikan secara eksplisit oleh host. Tiada filesystem, tiada rangkaian, tiada akses OS melainkan dibenarkan. Ini berbeza secara asas daripada kod native.
29- **Memori linear**: satu `ArrayBuffer` bersambung yang dikongsi antara WASM dan host. Data kompleks (string, struct) dipindahkan dengan menulis ke memori dan berkongsi pointer.
30- **Terhad jenis**: WASM menyokong secara native hanya empat jenis: `i32`, `i64`, `f32`, `f64`. Segala-galanya yang lain (string, array, objek) memerlukan pengekodan melalui memori linear atau Component Model.
31- **Mudah alih**: binari `.wasm` yang sama berjalan pada mana-mana platform dengan WASM runtime, tanpa kompilasi semula.
32 
33### WASM vs JavaScript
34 
35WASM tidak menggantikan JavaScript. Ia melengkapinya.
36 
37| Aspek | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parse + compile pada runtime | Binari pra-kompil, hanya decode |
40| **Kelajuan pelaksanaan** | Dioptimumkan JIT, berubah-ubah | Hampir native, konsisten |
41| **Startup** | Pantas untuk skrip kecil | Decode pantas, boleh diramal |
42| **Akses DOM** | Langsung | Tidak langsung (melalui JS glue) |
43| **Terbaik untuk** | UI, manipulasi DOM, pengendalian event | Pengkomputeran intensif CPU |
44| **Garbage collection** | Terbina dalam | WasmGC (baru), atau manual |
45 
46Gunakan JavaScript untuk kerja UI dan DOM. Gunakan WASM untuk pengkomputeran berat: pemprosesan imej, pengekodan video, simulasi fizik, kriptografi, parsing data.
47 
48## WASM 3.0: Apa yang Baru
49 
50WebAssembly 3.0 menjadi standard W3C pada September 2025, menstandardkan sembilan ciri yang telah dalam pembangunan selama bertahun-tahun.
51 
52| Ciri | Apa yang Diaktifkan |
53|---------|----------------|
54| **WasmGC** | Garbage collection native dalam WASM. Bahasa terurus (Java, Kotlin, Dart) boleh dikompil ke WASM tanpa menghantar runtime GC mereka sendiri. Disokong dalam Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | `try`/`catch` native dalam WASM. Sebelum ini, pengecualian memerlukan roundtrip mahal ke JavaScript. |
56| **Tail Calls** | Mendayakan rekursi yang cekap tanpa stack overflow. Kritikal untuk bahasa fungsian. |
57| **Relaxed SIMD** | Arahan vektor 128-bit untuk pemprosesan data selari. Mendayakan pengoptimuman khusus hardware. |
58| **Memory64** | Memecahkan had memori linear 4GB. Diperlukan untuk pemprosesan data berskala besar. |
59| **Multi-memory** | Pelbagai kawasan memori bebas dalam satu modul. |
60 
61Yang paling berkesan ialah **WasmGC**. Sebelum ia, mengompil Java atau Kotlin ke WASM bermakna menghantar keseluruhan garbage collector sebagai sebahagian daripada binari, membengkakkan saiz fail. Kini GC pelayar sendiri mengendalikan pengurusan memori untuk modul WASM, sama seperti yang dilakukannya untuk JavaScript.
62 
63## WASI: WebAssembly Melangkaui Pelayar
64 
65WASM dalam pelayar adalah berkuasa, tetapi **WASI (WebAssembly System Interface)** adalah yang menjadikan WASM sebagai runtime universal. WASI menyediakan antara muka standard untuk sumber sistem  -  fail, rangkaian, jam, nombor rawak  -  membenarkan modul WASM berjalan di luar pelayar.
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 (keluaran stabil semasa) mentakrifkan antara muka berikut:
84 
85- `wasi:filesystem`  -  operasi fail melalui capability handles (bukan file descriptor tradisional)
86- `wasi:sockets`  -  rangkaian TCP/UDP
87- `wasi:http`  -  pengendalian request/response HTTP
88- `wasi:clocks`  -  wall clock, monotonic clock
89- `wasi:random`  -  kerawakan kriptografi
90- `wasi:cli`  -  argumen baris arahan, pembolehubah persekitaran, stdio
91 
92Prinsip utama ialah **keselamatan berasaskan kapabiliti**: modul WASM tidak boleh mengakses filesystem melainkan host secara eksplisit memberikan handle ke direktori tertentu. Ini menjadikan WASI secara asas lebih selamat daripada menjalankan executable native.
93 
94### Laluan ke WASI 1.0
95 
96WASI 0.3.0 (menambah primitif async/concurrency) dijangka pada 2026, dengan WASI 1.0 akan menyusul. Tambahan utama ialah async bersepadu bahasa dengan streaming I/O zero-copy.
97 
98## Component Model
99 
100Modul WASM teras hanya boleh menukar nombor. **Component Model** menyelesaikan had ini dengan menambah sistem jenis yang kaya dan lapisan composability di atas WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT ialah Interface Definition Language yang membolehkan komponen mengisytiharkan import dan eksport mereka dengan jenis yang kaya  -  string, record, list, variant, enum  -  bukan 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 khusus bahasa daripada fail WIT. Komponen Rust dan komponen Python boleh menukar string, record, dan list melalui kontrak WIT tanpa mana-mana pihak mengetahui bahasa pelaksanaan pihak lain.
128 
129## Membina Modul WASM Pertama Anda dengan Rust
130 
131Rust mempunyai tooling WASM paling matang. Mari kita bina contoh praktikal: modul pemprosesan imej yang berjalan dalam pelayar.
132 
133### Persediaan
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### Konfigurasikan 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 Kod 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### Bina
223 
224```bash
225wasm-pack build --target web
226```
227 
228Ini menghasilkan direktori `pkg/` dengan:
229- `image_processor_bg.wasm`  -  binari WASM yang telah dikompil
230- `image_processor.js`  -  kod glue JavaScript dengan definisi TypeScript
231- `package.json`  -  sedia untuk diterbitkan ke npm
232 
233### Gunakan dalam 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 
286Pandangan utama: `imageData.data` ialah `Uint8ClampedArray` yang disokong oleh `ArrayBuffer`. Apabila dihantar ke WASM, ia berkongsi memori yang sama  -  tiada penyalinan. Fungsi Rust mengubah suai piksel di tempat, dan pihak JavaScript melihat perubahan serta-merta.
287 
288## Tahap Lebih Rendah: Instansiasi WASM Manual
289 
290Jika anda tidak mahu menggunakan `wasm-bindgen`, anda boleh meng-instansiasikan 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 apabila anda mahukan overhead minimum dan tidak memerlukan interop jenis yang kaya.
308 
309## Prestasi: WASM vs JavaScript
310 
311Benchmark dunia nyata menunjukkan peningkatan kelajuan yang ketara untuk tugas intensif CPU:
312 
313| Tugas | JavaScript | WASM | Peningkatan Kelajuan |
314|------|-----------|------|---------|
315| Pemprosesan imej 4K | 180ms | 8ms (dengan SIMD) | 22x |
316| Ubah saiz imej (4K) | 250ms | 45ms | 5.5x |
317| Simulasi fizik (10K entiti) | Menjatuhkan frame | 60fps lancar | ~10x |
318| Parsing JSON (payload besar) | 12ms | 3ms | 4x |
319| Hashing kriptografi | 45ms | 6ms | 7.5x |
320 
321WASM berjalan pada kira-kira 95% kelajuan kod native. Keuntungan terbesar datang daripada:
322- Prestasi yang boleh diramal (tiada pemanasan JIT, tiada jeda GC)
323- Arahan SIMD untuk pemprosesan data selari
324- Akses memori langsung tanpa gangguan garbage collector
325 
326Di mana WASM TIDAK lebih pantas: manipulasi DOM, pengiraan kecil, tugas terikat I/O. JavaScript sudah dioptimumkan untuk ini.
327 
328## Kes Penggunaan Pengeluaran
329 
330### Figma: Rendering Vektor Masa Nyata
331 
332Enjin rendering teras Figma ialah C++ yang dikompil ke WASM. Setiap bentuk, gradien, dan kesan dikira dalam WASM dan dilukis pada elemen Canvas. Ini membolehkan Figma mengendalikan reka bentuk kompleks dengan ribuan lapisan pada 60fps dalam pelayar  -  prestasi yang mustahil dalam JavaScript tulen.
333 
334### Adobe Photoshop di Web
335 
336Adobe memindahkan penapis dan alat Photoshop utama ke WASM menggunakan Rust. Benchmark mereka menunjukkan pemprosesan imej 4K dalam 22ms dengan WASM SIMD vs 180ms dalam JavaScript  -  peningkatan 8x yang membolehkan pratonton penapis masa nyata.
337 
338### Cloudflare Workers
339 
340Cloudflare menjalankan modul WASM dalam V8 isolates merentasi 330+ lokasi edge. Cold start ialah 1-5ms (berbanding 100-500ms untuk serverless berasaskan kontena). Pada Februari 2026, mereka menggunakan inferens Llama-3-8b merentasi rangkaian edge mereka menggunakan WASM.
341 
342### Google Meet
343 
344Kabur latar belakang dan latar belakang maya dalam Google Meet menggunakan WASM dengan SIMD untuk pemprosesan video masa nyata. Modul WASM memproses setiap frame video cukup pantas untuk mengekalkan video lancar pada 30fps.
345 
346## Sokongan Pelayar (2026)
347 
348| Ciri | 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 | Separa | Ya |
356 
357Semua pelayar utama menyokong WASM sepenuhnya. Ciri-ciri yang lebih baru (WasmGC, Exception Handling) telah mencapai ketersediaan yang luas.
358 
359## Rujukan Tooling
360 
361| Alat | Tujuan | Pasang |
362|------|---------|---------|
363| **wasm-pack** | Bina Rust ke WASM, hasilkan pakej npm | `cargo install wasm-pack` |
364| **wasm-bindgen** | Binding interop Rust/JS (digunakan oleh wasm-pack) | Dependency dalam Cargo.toml |
365| **wasm-opt** | Pengoptimuman saiz binari (pengurangan 50%+) | Sebahagian daripada Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Hasilkan binding daripada fail WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | WASM runtime sisi pelayan (pelaksanaan rujukan WASI) | `brew install wasmtime` |
368| **Wasmer** | WASM runtime alternatif dengan sokongan WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Pengesanan ciri pelayar pada runtime | `npm install wasm-feature-detect` |
370 
371### Mengoptimumkan Saiz Binari
372 
373Binari WASM boleh menjadi 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 daripada 500KB kepada di bawah 50KB dengan pengoptimuman ini.
393 
394## Peta Jalan Bermula
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. Ia adalah teknologi pengeluaran yang digunakan oleh beberapa aplikasi paling mencabar di web. Prestasi hampir native, keselamatan sandboxed, dan kemudahalihan universal  -  tiada sasaran kompilasi lain memberi anda ketiga-tiganya.
422 
423Anda tidak perlu menulis semula seluruh aplikasi anda dalam WASM. Mulakan dengan satu fungsi intensif CPU  -  penapis imej, parser data, pengiraan fizik  -  kompilkannya ke WASM, dan panggilnya daripada JavaScript. Ukur perbezaannya. Kemudian tentukan di mana lagi WASM boleh membantu.
424 
425Tooling sudah matang, sokongan pelayar universal, dan ekosistem berkembang. Jika anda menulis Rust, anda sudah satu arahan daripada pelayar.
426 
427> **Senarai Semak Bermula:**
428>
429> - [x] Rust dan wasm-pack dipasang
430> - [x] Modul WASM pertama dibina dan berjalan dalam pelayar
431> - [x] Interop JavaScript berfungsi (memanggil WASM daripada JS)
432> - [x] Release build dengan pengoptimuman saiz digunakan
433> - [x] Prestasi dibandingkan dengan kesetaraan JavaScript tulen
434> - [x] WASI diterokai dengan Wasmtime untuk kes penggunaan sisi pelayan
435