1 
2WebAssembly (WASM) zaczal jako sposob na uruchamianie C++ w przegladarce. W 2026 roku dziala wszedzie  -  przegladarki, serwery, sieci edge, urzadzenia wbudowane  -  i napedza jedne z najbardziej wymagajacych aplikacji w sieci. Silnik renderujacy Figmy, Adobe Photoshop w wersji webowej, przetwarzanie wideo Google Meet i platforma obliczen edge Cloudflare  -  wszystko dziala na WebAssembly.
3 
4Chrome Platform Status podaje, ze WASM stanowi okolo 5,5% wszystkich zaladowan stron w Chrome na poczatku 2026 roku, w porownaniu z 4,5% rok wczesniej. Wraz z tym, ze WASM 3.0 zostal standardem W3C, a WASI dojrzewa w kierunku wersji 1.0, ekosystem osiagnal punkt zwrotny.
5 
6Ten przewodnik obejmuje wszystko, co musisz wiedziec, zeby zaczac budowac z WebAssembly.
7 
8## Czym jest WebAssembly?
9 
10WebAssembly to binarny format instrukcji zaprojektowany jako cel kompilacji. Piszesz kod w jezyku wysokiego poziomu (Rust, C, C++, Go, Kotlin), kompilujesz go do `.wasm` i uruchamiasz w dowolnym srodowisku posiadajacym runtime WASM  -  przegladarki, Node.js, Cloudflare Workers, Wasmtime lub 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 dziala
23 
24WASM to **maszyna wirtualna oparta na stosie**. Funkcje umieszczaja i pobieraja wartosci ze stosu operandow. Runtime hosta (V8 w Chrome, SpiderMonkey w Firefoksie) kompiluje JIT bajtkod WASM do natywnego kodu maszynowego, dlatego wydajnosc jest bliska natywnej.
25 
26Kluczowe cechy:
27 
28- **Wykonanie w piaskownicy**: moduly WASM moga uzyskac dostep tylko do zasobow, ktore host jawnie przyznaje. Brak dostepu do systemu plikow, sieci ani systemu operacyjnego, chyba ze zostanie to dozwolone. To fundamentalna roznica w porownaniu z kodem natywnym.
29- **Pamiec liniowa**: pojedynczy ciagly `ArrayBuffer` wspoldzielony miedzy WASM a hostem. Zlezone dane (stringi, struktury) sa przekazywane przez zapis do pamieci i udostepnienie wskaznika.
30- **Ograniczone typy**: WASM natywnie obsluguje tylko cztery typy: `i32`, `i64`, `f32`, `f64`. Wszystko inne (stringi, tablice, obiekty) wymaga kodowania przez pamiec liniowa lub Component Model.
31- **Przenosnosc**: ten sam plik binarny `.wasm` dziala na dowolnej platformie z runtime WASM, bez rekompilacji.
32 
33### WASM vs JavaScript
34 
35WASM nie zastepuje JavaScriptu. Uzupelnia go.
36 
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsowanie** | Parsowanie + kompilacja w runtime | Wstepnie skompilowany plik binarny, tylko dekodowanie |
40| **Szybkosc wykonania** | Zoptymalizowany JIT, zmienny | Blisko natywny, stalej jakosci |
41| **Start** | Szybki dla malych skryptow | Szybkie dekodowanie, przewidywalny |
42| **Dostep do DOM** | Bezposredni | Posredni (przez warstwe JS) |
43| **Najlepszy do** | UI, manipulacja DOM, obsluga zdarzen | Intensywne obliczenia CPU |
44| **Odsmiecanie pamieci** | Wbudowane | WasmGC (nowe) lub reczne |
45 
46Uzywaj JavaScriptu do pracy z UI i DOM. Uzywaj WASM do ciezkich obliczen: przetwarzanie obrazow, kodowanie wideo, symulacje fizyczne, kryptografia, parsowanie danych.
47 
48## WASM 3.0: co nowego
49 
50WebAssembly 3.0 zostal standardem W3C we wrzesniu 2025 roku, standaryzujac dziewiec funkcji, ktore byly rozwijane przez lata.
51 
52| Funkcja | Co umozliwia |
53|---------|----------------|
54| **WasmGC** | Natywne odsmiecanie pamieci w WASM. Jezyki zarzadzane (Java, Kotlin, Dart) moga kompilowac do WASM bez dolaczania wlasnego runtime GC. Obslugiwane w Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Natywne `try`/`catch` w WASM. Wczesniej wyjatki wymagaly kosztownych przejsc do JavaScriptu. |
56| **Tail Calls** | Umozliwia efektywna rekurencje bez przepelnienia stosu. Kluczowe dla jezykow funkcyjnych. |
57| **Relaxed SIMD** | 128-bitowe instrukcje wektorowe do rownoleglego przetwarzania danych. Umozliwia optymalizacje specyficzne dla sprzetu. |
58| **Memory64** | Przełamuje limit 4GB pamieci liniowej. Wymagane do przetwarzania danych na duza skale. |
59| **Multi-memory** | Wiele niezaleznych regionow pamieci w jednym module. |
60 
61Najbardziej przelomowy jest **WasmGC**. Wczesniej kompilacja Javy lub Kotlina do WASM oznaczala dolaczenie calego garbage collectora jako czesci pliku binarnego, co znacznie zwiększalo rozmiar plikow. Teraz wlasny GC przegladarki zarzadza pamiecia modulow WASM, tak jak robi to dla JavaScriptu.
62 
63## WASI: WebAssembly poza przegladarka
64 
65WASM w przegladarce jest potezny, ale **WASI (WebAssembly System Interface)** sprawia, ze WASM staje sie uniwersalnym runtime. WASI zapewnia znormalizowane interfejsy do zasobow systemowych  -  pliki, siec, zegary, liczby losowe  -  umozliwiajac uruchamianie modulow WASM poza przegladarka.
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 (obecne stabilne wydanie) definiuje nastepujace interfejsy:
84 
85- `wasi:filesystem`  -  operacje na plikach za pomoca uchwytow uprawnien (nie tradycyjnych deskryptorow plikow)
86- `wasi:sockets`  -  siec TCP/UDP
87- `wasi:http`  -  obsluga zadan/odpowiedzi HTTP
88- `wasi:clocks`  -  zegar scienny, zegar monotoniczny
89- `wasi:random`  -  kryptograficzna losowosc
90- `wasi:cli`  -  argumenty wiersza polecen, zmienne srodowiskowe, stdio
91 
92Kluczowa zasada to **bezpieczenstwo oparte na uprawnieniach**: modul WASM nie moze uzyskac dostepu do systemu plikow, chyba ze host jawnie przyznaje uchwyt do okreslonego katalogu. To sprawia, ze WASI jest fundamentalnie bezpieczniejszy niz uruchamianie natywnych plikow wykonywalnych.
93 
94### Droga do WASI 1.0
95 
96WASI 0.3.0 (dodajacy prymitywy async/wspolbieznosci) jest oczekiwany w 2026 roku, a WASI 1.0 ma nastapic potem. Glownym dodatkiem jest zintegrowane z jezykiem async z bezkopiowym strumieniowym I/O.
97 
98## Component Model
99 
100Podstawowe moduly WASM moga wymieniac tylko liczby. **Component Model** rozwiazuje to ograniczenie, dodajac bogaty system typow i warstwe kompozycji na szczycie WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT to jezyk definicji interfejsow, ktory pozwala komponentom deklarowac importy i eksporty z bogatymi typami  -  stringi, rekordy, listy, warianty, enumy  -  nie tylko `i32` i `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 
127Lancuchy narzedzi takie jak `wit-bindgen` generuja powiazania specyficzne dla jezyka z plikow WIT. Komponent w Rust i komponent w Pythonie moga wymieniac stringi, rekordy i listy poprzez kontrakty WIT, bez koniecznosci znajomosci jezyka implementacji drugiej strony.
128 
129## Budowanie pierwszego modulu WASM z Rust
130 
131Rust ma najbardziej dojrzale narzedzia WASM. Zbudujmy praktyczny przyklad: modul przetwarzania obrazow dzialajacy w przegladarce.
132 
133### Konfiguracja
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### Konfiguracja 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### Napisz kod 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### Budowanie
223 
224```bash
225wasm-pack build --target web
226```
227 
228To tworzy katalog `pkg/` zawierajacy:
229- `image_processor_bg.wasm`  -  skompilowany plik binarny WASM
230- `image_processor.js`  -  kod laczacy JavaScript z definicjami TypeScript
231- `package.json`  -  gotowy do publikacji w npm
232 
233### Uzycie w 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 
286Kluczowy wniosek: `imageData.data` to `Uint8ClampedArray` oparty na `ArrayBuffer`. Przy przekazywaniu do WASM wspoldziela te sama pamiec  -  bez kopiowania. Funkcja Rust modyfikuje piksele w miejscu, a strona JavaScript natychmiast widzi zmiany.
287 
288## Nizszy poziom: reczna instancjacja WASM
289 
290Jesli nie chcesz uzywac `wasm-bindgen`, mozesz bezposrednio tworzyc instancje modulow WASM:
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 
307Jest to przydatne, gdy chcesz minimalnego narzutu i nie potrzebujesz bogatego interop typow.
308 
309## Wydajnosc: WASM vs JavaScript
310 
311Rzeczywiste benchmarki pokazuja znaczne przyspieszenia dla zadan intensywnie obciazajacych CPU:
312 
313| Zadanie | JavaScript | WASM | Przyspieszenie |
314|------|-----------|------|---------|
315| Przetwarzanie obrazu 4K | 180ms | 8ms (z SIMD) | 22x |
316| Zmiana rozmiaru obrazu (4K) | 250ms | 45ms | 5,5x |
317| Symulacja fizyczna (10K obiektow) | Utrata klatek | Plynne 60fps | ~10x |
318| Parsowanie JSON (duzy payload) | 12ms | 3ms | 4x |
319| Hashowanie kryptograficzne | 45ms | 6ms | 7,5x |
320 
321WASM dziala z okolo 95% predkosci kodu natywnego. Najwieksze zyski wynikaja z:
322- Przewidywalnej wydajnosci (brak rozgrzewki JIT, brak pauz GC)
323- Instrukcji SIMD do rownoleglego przetwarzania danych
324- Bezposredniego dostepu do pamieci bez ingerencji garbage collectora
325 
326Gdzie WASM NIE jest szybszy: manipulacja DOM, male obliczenia, zadania ograniczone przez I/O. JavaScript jest juz do tego zoptymalizowany.
327 
328## Przypadki uzycia produkcyjnego
329 
330### Figma: renderowanie wektorow w czasie rzeczywistym
331 
332Glowny silnik renderujacy Figmy to C++ skompilowany do WASM. Kazdy ksztalt, gradient i efekt jest obliczany w WASM i rysowany na elemencie Canvas. Pozwala to Figmie obslugiwac zlozone projekty z tysiacami warstw przy 60fps w przegladarce  -  wydajnosc, ktora bylaby niemozliwa w czystym JavaScripcie.
333 
334### Adobe Photoshop w przegladarce
335 
336Adobe przenioslo kluczowe filtry i narzedzia Photoshopa do WASM przy uzyciu Rust. Ich benchmarki pokazuja przetwarzanie obrazu 4K w 22ms z WASM SIMD vs 180ms w JavaScripcie  -  8-krotna poprawa, ktora umozliwia podglad filtrow w czasie rzeczywistym.
337 
338### Cloudflare Workers
339 
340Cloudflare uruchamia moduly WASM w izolatach V8 w ponad 330 lokalizacjach edge. Zimne starty trwaja 1-5ms (w porownaniu ze 100-500ms dla serverless opartego na kontenerach). W lutym 2026 roku wdrozyli wnioskowanie Llama-3-8b w calej sieci edge przy uzyciu WASM.
341 
342### Google Meet
343 
344Rozmycie tla i wirtualne tla w Google Meet uzywaja WASM z SIMD do przetwarzania wideo w czasie rzeczywistym. Modul WASM przetwarza kazda klatke wideo wystarczajaco szybko, aby utrzymac plynne wideo przy 30fps.
345 
346## Obsluga przegladarek (2026)
347 
348| Funkcja | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Pelna | Pelna | Pelna | Pelna |
351| Threads | Tak | Tak | Tak | Tak |
352| SIMD (128-bit) | Tak | Tak | Tak | Tak |
353| WasmGC | 119+ | 120+ | 18.2+ | Tak |
354| Exception Handling | Tak | Tak | Tak | Tak |
355| Memory64 | Tak | Tak | Czesciowo | Tak |
356 
357Wszystkie glowne przegladarki w pelni obsluguja WASM. Nowsze funkcje (WasmGC, Exception Handling) osiagnely szeroka dostepnosc.
358 
359## Referencje narzedzi
360 
361| Narzedzie | Przeznaczenie | Instalacja |
362|------|---------|---------|
363| **wasm-pack** | Budowanie Rust do WASM, generowanie pakietow npm | `cargo install wasm-pack` |
364| **wasm-bindgen** | Powiazania interop Rust/JS (uzywane przez wasm-pack) | Zaleznosc w Cargo.toml |
365| **wasm-opt** | Optymalizacja rozmiaru pliku binarnego (50%+ redukcji) | Czesc Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generowanie powiazan z plikow WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Serwerowy runtime WASM (referencyjna implementacja WASI) | `brew install wasmtime` |
368| **Wasmer** | Alternatywny runtime WASM z obsluga WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Wykrywanie funkcji przegladarki w runtime | `npm install wasm-feature-detect` |
370 
371### Optymalizacja rozmiaru pliku binarnego
372 
373Pliki binarne WASM moga byc duze. Oto jak je zmniejszyc:
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 
392Typowy modul Rust WASM zmniejsza sie z 500KB do ponizej 50KB przy tych optymalizacjach.
393 
394## Plan dzialania na start
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## Podsumowanie
420 
421WebAssembly nie jest juz technologia eksperymentalna. To technologia produkcyjna uzywana przez jedne z najbardziej wymagajacych aplikacji w sieci. Wydajnosc bliska natywnej, bezpieczenstwo piaskownicy i uniwersalna przenosnosc  -  zaden inny cel kompilacji nie daje wszystkich trzech jednoczesnie.
422 
423Nie musisz przepisywac calej aplikacji w WASM. Zacznij od pojedynczej funkcji intensywnie obciazajacej CPU  -  filtra obrazu, parsera danych, obliczen fizycznych  -  skompiluj ja do WASM i wywolaj z JavaScriptu. Zmierz roznice. Potem zdecyduj, gdzie jeszcze WASM moze pomoc.
424 
425Narzedzia sa dojrzale, obsluga przegladarek jest uniwersalna, a ekosystem rosnie. Jesli piszesz w Rust, jestes juz o jedno polecenie od przegladarki.
426 
427> **Lista kontrolna na start:**
428>
429> - [x] Rust i wasm-pack zainstalowane
430> - [x] Pierwszy modul WASM zbudowany i uruchomiony w przegladarce
431> - [x] Interop z JavaScript dziala (wywoływanie WASM z JS)
432> - [x] Wersja release z optymalizacjami rozmiaru zastosowana
433> - [x] Wydajnosc porownana z odpowiednikiem w czystym JavaScripcie
434> - [x] WASI zbadane z Wasmtime dla przypadkow uzycia po stronie serwera
435