1 
2WebAssembly (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.
3 
4Chrome 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.
5 
6Acest ghid acopera tot ce trebuie sa stii pentru a incepe sa dezvolti cu WebAssembly.
7 
8## Ce este WebAssembly?
9 
10WebAssembly 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.
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### Cum functioneaza
23 
24WASM 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.
25 
26Caracteristici cheie:
27 
28- **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.
32 
33### WASM vs JavaScript
34 
35WASM nu inlocuieste JavaScript. Il complementeaza.
36 
37| 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 |
45 
46Foloseste 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.
47 
48## WASM 3.0: ce e nou
49 
50WebAssembly 3.0 a devenit standard W3C in septembrie 2025, standardizand noua functionalitati care erau in dezvoltare de ani de zile.
51 
52| 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. |
60 
61Cea 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.
62 
63## WASI: WebAssembly dincolo de browser
64 
65WASM 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.
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 (versiunea stabila curenta) defineste aceste interfete:
84 
85- `wasi:filesystem`  -  operatii cu fisiere prin handle-uri de capacitate (nu descriptorii de fisiere traditionali)
86- `wasi:sockets`  -  retea TCP/UDP
87- `wasi:http`  -  gestionarea cererilor/raspunsurilor HTTP
88- `wasi:clocks`  -  ceasul de sistem, ceasul monotonic
89- `wasi:random`  -  aleatoritate criptografica
90- `wasi:cli`  -  argumente de linie de comanda, variabile de mediu, stdio
91 
92Principiul 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.
93 
94### Drumul catre WASI 1.0
95 
96WASI 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.
97 
98## Component Model
99 
100Modulele 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.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT 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`.
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-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.
128 
129## Construirea primului tau modul WASM cu Rust
130 
131Rust are cele mai mature instrumente WASM. Sa construim un exemplu practic: un modul de procesare a imaginilor care ruleaza in browser.
132 
133### Configurare
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### Configureaza 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### Scrie codul 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### Build
223 
224```bash
225wasm-pack build --target web
226```
227 
228Aceasta produce un director `pkg/` cu:
229- `image_processor_bg.wasm`  -  binarul WASM compilat
230- `image_processor.js`  -  cod glue JavaScript cu definitii TypeScript
231- `package.json`  -  gata de publicat pe npm
232 
233### Utilizare in 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 
286Punctul 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.
287 
288## Nivel inferior: instantiere manuala a WASM
289 
290Daca nu vrei sa folosesti `wasm-bindgen`, poti instantia modulele WASM direct:
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 
307Aceasta este utila cand vrei un overhead minim si nu ai nevoie de interoperabilitate avansata intre tipuri.
308 
309## Performanta: WASM vs JavaScript
310 
311Benchmark-urile reale arata accelerari semnificative pentru sarcinile intensive pe CPU:
312 
313| 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 |
320 
321WASM 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 datelor
324- Acces direct la memorie fara interferenta garbage collector-ului
325 
326Unde WASM NU este mai rapid: manipularea DOM-ului, calcule mici, sarcini limitate de I/O. JavaScript este deja optimizat pentru acestea.
327 
328## Cazuri de utilizare in productie
329 
330### Figma: randare vectoriala in timp real
331 
332Motorul 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.
333 
334### Adobe Photoshop pe web
335 
336Adobe 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.
337 
338### Cloudflare Workers
339 
340Cloudflare 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.
341 
342### Google Meet
343 
344Estomparea 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.
345 
346## Suport browsere (2026)
347 
348| 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 |
356 
357Toate browserele majore suporta complet WASM. Functionalitatile mai noi (WasmGC, Exception Handling) au atins o disponibilitate larga.
358 
359## Referinta instrumente
360 
361| 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` |
370 
371### Optimizarea dimensiunii binarului
372 
373Binarele WASM pot fi mari. Iata cum le reduci:
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 
392Un modul WASM tipic in Rust scade de la 500KB la sub 50KB cu aceste optimizari.
393 
394## Foaie de parcurs pentru a incepe
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## Concluzie
420 
421WebAssembly 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.
422 
423Nu 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.
424 
425Instrumentele sunt mature, suportul browserelor este universal si ecosistemul este in crestere. Daca scrii in Rust, esti deja la o comanda distanta de browser.
426 
427> **Checklist pentru a incepe:**
428>
429> - [x] Rust si wasm-pack instalate
430> - [x] Primul modul WASM compilat si functional in browser
431> - [x] Interoperabilitatea cu JavaScript functionala (apelarea WASM din JS)
432> - [x] Build de release cu optimizari de dimensiune aplicate
433> - [x] Performanta comparata cu echivalentul in JavaScript pur
434> - [x] WASI explorat cu Wasmtime pentru cazuri de utilizare pe server
435