1~
2A 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.
3~
4A 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.
5~
6Ez az utmutato mindent lefed, amit tudnod kell a WebAssembly-vel torteno fejleszteshez.
7~
8## Mi az a WebAssembly?
9~
10A 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.
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### Hogyan mukodik
23~
24A 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.
25~
26Fo jellemzok:
27~
28- **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.
29- **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.
30- **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.
31- **Hordozhatosag**: ugyanaz a `.wasm` binaris fajl barmely WASM runtime-mal rendelkezo platformon fut, ujraforditas nelkul.
32~
33### WASM vs JavaScript
34~
35A WASM nem helyettesiti a JavaScriptet. Kiegesziti azt.
36~
37| Szempont | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Elemzes** | Elemzes + forditas futtataskor | Elore leforditott binaris, csak dekodolas |
40| **Vegrehajtas sebessege** | JIT-optimalizalt, valtozo | Kozel nativ, konzisztens |
41| **Indulas** | Gyors kis scripteknel | Gyors dekodolas, kiszamithato |
42| **DOM hozzaferes** | Kozvetlen | Kozvetett (JS ragasztokodon keresztul) |
43| **Legjobb** | UI, DOM manipulacio, esemenykezeles | CPU-intenziv szamitasok |
44| **Szemetetgyujtes** | Beepitett | WasmGC (uj) vagy manualis |
45~
46Hasznald a JavaScriptet UI-hoz es DOM-munkakhoz. Hasznald a WASM-ot nehez szamitasokhoz: kepfeldolgozas, videokodolas, fizikai szimulciok, kriptografia, adatelemzes.
47~
48## WASM 3.0: mi az uj
49~
50A WebAssembly 3.0 2025 szeptembereben valt W3C szabvannya, szabvanyositva kilenc funkcionaliast, amelyek evek ota fejlesztes alatt alltak.
51~
52| Funkcionalitas | Mit tesz lehetove |
53|---------|----------------|
54| **WasmGC** | Nativ szemetetgyujtes a WASM-ban. A kezelt nyelvek (Java, Kotlin, Dart) WASM-ra fordithatoak anelkul, hogy sajat GC runtime-ot kellene szallitaniuk. Tamogatott Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Nativ `try`/`catch` a WASM-ban. Korabban a kivetelek koltsegos korutakat igenyaltek a JavaScripthez. |
56| **Tail Calls** | Hatekony rekurziot tesz lehetove veremtulcsordulas nelkul. Kritikus a funkcionalis nyelveknel. |
57| **Relaxed SIMD** | 128 bites vektor utasitasok parhuzamos adatfeldolgozashoz. Hardver-specifikus optimalizaciokat tesz lehetove. |
58| **Memory64** | Atlepi a 4GB linearis memoria korlatot. Szukseges a nagyszabasu adatfeldolgozashoz. |
59| **Multi-memory** | Tobb fuggetlen memoria regio egyetlen modulban. |
60~
61A 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.
62~
63## WASI: WebAssembly a bongeszoon tul
64~
65A 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.
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~
83A WASI Preview 2 (a jelenlegi stabil kiadas) a kovetkezo interfeszeket definilja:
84~
85- `wasi:filesystem`  -  fajlmuveletek capability handle-okon keresztul (nem hagyomanyos fajlleirok)
86- `wasi:sockets`  -  TCP/UDP halozat
87- `wasi:http`  -  HTTP keres/valasz kezeles
88- `wasi:clocks`  -  faliora, monoton ora
89- `wasi:random`  -  kriptografiai veletlen
90- `wasi:cli`  -  parancssori argumentumok, kornyezeti valtozok, stdio
91~
92A 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.
93~
94### Az ut a WASI 1.0-hoz
95~
96A 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.
97~
98## A Component Model
99~
100Az 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.
101~
102### WIT (WebAssembly Interface Types)
103~
104A 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`.
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~
127Az 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.
128~
129## Az elso WASM modulod epitese Rusttal
130~
131A Rust rendelkezik a legertebb WASM eszkozokkel. Epitstunk egy gyakorlati peldat: egy kepfeldolgozo modult, amely a bongeszobren fut.
132~
133### Beallitas
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### Cargo.toml konfiguracio
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### Ird meg a Rust kodot
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### Forditas
223~
224```bash
225wasm-pack build --target web
226```
227~
228Ez letrehoz egy `pkg/` konyvtarat a kovetkezokkel:
229- `image_processor_bg.wasm`  -  a leforditott WASM binaris
230- `image_processor.js`  -  JavaScript ragasztokod TypeScript definiciokkal
231- `package.json`  -  kesz az npm-re torteno publikalasra
232~
233### Hasznalat JavaScriptben
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~
286A 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.
287~
288## Alacsonyabb szint: manualis WASM peldanyositas
289~
290Ha nem szeretned a `wasm-bindgen`-t hasznalni, kozvetlenul peldanyosithatod a WASM modulokat:
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~
307Ez akkor hasznos, ha minimalis terhelest szeretnel es nincs szukseged gazdag tipusu interop-ra.
308~
309## Teljesitmeny: WASM vs JavaScript
310~
311A valos benchmarkok jelentos gyorsulast mutatnak a CPU-intenziv feladatoknal:
312~
313| Feladat | JavaScript | WASM | Gyorsulas |
314|------|-----------|------|---------|
315| 4K kepfeldolgozas | 180ms | 8ms (SIMD-del) | 22x |
316| Kepatmeretezs (4K) | 250ms | 45ms | 5,5x |
317| Fizikai szimulacio (10K entitas) | Kepkocka-kieses | Folyekony 60fps | ~10x |
318| JSON elemzes (nagy payload) | 12ms | 3ms | 4x |
319| Kriptografiai haseles | 45ms | 6ms | 7,5x |
320~
321A WASM a nativ kod sebesseegenek korulbelul 95%-an fut. A legnagyobb nyeresegek a kovetkezokbol szarmaznak:
322- Kiszamithato teljesitmeny (nincs JIT bemeleges, nincsenek GC szunetek)
323- SIMD utasitasok parhuzamos adatfeldolgozashoz
324- Kozvetlen memoriaeleres garbage collector behatolas nelkul
325~
326Ahol a WASM NEM gyorsabb: DOM manipulacio, kis szamitasok, I/O-korlatos feladatok. A JavaScript mar ezekre optimalizalt.
327~
328## Produkcis felhasznalasi esetek
329~
330### Figma: valos ideju vektor rendereles
331~
332A 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.
333~
334### Adobe Photoshop a weben
335~
336Az 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.
337~
338### Cloudflare Workers
339~
340A 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.
341~
342### Google Meet
343~
344A 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.
345~
346## Bongeszo tamogatas (2026)
347~
348| Funkcionalitas | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Teljes | Teljes | Teljes | Teljes |
351| Threads | Igen | Igen | Igen | Igen |
352| SIMD (128-bit) | Igen | Igen | Igen | Igen |
353| WasmGC | 119+ | 120+ | 18.2+ | Igen |
354| Exception Handling | Igen | Igen | Igen | Igen |
355| Memory64 | Igen | Igen | Reszleges | Igen |
356~
357Az osszes fo bongeszo teljesen tamogatja a WASM-ot. Az ujabb funkciok (WasmGC, Exception Handling) szeles elerhetsoseget ertek el.
358~
359## Eszkozhivatkozas
360~
361| Eszkoz | Cel | Telepites |
362|------|---------|---------|
363| **wasm-pack** | Rust forditasa WASM-ra, npm csomagok generalasa | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS interop kotesek (wasm-pack hasznalja) | Fuggoseg a Cargo.toml-ban |
365| **wasm-opt** | Binaris meret optimalizalas (50%+ csokkenes) | A Binaryen resze: `brew install binaryen` |
366| **wit-bindgen** | Kotesek generalasa WIT fajlokbol | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Szerveroldali WASM runtime (referencia WASI implementacio) | `brew install wasmtime` |
368| **Wasmer** | Alternativ WASM runtime WASI tamogatassal | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Bongeszo funkciok futasideju eszlelese | `npm install wasm-feature-detect` |
370~
371### Binaris meret optimalizalasa
372~
373A WASM binarisok nagyok lehetnek. Igy csokkentheted oket:
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~
392Egy tipikus Rust WASM modul 500KB-rol 50KB ala csokkente ezekkel az optimalizaciokkal.
393~
394## Kezdesi utiterv
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## Osszegzes
420~
421A 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.
422~
423Nem 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.
424~
425Az eszkozok erettek, a bongeszo tamogatas univerzalis, es az okoszisztema noevekszik. Ha Rustban irsz, mar csak egy parancs valaszt el a bongeszetol.
426~
427> **Kezdesi ellenorzo lista:**
428>
429> - [x] Rust es wasm-pack telepitve
430> - [x] Elso WASM modul megepitve es fut a bongeszobren
431> - [x] JavaScript interop mukodik (WASM hivas JS-bol)
432> - [x] Kiadasi build meretoptimalizaciokkal alkalmazva
433> - [x] Teljesitmeny osszevetve a tiszta JavaScript megfelelovel
434> - [x] WASI feldeitve Wasmtime-mal szerveroldali felhasznalasi esetekhez
435~