Nagsimula 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.
Inilagay 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.
Saklaw ng gabay na ito ang lahat ng kailangan mong malaman para magsimulang magtayo gamit ang WebAssembly.
Ano ang WebAssembly?
Ang 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.
Paano Ito Gumagana
Ang 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.
Mga pangunahing katangian:
- 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.
- Linear memory: isang solong tuloy-tuloy na
ArrayBufferna 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. - 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. - Portable: ang parehong
.wasmbinary ay tumatakbo sa anumang platform na may WASM runtime, nang walang recompilation.
WASM vs JavaScript
Hindi pinapalitan ng WASM ang JavaScript. Pinupunan nito ito.
| Aspeto | JavaScript | WebAssembly |
|---|---|---|
| Parsing | Parse + compile sa runtime | Pre-compiled binary, decode lamang |
| Bilis ng pagpapatupad | JIT-optimized, variable | Malapit sa native, pare-pareho |
| Startup | Mabilis para sa maliliit na script | Mabilis na decode, nahuhulaan |
| DOM access | Direkta | Hindi direkta (sa pamamagitan ng JS glue) |
| Pinakamainam para sa | UI, DOM manipulation, event handling | CPU-intensive na computation |
| Garbage collection | Built-in | WasmGC (bago), o manual |
Gamitin 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.
WASM 3.0: Ano ang Bago
Ang WebAssembly 3.0 ay naging W3C standard noong Setyembre 2025, na nag-standardize ng siyam na feature na matagal nang nasa development.
| Feature | Ano ang Pinapagana Nito |
|---|---|
| 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+. |
| Exception Handling | Native try/catch sa WASM. Dati, ang mga exception ay nangangailangan ng mahal na roundtrip sa JavaScript. |
| Tail Calls | Pinapagana ang mahusay na recursion nang walang stack overflow. Kritikal para sa mga functional na wika. |
| Relaxed SIMD | 128-bit vector instruction para sa parallel data processing. Pinapagana ang hardware-specific na optimization. |
| Memory64 | Binabasag ang 4GB linear memory limit. Kinakailangan para sa large-scale data processing. |
| Multi-memory | Maraming independent memory region sa isang module. |
Ang 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.
WASI: WebAssembly Lampas sa Browser
Ang 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.
Ang WASI Preview 2 (ang kasalukuyang stable release) ay nagtatakda ng mga sumusunod na interface:
wasi:filesystem- mga operasyon ng file sa pamamagitan ng capability handle (hindi tradisyunal na file descriptor)wasi:sockets- TCP/UDP networkingwasi:http- HTTP request/response handlingwasi:clocks- wall clock, monotonic clockwasi:random- cryptographic randomnesswasi:cli- mga command-line argument, environment variable, stdio
Ang 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.
Ang Landas Patungo sa WASI 1.0
Ang 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.
Ang Component Model
Ang 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.
WIT (WebAssembly Interface Types)
Ang 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.
// calculator.wit package myorg:calculator@1.0.0; interface operations { record calculation { expression: string, result: f64, timestamp: u64, } add: func(a: f64, b: f64) -> f64; multiply: func(a: f64, b: f64) -> f64; history: func() -> list<calculation>; } world calculator { export operations; }
Ang 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.
Pagbuo ng Iyong Unang WASM Module gamit ang Rust
Ang Rust ay mayroong pinaka-mature na WASM tooling. Bumuo tayo ng praktikal na halimbawa: isang image processing module na tumatakbo sa browser.
Setup
# Install the WASM target for Rust rustup target add wasm32-unknown-unknown # Install wasm-pack (builds Rust to WASM + generates JS bindings) cargo install wasm-pack # Create a new library project cargo new --lib image-processor cd image-processor
I-configure ang Cargo.toml
[package] name = "image-processor" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"
Isulat ang Rust Code
// src/lib.rs use wasm_bindgen::prelude::*; /// Convert an image buffer to grayscale. /// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel). /// Output: Modified in place for zero-copy performance. #[wasm_bindgen] pub fn grayscale(pixels: &mut [u8]) { for chunk in pixels.chunks_exact_mut(4) { let r = chunk[0] as f32; let g = chunk[1] as f32; let b = chunk[2] as f32; // ITU-R BT.709 luminance coefficients let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8; chunk[0] = gray; chunk[1] = gray; chunk[2] = gray; // chunk[3] is alpha, leave unchanged } } /// Adjust brightness of an image. /// factor > 1.0 brightens, < 1.0 darkens. #[wasm_bindgen] pub fn adjust_brightness(pixels: &mut [u8], factor: f32) { for chunk in pixels.chunks_exact_mut(4) { chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8; chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8; chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8; } } /// Invert all colors in the image. #[wasm_bindgen] pub fn invert(pixels: &mut [u8]) { for chunk in pixels.chunks_exact_mut(4) { chunk[0] = 255 - chunk[0]; chunk[1] = 255 - chunk[1]; chunk[2] = 255 - chunk[2]; } } /// Calculate the average brightness of an image (0-255). #[wasm_bindgen] pub fn average_brightness(pixels: &[u8]) -> f32 { let mut total: f64 = 0.0; let pixel_count = pixels.len() / 4; for chunk in pixels.chunks_exact(4) { let luminance = 0.2126 * chunk[0] as f64 + 0.7152 * chunk[1] as f64 + 0.0722 * chunk[2] as f64; total += luminance; } (total / pixel_count as f64) as f32 }
Build
wasm-pack build --target web
Bumubuo ito ng pkg/ na direktoryo na may:
image_processor_bg.wasm- ang na-compile na WASM binaryimage_processor.js- JavaScript glue code na may mga TypeScript definitionpackage.json- handa nang i-publish sa npm
Gamitin sa JavaScript
<!DOCTYPE html> <html> <head><title>WASM Image Processor</title></head> <body> <canvas id="canvas" width="800" height="600"></canvas> <button onclick="applyGrayscale()">Grayscale</button> <button onclick="applyBrightness()">Brighten</button> <button onclick="applyInvert()">Invert</button> <script type="module"> import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js"; let ctx; let imageData; async function setup() { await init(); const canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); // Load an image onto the canvas const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0); imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); }; img.src = "photo.jpg"; } window.applyGrayscale = () => { grayscale(imageData.data); ctx.putImageData(imageData, 0, 0); }; window.applyBrightness = () => { adjust_brightness(imageData.data, 1.3); ctx.putImageData(imageData, 0, 0); }; window.applyInvert = () => { invert(imageData.data); ctx.putImageData(imageData, 0, 0); }; setup(); </script> </body> </html>
Ang 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.
Mas Mababang Antas: Manual WASM Instantiation
Kung ayaw mong gamitin ang wasm-bindgen, maaari mong direktang i-instantiate ang mga WASM module:
const response = await fetch("calculator.wasm"); const { instance } = await WebAssembly.instantiateStreaming(response, { env: { // Functions the WASM module can call log_result: (value) => console.log("Result:", value), }, }); // Call exported functions const { add, multiply } = instance.exports; console.log(add(5, 3)); // 8 console.log(multiply(4, 7)); // 28
Kapaki-pakinabang ito kapag nais mo ng minimal overhead at hindi kailangan ng mayamang type interop.
Performance: WASM vs JavaScript
Ipinapakita ng mga real-world na benchmark ang makabuluhang speedup para sa mga CPU-intensive na gawain:
| Gawain | JavaScript | WASM | Speedup |
|---|---|---|---|
| 4K image processing | 180ms | 8ms (na may SIMD) | 22x |
| Image resize (4K) | 250ms | 45ms | 5.5x |
| Physics simulation (10K entities) | Bumabagsak ang frames | Smooth 60fps | ~10x |
| JSON parsing (malaking payload) | 12ms | 3ms | 4x |
| Cryptographic hashing | 45ms | 6ms | 7.5x |
Ang WASM ay tumatakbo sa humigit-kumulang 95% ng bilis ng native code. Ang pinakamalaking pakinabang ay nagmumula sa:
- Nahuhulaang performance (walang JIT warmup, walang GC pause)
- SIMD instruction para sa parallel data processing
- Direktang memory access nang walang pakikialam ng garbage collector
Kung 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.
Mga Production Use Case
Figma: Real-Time Vector Rendering
Ang 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.
Adobe Photoshop sa Web
Na-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.
Cloudflare Workers
Nagpapatakbo 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.
Google Meet
Ang 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.
Browser Support (2026)
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Core WASM | Buo | Buo | Buo | Buo |
| Threads | Oo | Oo | Oo | Oo |
| SIMD (128-bit) | Oo | Oo | Oo | Oo |
| WasmGC | 119+ | 120+ | 18.2+ | Oo |
| Exception Handling | Oo | Oo | Oo | Oo |
| Memory64 | Oo | Oo | Bahagyang | Oo |
Ang lahat ng malalaking browser ay ganap na sumusuporta sa WASM. Ang mga mas bagong feature (WasmGC, Exception Handling) ay nakarating na sa malawakang availability.
Sanggunian sa Tooling
| Tool | Layunin | Install |
|---|---|---|
| wasm-pack | I-build ang Rust sa WASM, bumuo ng mga npm package | cargo install wasm-pack |
| wasm-bindgen | Rust/JS interop binding (ginagamit ng wasm-pack) | Dependency sa Cargo.toml |
| wasm-opt | Binary size optimization (50%+ na pagbawas) | Bahagi ng Binaryen: brew install binaryen |
| wit-bindgen | Bumuo ng mga binding mula sa mga WIT file | cargo install wit-bindgen-cli |
| Wasmtime | Server-side WASM runtime (reference WASI implementation) | brew install wasmtime |
| Wasmer | Alternatibong WASM runtime na may suporta sa WASI | curl https://get.wasmer.io -sSfL | sh |
| wasm-feature-detect | Runtime browser feature detection | npm install wasm-feature-detect |
Pag-optimize ng Laki ng Binary
Maaaring malaki ang mga WASM binary. Narito kung paano paliitin ang mga ito:
# Cargo.toml [profile.release] opt-level = "z" # Optimize for size lto = true # Link-time optimization codegen-units = 1 # Better optimization, slower compile strip = true # Strip debug symbols
# Build in release mode wasm-pack build --release --target web # Further optimize with wasm-opt wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
Ang isang tipikal na Rust WASM module ay bumababa mula 500KB hanggang sa ilalim ng 50KB sa mga optimization na ito.
Roadmap Upang Makapagsimula
Konklusyon
Hindi 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.
Hindi 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.
Mature na ang tooling, universal ang browser support, at lumalago ang ecosystem. Kung sumusulat ka ng Rust, isa ka nang command mula sa browser.
Checklist Upang Makapagsimula:
- Naka-install ang Rust at wasm-pack
- Unang WASM module na nabuo at tumatakbo sa browser
- Gumagana ang JavaScript interop (pagtawag ng WASM mula sa JS)
- Release build na may inilapat na mga size optimization
- Na-benchmark ang performance laban sa pure JavaScript equivalent
- Ginalugad ang WASI gamit ang Wasmtime para sa mga server-side use case