WebAssembly webfejlesztoknek: a nullatol a produkcioig

A WebAssembly (WASM) a C++ bongeszos futtatasi modjakent indult. 2026-ban mindenhol fut - bongeszok, szerverek, edge halozatok, beagyazott eszkozok - es a web legigenyesebb alkalmazasainak egy reszet hajtja. A Figma renderelo motorja, az Adobe Photoshop webes verzioja, a Google Meet videofeldolgozasa es a Cloudflare edge szamitasi platformja mind WebAssembly-n fut.

A Chrome Platform Status szerint a WASM a Chrome osszes oldalbetodesnek korulbelul 5,5%-at teszi ki 2026 elejen, szemben az egy evvel korabbi 4,5%-kal. Azzal, hogy a WASM 3.0 W3C szabvanynya valt es a WASI az 1.0-s verzio fele halad, az okoszisztema fordulopothoz ert.

Ez az utmutato mindent lefed, amit tudnod kell a WebAssembly-vel torteno fejleszteshez.

Mi az a WebAssembly?

A WebAssembly egy binaris utasitasformatum, amelyet kompilalasi celkent terveztek. Kodot irsz egy magas szintu nyelven (Rust, C, C++, Go, Kotlin), lefordotod .wasm-ra, es futtatod barmely kornyezetben, amelynek van WASM runtime-ja - bongeszok, Node.js, Cloudflare Workers, Wasmtime vagy Wasmer.

Hogyan mukodik

A WASM egy verem-alapu virtualis gep. A fuggvenyek ertekeket helyeznek el es vesznek le egy operandus veremrol. A gazdakornyezet runtime-ja (V8 a Chrome-ban, SpiderMonkey a Firefoxban) JIT-kompiljalja a WASM bytekodot nativ gepi kodra, ezert a teljesitmeny kozel nativ.

Fo jellemzok:

• Sandbox-olt vegrehajtasas: a WASM modulok csak azokat az eroforrasokat erhetik el, amelyeket a gazda kifejezetten biztosit. Nincs fajlrendszer-, halozat- vagy operacios rendszer-hozzaferes, hacsak nincs engedelyezve. Ez alapvetoen kulonbozik a nativ kodtol.
• Linearis memoria: egyetlen osszefuggo ArrayBuffer, amelyet a WASM es a gazda kozosen hasznal. Osszetett adatokat (stringek, strukturak) a memoriaba iras es egy pointer megosztas utjan adnak at.
• Korlatorozott tipusok: a WASM nativan csak negy tipust tamogat: i32, i64, f32, f64. Minden mas (stringek, tombok, objektumok) kodolast igenyel a linearis memorian vagy a Component Modelen keresztul.
• Hordozhatosag: ugyanaz a .wasm binaris fajl barmely WASM runtime-mal rendelkezo platformon fut, ujraforditas nelkul.

WASM vs JavaScript

A WASM nem helyettesiti a JavaScriptet. Kiegesziti azt.

Hasznald a JavaScriptet UI-hoz es DOM-munkakhoz. Hasznald a WASM-ot nehez szamitasokhoz: kepfeldolgozas, videokodolas, fizikai szimulciok, kriptografia, adatelemzes.

WASM 3.0: mi az uj

A WebAssembly 3.0 2025 szeptembereben valt W3C szabvannya, szabvanyositva kilenc funkcionaliast, amelyek evek ota fejlesztes alatt alltak.

A legjelentosebb a WasmGC. Korabban a Java vagy Kotlin WASM-ra forditasa egy teljes garbage collector szallitasat jelentette a binaris reszkent, ami felfujta a fajlmereteket. Most a bongeszo sajat GC-je kezeli a memoriakezelest a WASM moduloknal, ugyanugy, mint a JavaScriptnel.

WASI: WebAssembly a bongeszoon tul

A WASM a bongeszobren hatamas, de a WASI (WebAssembly System Interface) az, ami a WASM-ot univerzalis runtime-ma teszi. A WASI szabvanyositott interfeszeket biztosit a rendszer eroforrasokhoz - fajlok, halozat, orak, veletlen szamok - lehetove teve a WASM modulok futtatast a bongeszoon kivul.

A WASI Preview 2 (a jelenlegi stabil kiadas) a kovetkezo interfeszeket definilja:

• wasi:filesystem - fajlmuveletek capability handle-okon keresztul (nem hagyomanyos fajlleirok)
• wasi:sockets - TCP/UDP halozat
• wasi:http - HTTP keres/valasz kezeles
• wasi:clocks - faliora, monoton ora
• wasi:random - kriptografiai veletlen
• wasi:cli - parancssori argumentumok, kornyezeti valtozok, stdio

A fo elv a kepeessegalapua biztonsag: egy WASM modul nem ferhet hozza a fajlrendszerhez, hacsak a gazda kifejezetten nem biztosit egy handle-t egy adott konyvtarhoz. Ez a WASI-t alapvetoen biztonsagosabba teszi, mint a nativ futtathato fajlok futtatasa.

Az ut a WASI 1.0-hoz

A WASI 0.3.0 (async/egyidejuseg primitivek hozzaadasaval) 2026-ban varhato, a WASI 1.0 ezutan kovetkezik. A fo ujitas a nyelvbe integralt async nulla masolasu streaming I/O-val.

A Component Model

Az alap WASM modulok csak szamokat tudnak cserelni. A Component Model megoldja ezt a korlatorzast egy gazdag tipusrendszer es egy kompoziciod reteg hozzaadasaval a WASM fole.

WIT (WebAssembly Interface Types)

A WIT egy interfeszdefincios nyelv, amely lehetove teszi a komponensek szamara, hogy importjaikat es exportjaikat gazdag tipusokkal deklaraljak - stringek, rekordok, listak, variansok, enumok - nem csak i32 es 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;
}

Az eszkozlancok, mint a wit-bindgen, nyelvspecifikus koteseket generalnak WIT fajlokbol. Egy Rust komponens es egy Python komponens WIT szerzodedeken keresztul cserelhet stringeket, rekordokat es listakat anelkul, hogy barmely oldal ismernenek a masik implementacios nyelvet.

Az elso WASM modulod epitese Rusttal

A Rust rendelkezik a legertebb WASM eszkozokkel. Epitstunk egy gyakorlati peldat: egy kepfeldolgozo modult, amely a bongeszobren fut.

Beallitas

# 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

Cargo.toml konfiguracio

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

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

[dependencies]
wasm-bindgen = "0.2"

Ird meg a Rust kodot

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

Forditas

wasm-pack build --target web

Ez letrehoz egy pkg/ konyvtarat a kovetkezokkel:

• image_processor_bg.wasm - a leforditott WASM binaris
• image_processor.js - JavaScript ragasztokod TypeScript definiciokkal
• package.json - kesz az npm-re torteno publikalasra

Hasznalat JavaScriptben

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

A legfontosabb felismeres: az imageData.data egy Uint8ClampedArray, amelyet egy ArrayBuffer tamogat. Amikor WASM-nak adjuk at, ugyanazt a memoriat osztozik - nincs masolas. A Rust fuggveny helyben modositja a pixeleket, es a JavaScript oldal azonnal latja a valtozasokat.

Alacsonyabb szint: manualis WASM peldanyositas

Ha nem szeretned a wasm-bindgen-t hasznalni, kozvetlenul peldanyosithatod a WASM modulokat:

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

Ez akkor hasznos, ha minimalis terhelest szeretnel es nincs szukseged gazdag tipusu interop-ra.

Teljesitmeny: WASM vs JavaScript

A valos benchmarkok jelentos gyorsulast mutatnak a CPU-intenziv feladatoknal:

A WASM a nativ kod sebesseegenek korulbelul 95%-an fut. A legnagyobb nyeresegek a kovetkezokbol szarmaznak:

• Kiszamithato teljesitmeny (nincs JIT bemeleges, nincsenek GC szunetek)
• SIMD utasitasok parhuzamos adatfeldolgozashoz
• Kozvetlen memoriaeleres garbage collector behatolas nelkul

Ahol a WASM NEM gyorsabb: DOM manipulacio, kis szamitasok, I/O-korlatos feladatok. A JavaScript mar ezekre optimalizalt.

Produkcis felhasznalasi esetek

Figma: valos ideju vektor rendereles

A Figma renderlelo motorja C++ WASM-ra forditva. Minden alakzatot, gradienst es effektust a WASM-ban szamit ki es egy Canvas elemre rajzol. Ez lehetove teszi a Figma szamara, hogy osszetett terveket kezeljen ezer retegge 60fps-sel a bongeszobren - olyan teljesitmeny, ami tiszta JavaScriptben lehetetlen lenne.

Adobe Photoshop a weben

Az Adobe a Photoshop kulcsfontossagu szuroit es eszkozoit Rusttal portolta WASM-ra. Benchmarkjaik 4K kepfeldolgozast mutatnak 22ms alatt WASM SIMD-del szemben 180ms JavaScriptben - 8-szoros javulas, ami lehetove teszi a valos ideju szuro elozeteseket.

Cloudflare Workers

A Cloudflare WASM modulokat futtat V8 izolatumokban 330+ edge helyszinen. A hideg indulasok 1-5ms-osak (szemben a kontener-alapu serverless 100-500ms-os inditasaval). 2026 februarjaban Llama-3-8b kovetkeztetest vetettek be az egesz edge halozatukra WASM segitsegevel.

Google Meet

A hatter elmosasa es a virtualis hatterek a Google Meetben WASM-ot hasznalnak SIMD-del valos ideju videofeldolgozashoz. A WASM modul minden egyes videokepkockat eleg gyorsan dolgoz fel a folyamatos 30fps-es video fenntartasahoz.

Bongeszo tamogatas (2026)

Az osszes fo bongeszo teljesen tamogatja a WASM-ot. Az ujabb funkciok (WasmGC, Exception Handling) szeles elerhetsoseget ertek el.

Eszkozhivatkozas

Binaris meret optimalizalasa

A WASM binarisok nagyok lehetnek. Igy csokkentheted oket:

# 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

Egy tipikus Rust WASM modul 500KB-rol 50KB ala csokkente ezekkel az optimalizaciokkal.

Kezdesi utiterv

Osszegzes

A WebAssembly mar nem kiserleti. Ez egy produkcis technologia, amelyet a web legigenyesebb alkalmazasai hasznalnak. Kozel nativ teljesitmeny, sandbox biztonsag es univerzalis hordozhatosag - egyetlen mas kompilaciaos cel sem nyujtja mindhaarmat.

Nem kell az egesz alkalmazasodat WASM-ban ujrairnod. Kezdd egyetlen CPU-intenziv fuggvennyel - egy kepszurovel, egy adatelemzovel, egy fizikai szamitassal - forditsd le WASM-ra, es hivd meg JavaScriptbol. Merd meg a kulonbseget. Aztan dontsd el, hol segithet meg a WASM.

Az eszkozok erettek, a bongeszo tamogatas univerzalis, es az okoszisztema noevekszik. Ha Rustban irsz, mar csak egy parancs valaszt el a bongeszetol.

Kezdesi ellenorzo lista:

• Rust es wasm-pack telepitve
• Elso WASM modul megepitve es fut a bongeszobren
• JavaScript interop mukodik (WASM hivas JS-bol)
• Kiadasi build meretoptimalizaciokkal alkalmazva
• Teljesitmeny osszevetve a tiszta JavaScript megfelelovel
• WASI feldeitve Wasmtime-mal szerveroldali felhasznalasi esetekhez