WebAssembly pro webove vyvojare: od nuly k produkci

WebAssembly (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.

Chrome 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.

Tento pruvodce pokryva vse, co potrebujete vedet, abyste mohli zacit stavet s WebAssembly.

Co je WebAssembly?

WebAssembly 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.

Jak to funguje

WASM 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.

Klicove vlastnosti:

• 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.
• Linearni pamet: jeden souvisly ArrayBuffer sdileny mezi WASM a hostitelem. Slozita data (retezce, struktury) se predavaji zapisem do pameti a sdilenim ukazatele.
• 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.
• Prenositelnost: stejny binarni soubor .wasm bezi na jakekoli platforme s WASM runtime, bez rekompilace.

WASM vs JavaScript

WASM nenahrazuje JavaScript. Doplnuje ho.

Pouzivejte JavaScript pro praci s UI a DOM. Pouzivejte WASM pro narocne vypocty: zpracovani obrazu, kodovani videa, fyzikalni simulace, kryptografie, parsovani dat.

WASM 3.0: co je noveho

WebAssembly 3.0 se stal standardem W3C v zari 2025 a standardizoval devet funkci, ktere byly vyvijeny po leta.

Nejvyznamnejsi 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.

WASI: WebAssembly mimo prohlizec

WASM 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.

WASI Preview 2 (soucasne stabilni vydani) definuje tato rozhrani:

• wasi:filesystem - souborove operace pres capability handles (ne tradicni deskriptory souboru)
• wasi:sockets - TCP/UDP sitovani
• wasi:http - zpracovani HTTP pozadavku/odpovedi
• wasi:clocks - nastenne hodiny, monotonicke hodiny
• wasi:random - kryptograficka nahodnost
• wasi:cli - argumenty prikazoveho radku, promenne prostredi, stdio

Klicovym 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.

Cesta k WASI 1.0

WASI 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.

Component Model

Zakladni WASM moduly mohou vymenit pouze cisla. Component Model resi toto omezeni pridanim bohateho typoveho systemu a vrstvy skladatelnosti na WASM.

WIT (WebAssembly Interface Types)

WIT 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.

// 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;
}

Nastroje 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.

Sestaveni prvniho WASM modulu s Rustem

Rust ma nejvyzralejsi WASM nastroje. Pojdme sestavit prakticky priklad: modul pro zpracovani obrazu bezici v prohlizeci.

Nastaveni

# 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

Konfigurace Cargo.toml

[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Napiste kod v Rustu

// 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
}

Sestaveni

wasm-pack build --target web

To vytvori adresar pkg/ obsahujici:

• image_processor_bg.wasm - zkompilovany WASM binarni soubor
• image_processor.js - JavaScript propojovaci kod s TypeScript definicemi
• package.json - pripraveny k publikaci na npm

Pouziti v JavaScriptu

<!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>

Klicovy 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.

Nizsi uroven: manualni instanciace WASM

Pokud nechcete pouzivat wasm-bindgen, muzete instanciovat WASM moduly primo:

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

To je uzitecne, kdyz chcete minimalni rezii a nepotrebujete bohaty typovy interop.

Vykon: WASM vs JavaScript

Realne benchmarky ukazuji vyznamna zrychleni pro vypocetne narocne ulohy CPU:

WASM bezi na zhruba 95 % rychlosti nativniho kodu. Nejvetsi zisky pochazi z:

• Predvidatelneho vykonu (zadne JIT zahrivani, zadne GC pauzy)
• SIMD instrukci pro paralelni zpracovani dat
• Primeho pristupu k pameti bez zasahu garbage collectoru

Kde WASM NENI rychlejsi: manipulace s DOM, male vypocty, I/O-bound ulohy. JavaScript je pro ne uz optimalizovany.

Produkcni pripady pouziti

Figma: vykreslovani vektoru v realnem case

Jadro 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.

Adobe Photoshop na webu

Adobe 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.

Cloudflare Workers

Cloudflare 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.

Google Meet

Rozmazani 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.

Podpora prohlizecu (2026)

Vsechny hlavni prohlizece plne podporuji WASM. Novejsi funkce (WasmGC, Exception Handling) dosahly siroke dostupnosti.

Prehled nastroju

Optimalizace velikosti binarniho souboru

WASM binarni soubory mohou byt velke. Takto je zmensit:

# 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

Typicky Rust WASM modul se zmensi z 500KB pod 50KB s temito optimalizacemi.

Plan pro zacatek

Zaver

WebAssembly 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.

Nemusite 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.

Nastroje jsou vyzrale, podpora prohlizecu je univerzalni a ekosystem roste. Pokud pisete v Rustu, jste uz jen jeden prikaz od prohlizece.

Kontrolni seznam pro zacatek:

• Rust a wasm-pack nainstalovany
• Prvni WASM modul sestaven a bezici v prohlizeci
• JavaScript interop funguje (volani WASM z JS)
• Vydani s optimalizacemi velikosti aplikovano
• Vykon porovnan s ekvivalentem v cistem JavaScriptu
• WASI prozkoumano s Wasmtime pro serverove pripady pouziti