spinny:~/writing $ less webassembly-wasm-complete-guide.md
12WebAssembly (WASM) a inceput ca o modalitate de a rula C++ in browser. In 2026, ruleaza peste tot - browsere, servere, retele edge, dispozitive embedded - si alimenteaza unele dintre cele mai solicitante aplicatii de pe web. Motorul de randare al Figma, Adobe Photoshop pe web, procesarea video a Google Meet si platforma de calcul edge a Cloudflare functioneaza toate pe WebAssembly.34Chrome Platform Status plaseaza WASM la aproximativ 5,5% din toate incarccarile de pagina Chrome la inceputul lui 2026, in crestere de la 4,5% in anul precedent. Cu WASM 3.0 devenit standard W3C si WASI maturizandu-se spre versiunea 1.0, ecosistemul a atins un punct de cotitura.56Acest ghid acopera tot ce trebuie sa stii pentru a incepe sa dezvolti cu WebAssembly.78## Ce este WebAssembly?910WebAssembly este un format de instructiuni binare conceput ca tinta de compilare. Scrii cod intr-un limbaj de nivel inalt (Rust, C, C++, Go, Kotlin), il compilezi in `.wasm` si il rulezi in orice mediu care are un runtime WASM - browsere, Node.js, Cloudflare Workers, Wasmtime sau Wasmer.1112```mermaid13graph LR14 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```2122### Cum functioneaza2324WASM este o **masina virtuala bazata pe stiva**. Functiile impinge si extrag valori pe o stiva de operanzi. Runtime-ul host (V8 in Chrome, SpiderMonkey in Firefox) compileaza JIT bytecode-ul WASM in cod masina nativ, de aceea performanta este aproape nativa.2526Caracteristici cheie:2728- **Executie in sandbox**: modulele WASM pot accesa doar resursele pe care host-ul le acorda explicit. Fara acces la sistemul de fisiere, la retea sau la sistemul de operare, cu exceptia cazului in care este permis. Acest lucru este fundamental diferit de codul nativ.29- **Memorie liniara**: un singur `ArrayBuffer` contiguu partajat intre WASM si host. Datele complexe (siruri de caractere, structuri) sunt transmise prin scrierea in memorie si partajarea unui pointer.30- **Tipuri limitate**: WASM suporta nativ doar patru tipuri: `i32`, `i64`, `f32`, `f64`. Tot restul (siruri, array-uri, obiecte) necesita codificare prin memoria liniara sau Component Model.31- **Portabil**: acelasi binar `.wasm` ruleaza pe orice platforma cu un runtime WASM, fara recompilare.3233### WASM vs JavaScript3435WASM nu inlocuieste JavaScript. Il complementeaza.3637| Aspect | JavaScript | WebAssembly |38|--------|-----------|-------------|39| **Parsing** | Parsing + compilare la runtime | Binar pre-compilat, doar decodare |40| **Viteza de executie** | Optimizat JIT, variabil | Aproape nativ, constant |41| **Pornire** | Rapida pentru scripturi mici | Decodare rapida, previzibila |42| **Acces la DOM** | Direct | Indirect (prin glue JS) |43| **Ideal pentru** | UI, manipulare DOM, gestionare evenimente | Calcul intensiv pe CPU |44| **Garbage collection** | Integrat | WasmGC (nou), sau manual |4546Foloseste JavaScript pentru interfata utilizatorului si lucrul cu DOM-ul. Foloseste WASM pentru calculul greu: procesare de imagini, codificare video, simulari fizice, criptografie, parsing de date.4748## WASM 3.0: ce e nou4950WebAssembly 3.0 a devenit standard W3C in septembrie 2025, standardizand noua functionalitati care erau in dezvoltare de ani de zile.5152| Functionalitate | Ce permite |53|-----------------|-----------|54| **WasmGC** | Garbage collection nativa in WASM. Limbajele gestionate (Java, Kotlin, Dart) pot compila in WASM fara a include propriul runtime GC. Suportat in Chrome 119+, Firefox 120+, Safari 18.2+. |55| **Exception Handling** | `try`/`catch` native in WASM. Anterior, exceptiile necesitau circuite costisitoare catre JavaScript. |56| **Tail Calls** | Permite recursie eficienta fara stack overflow. Esential pentru limbajele functionale. |57| **Relaxed SIMD** | Instructiuni vectoriale de 128 de biti pentru procesarea paralela a datelor. Permite optimizari specifice hardware-ului. |58| **Memory64** | Depaseste limita de 4GB de memorie liniara. Necesar pentru procesarea datelor la scara mare. |59| **Multi-memory** | Mai multe regiuni de memorie independente intr-un singur modul. |6061Cea mai impactanta este **WasmGC**. Inainte de aceasta, compilarea Java sau Kotlin in WASM insemna includerea unui garbage collector complet ca parte a binarului, umfland dimensiunea fisierelor. Acum GC-ul browserului gestioneaza memoria pentru modulele WASM, exact cum face si pentru JavaScript.6263## WASI: WebAssembly dincolo de browser6465WASM in browser este puternic, dar **WASI (WebAssembly System Interface)** este ceea ce face din WASM un runtime universal. WASI furnizeaza interfete standardizate pentru resursele sistemului - fisiere, retea, ceasuri, numere aleatoare - permitand modulelor WASM sa functioneze in afara browserului.6667```mermaid68graph TD69 subgraph "Browser"70 B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]71 end7273 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 end81```8283WASI Preview 2 (versiunea stabila curenta) defineste aceste interfete:8485- `wasi:filesystem` - operatii cu fisiere prin handle-uri de capacitate (nu descriptorii de fisiere traditionali)86- `wasi:sockets` - retea TCP/UDP87- `wasi:http` - gestionarea cererilor/raspunsurilor HTTP88- `wasi:clocks` - ceasul de sistem, ceasul monotonic89- `wasi:random` - aleatoritate criptografica90- `wasi:cli` - argumente de linie de comanda, variabile de mediu, stdio9192Principiul cheie este **securitatea bazata pe capacitati**: un modul WASM nu poate accesa sistemul de fisiere decat daca host-ul acorda explicit un handle catre un director specific. Acest lucru face WASI fundamental mai sigur decat executarea de executabile native.9394### Drumul catre WASI 1.09596WASI 0.3.0 (care adauga primitive async/concurenta) este asteptat in 2026, cu WASI 1.0 urmand dupa. Adaugarea principala este async-ul integrat in limbaj cu I/O streaming fara copiere.9798## Component Model99100Modulele WASM de baza pot schimba doar numere. **Component Model** rezolva aceasta limitare adaugand un sistem de tipuri bogat si un strat de compozabilitate deasupra WASM-ului.101102### WIT (WebAssembly Interface Types)103104WIT este un limbaj de definire a interfetelor care permite componentelor sa isi declare importurile si exporturile cu tipuri bogate - siruri, inregistrari, liste, variante, enumerari - nu doar `i32` si `f64`.105106```wit107// calculator.wit108package myorg:calculator@1.0.0;109110interface operations {111 record calculation {112 expression: string,113 result: f64,114 timestamp: u64,115 }116117 add: func(a: f64, b: f64) -> f64;118 multiply: func(a: f64, b: f64) -> f64;119 history: func() -> list<calculation>;120}121122world calculator {123 export operations;124}125```126127Toolchain-urile precum `wit-bindgen` genereaza binding-uri specifice limbajului din fisierele WIT. O componenta Rust si o componenta Python pot schimba siruri, inregistrari si liste prin contracte WIT fara ca niciuna dintre parti sa cunoasca limbajul de implementare al celeilalte.128129## Construirea primului tau modul WASM cu Rust130131Rust are cele mai mature instrumente WASM. Sa construim un exemplu practic: un modul de procesare a imaginilor care ruleaza in browser.132133### Configurare134135```bash136# Install the WASM target for Rust137rustup target add wasm32-unknown-unknown138139# Install wasm-pack (builds Rust to WASM + generates JS bindings)140cargo install wasm-pack141142# Create a new library project143cargo new --lib image-processor144cd image-processor145```146147### Configureaza Cargo.toml148149```toml150[package]151name = "image-processor"152version = "0.1.0"153edition = "2021"154155[lib]156crate-type = ["cdylib"]157158[dependencies]159wasm-bindgen = "0.2"160```161162### Scrie codul Rust163164```rust165// src/lib.rs166use wasm_bindgen::prelude::*;167168/// 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 coefficients178 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 unchanged183 }184}185186/// 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}196197/// 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}206207/// 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 f64214 + 0.7152 * chunk[1] as f64215 + 0.0722 * chunk[2] as f64;216 total += luminance;217 }218 (total / pixel_count as f64) as f32219}220```221222### Build223224```bash225wasm-pack build --target web226```227228Aceasta produce un director `pkg/` cu:229- `image_processor_bg.wasm` - binarul WASM compilat230- `image_processor.js` - cod glue JavaScript cu definitii TypeScript231- `package.json` - gata de publicat pe npm232233### Utilizare in JavaScript234235```html236<!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>244245 <script type="module">246 import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";247248 let ctx;249 let imageData;250251 async function setup() {252 await init();253 const canvas = document.getElementById("canvas");254 ctx = canvas.getContext("2d");255256 // Load an image onto the canvas257 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 }264265 window.applyGrayscale = () => {266 grayscale(imageData.data);267 ctx.putImageData(imageData, 0, 0);268 };269270 window.applyBrightness = () => {271 adjust_brightness(imageData.data, 1.3);272 ctx.putImageData(imageData, 0, 0);273 };274275 window.applyInvert = () => {276 invert(imageData.data);277 ctx.putImageData(imageData, 0, 0);278 };279280 setup();281 </script>282</body>283</html>284```285286Punctul cheie: `imageData.data` este un `Uint8ClampedArray` sustinut de un `ArrayBuffer`. Cand este transmis la WASM, partajeaza aceeasi memorie - fara copiere. Functia Rust modifica pixelii direct, iar partea JavaScript vede imediat modificarile.287288## Nivel inferior: instantiere manuala a WASM289290Daca nu vrei sa folosesti `wasm-bindgen`, poti instantia modulele WASM direct:291292```javascript293const response = await fetch("calculator.wasm");294const { instance } = await WebAssembly.instantiateStreaming(response, {295 env: {296 // Functions the WASM module can call297 log_result: (value) => console.log("Result:", value),298 },299});300301// Call exported functions302const { add, multiply } = instance.exports;303console.log(add(5, 3)); // 8304console.log(multiply(4, 7)); // 28305```306307Aceasta este utila cand vrei un overhead minim si nu ai nevoie de interoperabilitate avansata intre tipuri.308309## Performanta: WASM vs JavaScript310311Benchmark-urile reale arata accelerari semnificative pentru sarcinile intensive pe CPU:312313| Sarcina | JavaScript | WASM | Accelerare |314|---------|-----------|------|------------|315| Procesare imagine 4K | 180ms | 8ms (cu SIMD) | 22x |316| Redimensionare imagine (4K) | 250ms | 45ms | 5,5x |317| Simulare fizica (10K entitati) | Frame-uri pierdute | 60fps fluide | ~10x |318| Parsing JSON (incarcare mare) | 12ms | 3ms | 4x |319| Hashing criptografic | 45ms | 6ms | 7,5x |320321WASM ruleaza la aproximativ 95% din viteza codului nativ. Cele mai mari castiguri provin din:322- Performanta previzibila (fara warmup JIT, fara pauze GC)323- Instructiuni SIMD pentru procesarea paralela a datelor324- Acces direct la memorie fara interferenta garbage collector-ului325326Unde WASM NU este mai rapid: manipularea DOM-ului, calcule mici, sarcini limitate de I/O. JavaScript este deja optimizat pentru acestea.327328## Cazuri de utilizare in productie329330### Figma: randare vectoriala in timp real331332Motorul de randare principal al Figma este C++ compilat in WASM. Fiecare forma, gradient si efect este calculat in WASM si desenat pe un element Canvas. Aceasta permite Figma sa gestioneze design-uri complexe cu mii de straturi la 60fps in browser - performanta imposibila in JavaScript pur.333334### Adobe Photoshop pe web335336Adobe a portat filtre si instrumente cheie din Photoshop in WASM folosind Rust. Benchmark-urile lor arata procesarea de imagini 4K in 22ms cu WASM SIMD fata de 180ms in JavaScript - o imbunatatire de 8 ori care face posibile previzualizarile filtrelor in timp real.337338### Cloudflare Workers339340Cloudflare ruleaza module WASM in izolate V8 in peste 330 de locatii edge. Cold start-urile sunt de 1-5ms (comparativ cu 100-500ms pentru serverless bazat pe containere). In februarie 2026, au implementat inferenta Llama-3-8b in reteaua lor edge folosind WASM.341342### Google Meet343344Estomparea fundalului si fundalurile virtuale din Google Meet folosesc WASM cu SIMD pentru procesarea video in timp real. Modulul WASM proceseaza fiecare cadru video suficient de rapid pentru a mentine un video fluid la 30fps.345346## Suport browsere (2026)347348| Functionalitate | Chrome | Firefox | Safari | Edge |349|-----------------|--------|---------|--------|------|350| Core WASM | Complet | Complet | Complet | Complet |351| Threads | Da | Da | Da | Da |352| SIMD (128 biti) | Da | Da | Da | Da |353| WasmGC | 119+ | 120+ | 18.2+ | Da |354| Exception Handling | Da | Da | Da | Da |355| Memory64 | Da | Da | Partial | Da |356357Toate browserele majore suporta complet WASM. Functionalitatile mai noi (WasmGC, Exception Handling) au atins o disponibilitate larga.358359## Referinta instrumente360361| Instrument | Scop | Instalare |362|------------|------|-----------|363| **wasm-pack** | Compileaza Rust in WASM, genereaza pachete npm | `cargo install wasm-pack` |364| **wasm-bindgen** | Binding-uri de interoperabilitate Rust/JS (folosit de wasm-pack) | Dependenta in Cargo.toml |365| **wasm-opt** | Optimizare dimensiune binar (reducere de 50%+) | Parte din Binaryen: `brew install binaryen` |366| **wit-bindgen** | Genereaza binding-uri din fisiere WIT | `cargo install wit-bindgen-cli` |367| **Wasmtime** | Runtime WASM pe server (implementare de referinta WASI) | `brew install wasmtime` |368| **Wasmer** | Runtime WASM alternativ cu suport WASI | `curl https://get.wasmer.io -sSfL \| sh` |369| **wasm-feature-detect** | Detectarea functionalitatilor browserului la runtime | `npm install wasm-feature-detect` |370371### Optimizarea dimensiunii binarului372373Binarele WASM pot fi mari. Iata cum le reduci:374375```toml376# Cargo.toml377[profile.release]378opt-level = "z" # Optimize for size379lto = true # Link-time optimization380codegen-units = 1 # Better optimization, slower compile381strip = true # Strip debug symbols382```383384```bash385# Build in release mode386wasm-pack build --release --target web387388# Further optimize with wasm-opt389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm390```391392Un modul WASM tipic in Rust scade de la 500KB la sub 50KB cu aceste optimizari.393394## Foaie de parcurs pentru a incepe395396```mermaid397flowchart TD398 A[Week 1: Basics] --> B[Week 2: Real Project]399 B --> C[Week 3: WASI and Server-side]400 C --> D[Month 2+: Production]401402 A --> A1[Install Rust + wasm-pack]403 A --> A2[Build hello-world WASM module]404 A --> A3[Call WASM functions from JavaScript]405406 B --> B1[Build image processor or game physics]407 B --> B2[Use wasm-bindgen for rich types]408 B --> B3[Benchmark against pure JS]409410 C --> C1[Run WASM with Wasmtime]411 C --> C2[Explore WASI interfaces]412 C --> C3[Try Component Model with WIT]413414 D --> D1[Optimize binary size]415 D --> D2[Use SIMD for parallelism]416 D --> D3[Deploy to Cloudflare Workers or browser]417```418419## Concluzie420421WebAssembly nu mai este experimental. Este o tehnologie de productie folosita de unele dintre cele mai solicitante aplicatii de pe web. Performanta aproape nativa, securitate in sandbox si portabilitate universala - nicio alta tinta de compilare nu iti ofera toate trei.422423Nu trebuie sa rescrii intreaga aplicatie in WASM. Incepe cu o singura functie intensiva pe CPU - un filtru de imagine, un parser de date, un calcul fizic - compileaz-o in WASM si apeleaz-o din JavaScript. Masoara diferenta. Apoi decide unde mai poate ajuta WASM.424425Instrumentele sunt mature, suportul browserelor este universal si ecosistemul este in crestere. Daca scrii in Rust, esti deja la o comanda distanta de browser.426427> **Checklist pentru a incepe:**428>429> - [x] Rust si wasm-pack instalate430> - [x] Primul modul WASM compilat si functional in browser431> - [x] Interoperabilitatea cu JavaScript functionala (apelarea WASM din JS)432> - [x] Build de release cu optimizari de dimensiune aplicate433> - [x] Performanta comparata cu echivalentul in JavaScript pur434> - [x] WASI explorat cu Wasmtime pentru cazuri de utilizare pe server435
:WebAssembly pentru dezvoltatori web: de la zero la productielines 1-435 (END) — press q to close