1 
2Nagsimula ang WebAssembly (WASM) bilang paraan para magpatakbo ng C++ sa browser. Sa 2026, tumatakbo na ito sa lahat ng lugar  -  mga browser, server, edge network, embedded device  -  at nagpapagana ng ilan sa mga pinakamahihirap na aplikasyon sa web. Ang rendering engine ng Figma, ang Adobe Photoshop sa web, ang video processing ng Google Meet, at ang edge compute platform ng Cloudflare ay lahat tumatakbo sa WebAssembly.
3 
4Inilagay ng Chrome Platform Status ang WASM sa halos 5.5% ng lahat ng Chrome page load simula sa unang bahagi ng 2026, mula sa 4.5% noong nakaraang taon. Sa pagiging W3C standard ng WASM 3.0 at ng pag-maturing ng WASI patungo sa 1.0, nakarating na ang ecosystem sa isang turning point.
5 
6Saklaw ng gabay na ito ang lahat ng kailangan mong malaman para magsimulang magtayo gamit ang WebAssembly.
7 
8## Ano ang WebAssembly?
9 
10Ang WebAssembly ay isang binary instruction format na dinisenyo bilang compilation target. Sumusulat ka ng code sa isang high-level na wika (Rust, C, C++, Go, Kotlin), kino-compile ito sa `.wasm`, at pinapatakbo ito sa anumang environment na may WASM runtime  -  mga browser, Node.js, Cloudflare Workers, Wasmtime, o 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### Paano Ito Gumagana
23 
24Ang WASM ay isang **stack-based virtual machine**. Ang mga function ay nagtutulak at nag-pop ng mga value sa isang operand stack. Ang host runtime (V8 sa Chrome, SpiderMonkey sa Firefox) ay nagjo-JIT-compile ng WASM bytecode sa native machine code, na siyang dahilan kung bakit malapit sa native ang performance.
25 
26Mga pangunahing katangian:
27 
28- **Sandboxed execution**: Ang mga WASM module ay maa-access lamang ang mga resource na tahasang ipinagkakaloob ng host. Walang filesystem, walang network, walang OS access maliban kung pinahihintulutan. Ito ay pangunahing iba sa native code.
29- **Linear memory**: isang solong tuloy-tuloy na `ArrayBuffer` na ibinabahagi sa pagitan ng WASM at ng host. Ang kumplikadong data (mga string, struct) ay ipinapasa sa pamamagitan ng pagsulat sa memory at pagbabahagi ng pointer.
30- **Type-limited**: Ang WASM ay natively na sumusuporta lamang sa apat na type: `i32`, `i64`, `f32`, `f64`. Ang lahat ng iba pa (mga string, array, object) ay nangangailangan ng encoding sa pamamagitan ng linear memory o ng Component Model.
31- **Portable**: ang parehong `.wasm` binary ay tumatakbo sa anumang platform na may WASM runtime, nang walang recompilation.
32 
33### WASM vs JavaScript
34 
35Hindi pinapalitan ng WASM ang JavaScript. Pinupunan nito ito.
36 
37| Aspeto | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsing** | Parse + compile sa runtime | Pre-compiled binary, decode lamang |
40| **Bilis ng pagpapatupad** | JIT-optimized, variable | Malapit sa native, pare-pareho |
41| **Startup** | Mabilis para sa maliliit na script | Mabilis na decode, nahuhulaan |
42| **DOM access** | Direkta | Hindi direkta (sa pamamagitan ng JS glue) |
43| **Pinakamainam para sa** | UI, DOM manipulation, event handling | CPU-intensive na computation |
44| **Garbage collection** | Built-in | WasmGC (bago), o manual |
45 
46Gamitin ang JavaScript para sa UI at DOM na trabaho. Gamitin ang WASM para sa mabigat na computation: image processing, video encoding, physics simulation, cryptography, data parsing.
47 
48## WASM 3.0: Ano ang Bago
49 
50Ang WebAssembly 3.0 ay naging W3C standard noong Setyembre 2025, na nag-standardize ng siyam na feature na matagal nang nasa development.
51 
52| Feature | Ano ang Pinapagana Nito |
53|---------|----------------|
54| **WasmGC** | Native garbage collection sa WASM. Maaaring i-compile ang mga managed na wika (Java, Kotlin, Dart) sa WASM nang hindi nagpapadala ng sarili nilang GC runtime. Sinusuportahan sa Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Native `try`/`catch` sa WASM. Dati, ang mga exception ay nangangailangan ng mahal na roundtrip sa JavaScript. |
56| **Tail Calls** | Pinapagana ang mahusay na recursion nang walang stack overflow. Kritikal para sa mga functional na wika. |
57| **Relaxed SIMD** | 128-bit vector instruction para sa parallel data processing. Pinapagana ang hardware-specific na optimization. |
58| **Memory64** | Binabasag ang 4GB linear memory limit. Kinakailangan para sa large-scale data processing. |
59| **Multi-memory** | Maraming independent memory region sa isang module. |
60 
61Ang pinaka-maimpluwensya ay ang **WasmGC**. Bago ito, ang pag-compile ng Java o Kotlin sa WASM ay nangangahulugang magpadala ng buong garbage collector bilang bahagi ng binary, na nagpapalaki sa laki ng file. Ngayon, hinahawakan ng sariling GC ng browser ang memory management para sa mga WASM module, tulad ng ginagawa nito para sa JavaScript.
62 
63## WASI: WebAssembly Lampas sa Browser
64 
65Ang WASM sa browser ay makapangyarihan, ngunit ang **WASI (WebAssembly System Interface)** ang gumagawa sa WASM na isang universal runtime. Ang WASI ay nagbibigay ng mga standardized na interface para sa mga system resource  -  mga file, networking, clock, random number  -  na nagpapahintulot sa mga WASM module na tumakbo sa labas ng 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 
83Ang WASI Preview 2 (ang kasalukuyang stable release) ay nagtatakda ng mga sumusunod na interface:
84 
85- `wasi:filesystem`  -  mga operasyon ng file sa pamamagitan ng capability handle (hindi tradisyunal na file descriptor)
86- `wasi:sockets`  -  TCP/UDP networking
87- `wasi:http`  -  HTTP request/response handling
88- `wasi:clocks`  -  wall clock, monotonic clock
89- `wasi:random`  -  cryptographic randomness
90- `wasi:cli`  -  mga command-line argument, environment variable, stdio
91 
92Ang pangunahing prinsipyo ay **capability-based security**: hindi maa-access ng WASM module ang filesystem maliban kung tahasang magbigay ang host ng handle sa isang partikular na direktoryo. Ginagawa nitong pangunahing mas secure ang WASI kaysa sa pagpapatakbo ng mga native executable.
93 
94### Ang Landas Patungo sa WASI 1.0
95 
96Ang WASI 0.3.0 (na nagdaragdag ng async/concurrency primitive) ay inaasahan sa 2026, na susundan ng WASI 1.0. Ang pangunahing karagdagan ay language-integrated async na may zero-copy streaming I/O.
97 
98## Ang Component Model
99 
100Ang mga core WASM module ay maaari lamang magpalitan ng mga numero. Nilulutas ng **Component Model** ang limitasyong ito sa pamamagitan ng pagdaragdag ng mayamang type system at composability layer sa ibabaw ng WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104Ang WIT ay isang Interface Definition Language na nagpapahintulot sa mga component na ideklara ang kanilang mga import at export na may mayamang type  -  mga string, record, list, variant, enum  -  hindi lamang `i32` at `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 
127Ang mga toolchain tulad ng `wit-bindgen` ay bumubuo ng language-specific na binding mula sa mga WIT file. Ang isang Rust component at isang Python component ay maaaring magpalitan ng mga string, record, at list sa pamamagitan ng mga WIT contract nang hindi alam ng alinmang panig ang wika ng implementasyon ng kabilang panig.
128 
129## Pagbuo ng Iyong Unang WASM Module gamit ang Rust
130 
131Ang Rust ay mayroong pinaka-mature na WASM tooling. Bumuo tayo ng praktikal na halimbawa: isang image processing module na tumatakbo sa browser.
132 
133### Setup
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### I-configure ang 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### Isulat ang Rust Code
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 
228Bumubuo ito ng `pkg/` na direktoryo na may:
229- `image_processor_bg.wasm`  -  ang na-compile na WASM binary
230- `image_processor.js`  -  JavaScript glue code na may mga TypeScript definition
231- `package.json`  -  handa nang i-publish sa npm
232 
233### Gamitin sa 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 
286Ang pangunahing insight: ang `imageData.data` ay isang `Uint8ClampedArray` na sinusuportahan ng isang `ArrayBuffer`. Kapag ipinasa sa WASM, ibinabahagi nito ang parehong memory  -  walang kopya. Binabago ng Rust function ang mga pixel sa lugar, at nakikita ng JavaScript side ang mga pagbabago agad.
287 
288## Mas Mababang Antas: Manual WASM Instantiation
289 
290Kung ayaw mong gamitin ang `wasm-bindgen`, maaari mong direktang i-instantiate ang mga WASM module:
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 
307Kapaki-pakinabang ito kapag nais mo ng minimal overhead at hindi kailangan ng mayamang type interop.
308 
309## Performance: WASM vs JavaScript
310 
311Ipinapakita ng mga real-world na benchmark ang makabuluhang speedup para sa mga CPU-intensive na gawain:
312 
313| Gawain | JavaScript | WASM | Speedup |
314|------|-----------|------|---------|
315| 4K image processing | 180ms | 8ms (na may SIMD) | 22x |
316| Image resize (4K) | 250ms | 45ms | 5.5x |
317| Physics simulation (10K entities) | Bumabagsak ang frames | Smooth 60fps | ~10x |
318| JSON parsing (malaking payload) | 12ms | 3ms | 4x |
319| Cryptographic hashing | 45ms | 6ms | 7.5x |
320 
321Ang WASM ay tumatakbo sa humigit-kumulang 95% ng bilis ng native code. Ang pinakamalaking pakinabang ay nagmumula sa:
322- Nahuhulaang performance (walang JIT warmup, walang GC pause)
323- SIMD instruction para sa parallel data processing
324- Direktang memory access nang walang pakikialam ng garbage collector
325 
326Kung saan HINDI mas mabilis ang WASM: DOM manipulation, maliliit na computation, mga I/O-bound na gawain. Na-optimize na ang JavaScript para sa mga ito.
327 
328## Mga Production Use Case
329 
330### Figma: Real-Time Vector Rendering
331 
332Ang core rendering engine ng Figma ay C++ na na-compile sa WASM. Bawat hugis, gradient, at effect ay kinakalkula sa WASM at iginuguhit sa isang Canvas element. Pinapayagan nito ang Figma na pangasiwaan ang mga kumplikadong disenyo na may libu-libong layer sa 60fps sa browser  -  performance na imposible sa pure JavaScript.
333 
334### Adobe Photoshop sa Web
335 
336Na-port ng Adobe ang mga pangunahing Photoshop filter at tool sa WASM gamit ang Rust. Ipinapakita ng kanilang mga benchmark ang 4K image processing sa 22ms na may WASM SIMD kumpara sa 180ms sa JavaScript  -  isang 8x na pagpapabuti na ginagawang posible ang mga real-time na filter preview.
337 
338### Cloudflare Workers
339 
340Nagpapatakbo ang Cloudflare ng mga WASM module sa mga V8 isolate sa 330+ edge location. Ang cold start ay 1-5ms (kumpara sa 100-500ms para sa container-based serverless). Noong Pebrero 2026, nag-deploy sila ng Llama-3-8b inference sa kanilang edge network gamit ang WASM.
341 
342### Google Meet
343 
344Ang background blur at virtual background sa Google Meet ay gumagamit ng WASM na may SIMD para sa real-time video processing. Pinoproseso ng WASM module ang bawat video frame nang sapat na mabilis upang mapanatili ang smooth na video sa 30fps.
345 
346## Browser Support (2026)
347 
348| Feature | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Buo | Buo | Buo | Buo |
351| Threads | Oo | Oo | Oo | Oo |
352| SIMD (128-bit) | Oo | Oo | Oo | Oo |
353| WasmGC | 119+ | 120+ | 18.2+ | Oo |
354| Exception Handling | Oo | Oo | Oo | Oo |
355| Memory64 | Oo | Oo | Bahagyang | Oo |
356 
357Ang lahat ng malalaking browser ay ganap na sumusuporta sa WASM. Ang mga mas bagong feature (WasmGC, Exception Handling) ay nakarating na sa malawakang availability.
358 
359## Sanggunian sa Tooling
360 
361| Tool | Layunin | Install |
362|------|---------|---------|
363| **wasm-pack** | I-build ang Rust sa WASM, bumuo ng mga npm package | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS interop binding (ginagamit ng wasm-pack) | Dependency sa Cargo.toml |
365| **wasm-opt** | Binary size optimization (50%+ na pagbawas) | Bahagi ng Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Bumuo ng mga binding mula sa mga WIT file | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Server-side WASM runtime (reference WASI implementation) | `brew install wasmtime` |
368| **Wasmer** | Alternatibong WASM runtime na may suporta sa WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Runtime browser feature detection | `npm install wasm-feature-detect` |
370 
371### Pag-optimize ng Laki ng Binary
372 
373Maaaring malaki ang mga WASM binary. Narito kung paano paliitin ang mga ito:
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 
392Ang isang tipikal na Rust WASM module ay bumababa mula 500KB hanggang sa ilalim ng 50KB sa mga optimization na ito.
393 
394## Roadmap Upang Makapagsimula
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## Konklusyon
420 
421Hindi na eksperimental ang WebAssembly. Ito ay isang production technology na ginagamit ng ilan sa mga pinakamahihirap na aplikasyon sa web. Malapit sa native na performance, sandboxed security, at universal portability  -  walang ibang compilation target ang nagbibigay sa iyo ng lahat ng tatlo.
422 
423Hindi mo kailangang muling isulat ang iyong buong aplikasyon sa WASM. Magsimula sa isang CPU-intensive na function  -  isang image filter, isang data parser, isang physics calculation  -  i-compile ito sa WASM, at tawagin ito mula sa JavaScript. Sukatin ang pagkakaiba. Pagkatapos ay magpasya kung saan pa makakatulong ang WASM.
424 
425Mature na ang tooling, universal ang browser support, at lumalago ang ecosystem. Kung sumusulat ka ng Rust, isa ka nang command mula sa browser.
426 
427> **Checklist Upang Makapagsimula:**
428>
429> - [x] Naka-install ang Rust at wasm-pack
430> - [x] Unang WASM module na nabuo at tumatakbo sa browser
431> - [x] Gumagana ang JavaScript interop (pagtawag ng WASM mula sa JS)
432> - [x] Release build na may inilapat na mga size optimization
433> - [x] Na-benchmark ang performance laban sa pure JavaScript equivalent
434> - [x] Ginalugad ang WASI gamit ang Wasmtime para sa mga server-side use case
435