WebAssembly gia Web Developers: Apo to miden stin paragogi

To WebAssembly (WASM) xekinise os enas tropos gia na ekteleite C++ ston browser. To 2026, trexei pantoy - browsers, servers, edge diktya, ensomates syskeves - kai trofoditei merikes apo tis pio apaitiikies efarmoges sto web. I mixani renderarismatos tis Figma, to Adobe Photoshop sto web, i epexergasia video toy Google Meet kai i platforma edge computing toy Cloudflare - ola trexoyn se WebAssembly.

To Chrome Platform Status deixnei oti to WASM vriskete sto peripoy 5,5% olon ton fortoseon selidas sto Chrome stis arxes toy 2026, apo 4,5% ton proigoymeno xrono. Me to WASM 3.0 na ginete protypo W3C kai to WASI na orimzei pros tin ekdosi 1.0, to oikosystima exei ftasei se simio kampes.

Aftos o odigos kalyptei ola osa prepei na gnorixeis gia na arxiseis na chtizeis me WebAssembly.

Ti einai to WebAssembly?

To WebAssembly einai ena binario format odigion sxediasmenoo os stoxos syllogis. Grafeis kodika se glossa ypssiiloy epipedoy (Rust, C, C++, Go, Kotlin), ton metafraxeis se .wasm kai ton ekteleis se opoidipote perivvalon poy exei WASM runtime - browsers, Node.js, Cloudflare Workers, Wasmtime i Wasmer.

Pos leitoyrgei

To WASM einai mia virtual machine vasiismeni se stoiva. Oi synartiseis topothethyn kai afairoun times apo mia stoiva telesion. To runtime toy filoxenoynte (V8 sto Chrome, SpiderMonkey sto Firefox) kanei JIT-compilation to WASM bytecode se gennimeno kodika mixanis, gi afto i apodosi einai konta sto native.

Vasika xaraktiristika:

• Ektelesei se sandbox: ta WASM modules mporoun na exoun prosvasi mono sta resources poy o filoxenonteas parexei riita. Den yparxei prosvasi se filesystem, diktyo i leitourgiko systima ektos an epitrapei. Afto einai thimelioddoos diaforetiko apo ton native kodika.
• Grammmiki mnimi: enas monos synexis ArrayBuffer poy mirazetai metaxy WASM kai filoxenoynte. Syntheta dedomena (strings, structs) metaferontai me egrafi sti mnimi kai koinopoiisi deikti.
• Periorismeni typoi: to WASM ypostirixei native mono tessera types: i32, i64, f32, f64. Ola ta alla (strings, arrays, objects) apaytoun kodikopiiisi mesa apo ti grammiki mnimi i to Component Model.
• Fornitotita: to idio .wasm binary trexei se opoiadipote platforma me WASM runtime, xoris epanametafrasi.

WASM vs JavaScript

To WASM den antikathistaa tin JavaScript. Ti symplirorei.

Xrisimopiiise JavaScript gia UI kai DOM ergasia. Xrisimopiiise WASM gia varous ypologismous: epexergasia eikonon, kodikopiiisi video, fysikes proomoioseis, kryptografia, analysi dedomenon.

WASM 3.0: Ti neo yparxei

To WebAssembly 3.0 egine protypo W3C ton Septemvrio 2025, typopoiontas ennea xaraktiristika poy itan ypo anaptyksi gia xronia.

To pio simaantiko einai to WasmGC. Prin apo afto, i metafrasi Java i Kotlin se WASM siimaine apostoli enos olokliiroy garbage collector os meros toy binary, poy foyskone ta megethi arxeion. Tora o idios GC toy browser diaxeirizetai ti diaxeirisi mniimis gia ta WASM modules, opos akriviis kanei gia ti JavaScript.

WASI: WebAssembly pera apo ton browser

To WASM ston browser einai dynato, alla to WASI (WebAssembly System Interface) einai afto poy kanei to WASM enan pagkosmio runtime. To WASI parexei typopoiimenes diepafes gia poroys systimatos - arxeia, diktyo, roloia, tyxaioys arithmous - epitrepontas sta WASM modules na trexoun exo apo ton browser.

To WASI Preview 2 (i trexousa statheri ekdosi) orixei tis akloythes diepafes:

• wasi:filesystem - leitoyrgies arxeion meso capability handles (oxi paradosiakous file descriptors)
• wasi:sockets - TCP/UDP diktyo
• wasi:http - diaxirisi HTTP request/response
• wasi:clocks - roloi toixoy, monotonico roloi
• wasi:random - kryptografiki tyxaiotita
• wasi:cli - orismmata grammis entoloon, perivallontiikes metavlites, stdio

I vasiki arxi einai i asfaleia vasismeni se dynamotites: ena WASM module den mporei na exei prosvasi sto filesystem ektos an o filoxenonteas parexei riita ena handle se sygkekrimeno fakelo. Afto kanei to WASI thymelioddoos asfalessteroo apo tin ektelesei gennimennon ektelessimon arxeion.

I poreia pros to WASI 1.0

To WASI 0.3.0 (prosthiiki async/symplektikon primitiivon) anameenetai to 2026, me to WASI 1.0 na akoloythei. I kyria prosthiki einai to glossiika ensoomatoomeno async me zero-copy streaming I/O.

To Component Model

Ta vasika WASM modules mporoyn na atallaaxoun mono arithmoys. To Component Model lyni afton ton periorismo prosthetondas ena plousio systima typon kai ena epipedo synthetotitas pano apo to WASM.

WIT (WebAssembly Interface Types)

To WIT einai mia glossa orismoy diepafon poy epitrepei sta components na dilosoun ta imports kai exports tous me ploysious typous - strings, records, lists, variants, enums - oxi mono i32 kai 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;
}

Ergaleia opos to wit-bindgen paragoun glossikes syndeseis apo arxeia WIT. Ena Rust component kai ena Python component mporoyn na antalaaxoun strings, records kai lists meso WIT contracts xoris kamia pleyra na gnorixei ti glossa ylpoiisis tis allis.

Xtiismo toy protoy WASM module soy me Rust

I Rust exei ta pio orimma ergaleia WASM. As chtisoyame ena praktiko paradeigma: ena module epexergasias eikonon poy trexei ston browser.

Ryhthmisi

# 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

Ryhthmisi Cargo.toml

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

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

[dependencies]
wasm-bindgen = "0.2"

Grapse ton kodika Rust

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

Chtismo

wasm-pack build --target web

Afto dimiourgei enan katalogo pkg/ me:

• image_processor_bg.wasm - to metafrasmeno WASM binary
• image_processor.js - JavaScript glue code me TypeScript definitions
• package.json - etoimo gia dimosieysi sto npm

Xrisi se JavaScript

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

To vasiko symperasma: to imageData.data einai ena Uint8ClampedArray poy ypostirixetai apo ena ArrayBuffer. Otan perasetai sto WASM, moirazetai tin idia mnimi - xoris antigrafi. I synartisi Rust tropopoiei ta pixels epi topoy, kai i pleyra JavaScript vlepei tis allages amesa.

Xamilitero epipedo: xeirokiiiti dimioyrgia WASM

An den theleis na xrisimopiiiseis to wasm-bindgen, mporeis na dimioyrgiiseis WASM modules apefthias:

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

Afto einai xrisimo otan theleis elaxisto overhead kai den xreiaresai ploysio type interop.

Apodosi: WASM vs JavaScript

Pragmatika benchmarks deixnoun simantiikes epiditaxynsis gia CPU-inteniis ergasies:

To WASM trexei sto peripoy 95% tis taxytitas toy native kodika. Ta megalitera kerdi provainoun apo:

• Provlepsimi apodosi (xoris JIT warmup, xoris GC pauses)
• SIMD odigies gia parallili epexergasia dedomenon
• Amesi prosvasi sti mnimi xoris paremvasi garbage collector

Opoy to WASM DEN einai grigoritero: DOM manipulation, mikres ypologismoi, I/O-bound ergasies. I JavaScript einai idi veltiomeni gi afta.

Periptoseis xrisis stin paragogi

Figma: Renderarisma vectors se pragmatiko xrono

I kyria mixani renderarismatos tis Figma einai C++ metafrasmeni se WASM. Kathe sxima, gradient kai efekt ypologizetai sto WASM kai ixnografeite se ena Canvas element. Afto epitrepei sti Figma na diaxeirizetai sintheta sxedia me xiliades layers sta 60fps ston browser - apodosi poy tha itan adynati se kathara JavaScript.

Adobe Photoshop sto web

I Adobe metafere ta vasika filtra kai ergaleia toy Photoshop se WASM xrisimopoionteas Rust. Ta benchmarks tous deixnoun epexergasia eikonas 4K se 22ms me WASM SIMD enanti 180ms se JavaScript - mia 8x veltioosi poy kanei dynati tin pragmatikou xronou proepiskopisi filtron.

Cloudflare Workers

To Cloudflare trexei WASM modules se V8 isolates se 330+ edge topothesies. Ta kria starts einai 1-5ms (se sygrisi me 100-500ms gia container-based serverless). Ton Fevrouario 2026, anaptixxan inference Llama-3-8b se olo to edge diktyo tous xrisimopoionteas WASM.

Google Meet

To tholoma fontoy kai ta virtual backgrounds sto Google Meet xrisimopoioun WASM me SIMD gia epexergasia video se pragmatiko xrono. To WASM module epexergazetai kathe frame video arketa grigora gia na diatirei omalo video sta 30fps.

Ypostirixi browser (2026)

Oloi oi kyrioi browsers ypostirixoun pliros to WASM. Ta neotera xaraktiristika (WasmGC, Exception Handling) exoun ftasei se eyreia diathesimotita.

Anafora ergaleion

Veltiostopiiisi megethous binary

Ta WASM binaries mporoyn na einai megala. Na pos ta mikroyneis:

# 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

Ena typiko Rust WASM module paei apo 500KB se kato apo 50KB me aftes tis veltiostopiiiseis.

Xartis poreias gia xekinima

Symperasma

To WebAssembly den einai pia peiramatiko. Einai mia technologia paragogis poy xrisimopoieitai apo merikes apo tis pio apaitiitikes efarmoges sto web. Apodosi konta sti natiive, asfaleia sandboxed kai pagkosmia fornitotita - kanenas allos stoxos syllogis den soy dinei kai ta tria.

Den xreiazetai na xanagrapsis olis tin efarmogi soy se WASM. Arxise me mia moni CPU-intenii synartisi - ena filtro eikonas, enan analyti dedomenon, enan fysiko ypologismo - metafrase tin se WASM kai kalese tin apo JavaScript. Metrise ti diafora. Meta apofasise poy alloy mporei na voithisei to WASM.

Ta ergaleia einai orimma, i ypostirixi browser einai pagkosmia, kai to oikosystima megalononei. An grafeis Rust, eisai idi mia entoli makria apo ton browser.

Lista elegxoy gia xekinima:

• Rust kai wasm-pack egatastimena
• Proto WASM module xtismeno kai trexei ston browser
• JavaScript interop leitourgei (klisi WASM apo JS)
• Release build me veltiostopiiiseis megethous efarmosmenees
• Apodosi axiologimeni enanti katharoy JavaScript isodinamoy
• WASI exerevnimeno me Wasmtime gia server-side periptoseis xrisis