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~