1 
2WebAssembly (WASM) zacinal jako zpusob, jak spoustet C++ v prohlizeci. V roce 2026 bezi vsude  -  prohlizece, servery, edge site, vestavenych zarizeni  -  a pohani nektere z nejnarocnejsich aplikaci na webu. Vykreslovaci engine Figmy, Adobe Photoshop na webu, zpracovani videa v Google Meet a platforma edge vypoctu Cloudflare  -  to vse bezi na WebAssembly.
3 
4Chrome Platform Status uvadi, ze WASM tvoril zhruba 5,5 % vsech nacitani stranek v Chrome na zacatku roku 2026, oproti 4,5 % v predchozim roce. S tim, ze WASM 3.0 se stal standardem W3C a WASI dozrava smerem k verzi 1.0, ekosystem dosahl bodu zlomu.
5 
6Tento pruvodce pokryva vse, co potrebujete vedet, abyste mohli zacit stavet s WebAssembly.
7 
8## Co je WebAssembly?
9 
10WebAssembly je binarni format instrukci navrzeny jako cil kompilace. Napisete kod ve vysokourovnovem jazyce (Rust, C, C++, Go, Kotlin), zkompilujete jej do `.wasm` a spustite v jakoliv prostredi s WASM runtime  -  prohlizece, Node.js, Cloudflare Workers, Wasmtime nebo 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### Jak to funguje
23 
24WASM je **virtualni stroj zalozeny na zasobniku**. Funkce ukladaji a odebirati hodnoty z operandoveho zasobniku. Hostitelsky runtime (V8 v Chrome, SpiderMonkey ve Firefoxu) JIT kompiluje WASM bytekod do nativniho strojoveho kodu, proto je vykon blizky nativnimu.
25 
26Klicove vlastnosti:
27 
28- **Provadeni v sandboxu**: WASM moduly mohou pristupovat pouze k prostredkum, ktere hostitel explicitne udeli. Zadny pristup k souborovemu systemu, siti ani operacnimu systemu, pokud to neni povoleno. To je fundamentalni rozdil oproti nativnimu kodu.
29- **Linearni pamet**: jeden souvisly `ArrayBuffer` sdileny mezi WASM a hostitelem. Slozita data (retezce, struktury) se predavaji zapisem do pameti a sdilenim ukazatele.
30- **Omezene typy**: WASM nativne podporuje pouze ctyri typy: `i32`, `i64`, `f32`, `f64`. Vse ostatni (retezce, pole, objekty) vyzaduje kodovani pres linearni pamet nebo Component Model.
31- **Prenositelnost**: stejny binarni soubor `.wasm` bezi na jakekoli platforme s WASM runtime, bez rekompilace.
32 
33### WASM vs JavaScript
34 
35WASM nenahrazuje JavaScript. Doplnuje ho.
36 
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsovani** | Parsovani + kompilace za behu | Predkompilovany binarni soubor, pouze dekodovani |
40| **Rychlost provadeni** | JIT optimalizovany, promenliva | Blizko nativni, konzistentni |
41| **Start** | Rychly pro male skripty | Rychle dekodovani, predvidatelny |
42| **Pristup k DOM** | Primy | Neprimi (pres JS vrstvu) |
43| **Nejlepsi pro** | UI, manipulace s DOM, zpracovani udalosti | Vypocetne narocne ulohy CPU |
44| **Garbage collection** | Vestavenej | WasmGC (novy) nebo manualni |
45 
46Pouzivejte JavaScript pro praci s UI a DOM. Pouzivejte WASM pro narocne vypocty: zpracovani obrazu, kodovani videa, fyzikalni simulace, kryptografie, parsovani dat.
47 
48## WASM 3.0: co je noveho
49 
50WebAssembly 3.0 se stal standardem W3C v zari 2025 a standardizoval devet funkci, ktere byly vyvijeny po leta.
51 
52| Funkce | Co umoznuje |
53|---------|----------------|
54| **WasmGC** | Nativni garbage collection ve WASM. Spravovane jazyky (Java, Kotlin, Dart) mohou kompilovat do WASM bez dodavani vlastniho GC runtime. Podporovano v Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Nativni `try`/`catch` ve WASM. Drive vyzadovaly vyjimky nakladne pruchody do JavaScriptu. |
56| **Tail Calls** | Umoznuje efektivni rekurzi bez preteceni zasobniku. Klicove pro funkcionalni jazyky. |
57| **Relaxed SIMD** | 128bitove vektorove instrukce pro paralelni zpracovani dat. Umoznuje hardwarove specificke optimalizace. |
58| **Memory64** | Prekonava limit 4GB linearni pameti. Nutne pro zpracovani dat ve velkem meritku. |
59| **Multi-memory** | Vice nezavislych oblasti pameti v jednom modulu. |
60 
61Nejvyznamnejsi je **WasmGC**. Drive kompilace Javy nebo Kotlinu do WASM znamenala dodani celeho garbage collectoru jako soucasti binarniho souboru, coz nafouklo velikost souboru. Nyni vlastni GC prohlizece spravuje pamet WASM modulu, stejne jako to dela pro JavaScript.
62 
63## WASI: WebAssembly mimo prohlizec
64 
65WASM v prohlizeci je mocny, ale **WASI (WebAssembly System Interface)** je to, co dela z WASM univerzalni runtime. WASI poskytuje standardizovane rozhrani pro systemove prostredky  -  soubory, sitovani, hodiny, nahodna cisla  -  umoznuje WASM modulem bezet mimo prohlizec.
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 (soucasne stabilni vydani) definuje tato rozhrani:
84 
85- `wasi:filesystem`  -  souborove operace pres capability handles (ne tradicni deskriptory souboru)
86- `wasi:sockets`  -  TCP/UDP sitovani
87- `wasi:http`  -  zpracovani HTTP pozadavku/odpovedi
88- `wasi:clocks`  -  nastenne hodiny, monotonicke hodiny
89- `wasi:random`  -  kryptograficka nahodnost
90- `wasi:cli`  -  argumenty prikazoveho radku, promenne prostredi, stdio
91 
92Klicovym principem je **zabezpeceni zalozene na schopnostech**: WASM modul nemuze pristupovat k souborovemu systemu, pokud hostitel explicitne neposkytneme handle ke konkretnimu adresari. To cini WASI fundamentalne bezpecnejsim nez spousteni nativnich spustitelnych souboru.
93 
94### Cesta k WASI 1.0
95 
96WASI 0.3.0 (pridavajici async/soubelnostni primitivy) se ocekava v roce 2026, WASI 1.0 ma nasledovat. Hlavnim pridanim je jazykove integrovane async s bezkopirovym streamovym I/O.
97 
98## Component Model
99 
100Zakladni WASM moduly mohou vymenit pouze cisla. **Component Model** resi toto omezeni pridanim bohateho typoveho systemu a vrstvy skladatelnosti na WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT je jazyk pro definici rozhrani, ktery umoznuje komponentam deklarovat sve importy a exporty s bohatymi typy  -  retezce, zaznamy, seznamy, varianty, enumy  -  ne jen `i32` a `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 
127Nastroje jako `wit-bindgen` generuji jazykove specificke vazby ze souboru WIT. Komponenta v Rustu a komponenta v Pythonu si mohou vymenit retezce, zaznamy a seznamy pres WIT kontrakty, aniz by kterakoli strana znala implementacni jazyk druhe.
128 
129## Sestaveni prvniho WASM modulu s Rustem
130 
131Rust ma nejvyzralejsi WASM nastroje. Pojdme sestavit prakticky priklad: modul pro zpracovani obrazu bezici v prohlizeci.
132 
133### Nastaveni
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### Konfigurace 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### Napiste kod v Rustu
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### Sestaveni
223 
224```bash
225wasm-pack build --target web
226```
227 
228To vytvori adresar `pkg/` obsahujici:
229- `image_processor_bg.wasm`  -  zkompilovany WASM binarni soubor
230- `image_processor.js`  -  JavaScript propojovaci kod s TypeScript definicemi
231- `package.json`  -  pripraveny k publikaci na npm
232 
233### Pouziti v JavaScriptu
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 
286Klicovy poznatek: `imageData.data` je `Uint8ClampedArray` podporovany `ArrayBuffer`. Pri predani do WASM sdili stejnou pamet  -  zadne kopirovani. Funkce v Rustu modifikuje pixely na miste a strana JavaScriptu zmeny okamzite vidi.
287 
288## Nizsi uroven: manualni instanciace WASM
289 
290Pokud nechcete pouzivat `wasm-bindgen`, muzete instanciovat WASM moduly primo:
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 
307To je uzitecne, kdyz chcete minimalni rezii a nepotrebujete bohaty typovy interop.
308 
309## Vykon: WASM vs JavaScript
310 
311Realne benchmarky ukazuji vyznamna zrychleni pro vypocetne narocne ulohy CPU:
312 
313| Uloha | JavaScript | WASM | Zrychleni |
314|------|-----------|------|---------|
315| Zpracovani obrazu 4K | 180ms | 8ms (se SIMD) | 22x |
316| Zmena velikosti obrazu (4K) | 250ms | 45ms | 5,5x |
317| Fyzikalni simulace (10K entit) | Ztrata snimku | Plynulych 60fps | ~10x |
318| Parsovani JSON (velky payload) | 12ms | 3ms | 4x |
319| Kryptograficke hashovani | 45ms | 6ms | 7,5x |
320 
321WASM bezi na zhruba 95 % rychlosti nativniho kodu. Nejvetsi zisky pochazi z:
322- Predvidatelneho vykonu (zadne JIT zahrivani, zadne GC pauzy)
323- SIMD instrukci pro paralelni zpracovani dat
324- Primeho pristupu k pameti bez zasahu garbage collectoru
325 
326Kde WASM NENI rychlejsi: manipulace s DOM, male vypocty, I/O-bound ulohy. JavaScript je pro ne uz optimalizovany.
327 
328## Produkcni pripady pouziti
329 
330### Figma: vykreslovani vektoru v realnem case
331 
332Jadro vykreslovaciho engine Figmy je C++ zkompilovany do WASM. Kazdy tvar, gradient a efekt je vypocitan ve WASM a vykreslen na element Canvas. To umoznuje Figme zvladat slozite navrhy s tisici vrstvami pri 60fps v prohlizeci  -  vykon, ktery by v cistem JavaScriptu nebyl mozny.
333 
334### Adobe Photoshop na webu
335 
336Adobe portovalo klicove filtry a nastroje Photoshopu do WASM pomoci Rustu. Jejich benchmarky ukazuji zpracovani 4K obrazu za 22ms s WASM SIMD oproti 180ms v JavaScriptu  -  8nasobne zlepseni, ktere umoznuje nahledy filtru v realnem case.
337 
338### Cloudflare Workers
339 
340Cloudflare spousti WASM moduly v V8 izolatech na vice nez 330 edge lokacich. Studene starty jsou 1-5ms (ve srovnani se 100-500ms pro kontejnerovy serverless). V unoru 2026 nasadili inferenci Llama-3-8b napric svou edge siti pomoci WASM.
341 
342### Google Meet
343 
344Rozmazani pozadi a virtualni pozadi v Google Meet pouzivaji WASM se SIMD pro zpracovani videa v realnem case. WASM modul zpracovava kazdy snimek videa dostatecne rychle na udrzeni plynuleho videa pri 30fps.
345 
346## Podpora prohlizecu (2026)
347 
348| Funkce | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Plna | Plna | Plna | Plna |
351| Threads | Ano | Ano | Ano | Ano |
352| SIMD (128-bit) | Ano | Ano | Ano | Ano |
353| WasmGC | 119+ | 120+ | 18.2+ | Ano |
354| Exception Handling | Ano | Ano | Ano | Ano |
355| Memory64 | Ano | Ano | Castecna | Ano |
356 
357Vsechny hlavni prohlizece plne podporuji WASM. Novejsi funkce (WasmGC, Exception Handling) dosahly siroke dostupnosti.
358 
359## Prehled nastroju
360 
361| Nastroj | Ucel | Instalace |
362|------|---------|---------|
363| **wasm-pack** | Sestaveni Rustu do WASM, generovani npm balicku | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS interop vazby (pouzivano wasm-pack) | Zavislost v Cargo.toml |
365| **wasm-opt** | Optimalizace velikosti binarniho souboru (50%+ redukce) | Soucast Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generovani vazeb ze souboru WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Serverovy WASM runtime (referencni implementace WASI) | `brew install wasmtime` |
368| **Wasmer** | Alternativni WASM runtime s podporou WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Detekce funkci prohlizece za behu | `npm install wasm-feature-detect` |
370 
371### Optimalizace velikosti binarniho souboru
372 
373WASM binarni soubory mohou byt velke. Takto je zmensit:
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 
392Typicky Rust WASM modul se zmensi z 500KB pod 50KB s temito optimalizacemi.
393 
394## Plan pro zacatek
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## Zaver
420 
421WebAssembly uz neni experimentalni. Je to produkcni technologie pouzivana nekterymi z nejnarocnejsich aplikaci na webu. Vykon blizky nativnimu, zabezpeceni sandboxem a univerzalni prenositelnost  -  zadny jiny cil kompilace vam nedava vsechny tri.
422 
423Nemusite prepisovat celou aplikaci do WASM. Zacnete s jedinou vypocetne narocnou funkci  -  obrazovym filtrem, datovym parserem, fyzikalnim vypoctem  -  zkompilujte ji do WASM a zavolejte z JavaScriptu. Zmerte rozdil. Pak se rozhodnete, kde jeste muze WASM pomoci.
424 
425Nastroje jsou vyzrale, podpora prohlizecu je univerzalni a ekosystem roste. Pokud pisete v Rustu, jste uz jen jeden prikaz od prohlizece.
426 
427> **Kontrolni seznam pro zacatek:**
428>
429> - [x] Rust a wasm-pack nainstalovany
430> - [x] Prvni WASM modul sestaven a bezici v prohlizeci
431> - [x] JavaScript interop funguje (volani WASM z JS)
432> - [x] Vydani s optimalizacemi velikosti aplikovano
433> - [x] Vykon porovnan s ekvivalentem v cistem JavaScriptu
434> - [x] WASI prozkoumano s Wasmtime pro serverove pripady pouziti
435