WebAssembly dlia veb-rozrobnykiv: vid nulia do prodakshenu

WebAssembly (WASM) pochynavsia yak sposib zapusku C++ u brauzeri. U 2026 rotsi vin pratsiuie skriz' - brauzery, servery, edge-merezhi, vbudovani prystroi - i zabezpechuie robotu deiakykh z naivymohlyvishykh zastosunkiv u vebi. Rukhivok renderynhu Figma, Adobe Photoshop u vebi, obrobka video Google Meet ta platforma edge-obchyslen Cloudflare - vse pratsiuie na WebAssembly.

Chrome Platform Status pokazuie, shcho WASM stanovyt' blyz'ko 5,5% usikh zavantazhen storinok u Chrome na pochatok 2026 roku, u porivnianni z 4,5% rokom ranishe. Z tym, shcho WASM 3.0 stav standartom W3C, a WASI dozrivae u napriamku versii 1.0, ekosystema disiahla perelomnoi tochky.

Tsei posibnyk okholiuie vse, shcho treba znaty dlia pochatku roboty z WebAssembly.

Shcho take WebAssembly?

WebAssembly - tse binarnyi format instruktsii, rozroblenyi yak tsil kompiliatsii. Vy pyshete kod movoiu vysokoho rivnia (Rust, C, C++, Go, Kotlin), kompiliuiete yoho u .wasm i zapuskaete u bud-yakomu seredovyshchi z WASM-runtime - brauzery, Node.js, Cloudflare Workers, Wasmtime abo Wasmer.

Yak tse pratsiuie

WASM - tse stekova virtual'na mashyna. Funktsii rozmishchuyut' i vyluchayut' znachennia zi steku operandiv. Runtime khosta (V8 u Chrome, SpiderMonkey u Firefox) JIT-kompiliuie baitkod WASM u natyvnyi mashynnyi kod, tomu produktyvnist' blyz'ka do natyvnoi.

Kliuchovi kharakterystyky:

• Vykonannia u pisochnytsi: WASM-moduli mozhut' otrymuvaty dostup lyshe do resursiv, yaki khost yavno nadaie. Nemaie dostupu do failovoi systemy, merezhi chy OS, yakshcho tse ne dozvoleno. Tse fundamental'no vidrizniaiets'sia vid natyvnoho kodu.
• Liniina pam'iat': odyn bezperervnyi ArrayBuffer, shcho spil'no vykorystovuiet'sia mizh WASM ta khostom. Skladni dani (riadky, struktury) peredaiut'sia cherez zapys u pam'iat' ta spil'ne vykorystannia pokazhchyka.
• Obmezheni typy: WASM natyvno pidtrymuie lyshe chotyry typy: i32, i64, f32, f64. Vse inshe (riadky, masyvy, ob'iekty) vymahaie koduvannia cherez liniinu pam'iat' abo Component Model.
• Portatyvnist': toi samyi binarnyi fail .wasm zapuskaiet'sia na bud-iakii platformi z WASM-runtime, bez perekompiliatsii.

WASM vs JavaScript

WASM ne zaminiuie JavaScript. Vin dopovniuie yoho.

Vykorystovuite JavaScript dlia roboty z UI ta DOM. Vykorystovuite WASM dlia vazhkykh obchyslen: obrobka zobrazhen, koduvannia video, fizychni symuliatsii, kryptohrafiia, parsynh danykh.

WASM 3.0: shcho novoho

WebAssembly 3.0 stav standartom W3C u veresni 2025 roku, standartyzuvavshi dev'iat' funktsii, yaki rozrobliuvalysia rokamy.

Naivazhlyvishym ie WasmGC. Ranishe kompiliatsiia Java abo Kotlin u WASM oznachala dostavku tsiloho garbage collector-a yak chastyny binarnoho failu, shcho rozduvalo rozmiry failiv. Teper vlsnyi GC brauzera keruie pam'iattiu WASM-moduliv, tochno tak samo, yak vin tse robyyt' dlia JavaScript.

WASI: WebAssembly poza brauzerom

WASM u brauzeri potuzhnyni, ale WASI (WebAssembly System Interface) robyyt' WASM universal'nym runtime. WASI nadaie standartyzovani interfeisy dlia systemnykh resursiv - faily, merezha, hodynnyky, vypadkovi chysla - dozvoliaiuchy WASM-moduliam pratsiuvaty poza brauzerom.

WASI Preview 2 (potochnyi stabil'nyi reliz) vyznachaie nastupni interfeisy:

• wasi:filesystem - failovi operatsii cherez capability handles (ne tradytsiini failovi deskryptory)
• wasi:sockets - merezha TCP/UDP
• wasi:http - obrobka HTTP-zapytiv/vidpovidei
• wasi:clocks - nastinnyi hodunnyk, monotonnyi hodunnyk
• wasi:random - kryptohrafichna vypadkovist'
• wasi:cli - arhumenty komandnoho riadka, zminni seredovyshcha, stdio

Kliuchovyi pryntsyp - bezpeka na osnovi mozhlyvostei: WASM-modul' ne mozhe otrymaty dostup do failovoi systemy, yakshcho khost yavno ne nadast' handle do konkretnoho katalohu. Tse robyyt' WASI fundamental'no bezpechnishym za zapusk natyvnykh vykonuvanykh failiv.

Shliakh do WASI 1.0

WASI 0.3.0 (z dodavanniam async/prymityviv paralel'nosti) ochikuiet'sia u 2026 rotsi, WASI 1.0 maie nasliduvaty. Holovne dopovnennia - intehrovane u movu async z potokovym I/O bez kopiiuvannia.

Component Model

Bazovi WASM-moduli mozhut' obminiuvatysia lyshe chyslamy. Component Model vyrishuie tse obmezhennnia, dodaiuchy bahatu systemu typiv ta shar kompozytsii poverkh WASM.

WIT (WebAssembly Interface Types)

WIT - tse mova vyznachennia interfeisiv, yaka dozvoliaie komponentam oholoshuivaty svoi importy ta eksporty z bahatmy typamy - riadky, zapysy, spysky, varianty, enumy - a ne lyshe i32 ta 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;
}

Instrumenty, taki yak wit-bindgen, heneruiut' movni pryviiazky z failiv WIT. Komponent na Rust ta komponent na Python mozhut' obminiuvatysia riadkamy, zapysamy ta spyskamy cherez kontrakty WIT, pry ts'omu zhodna storona ne znaie movu realizatsii inshoi.

Stvorennia pershoho WASM-modulia na Rust

Rust maie naizrilishi instrumenty dlia WASM. Stvorimo praktychnyi pryklad: modul' obrobky zobrazhen, shcho pratsiuie u brauzeri.

Nalashtuvannia

# 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

Nalashtuvannia Cargo.toml

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

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

[dependencies]
wasm-bindgen = "0.2"

Napyshit' kod na 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
}

Zbirka

wasm-pack build --target web

Tse stvoriuie kataloh pkg/ z:

• image_processor_bg.wasm - skompil'ovanyi WASM-binarnyi fail
• image_processor.js - JavaScript-z'iednuval'nyi kod z vyznachenniamy TypeScript
• package.json - hotovyi do publikatsii u npm

Vykorystannia u 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>

Kliuchovyi vysnovok: imageData.data - tse Uint8ClampedArray, pidtrymuvanyai ArrayBuffer. Pry peredachi u WASM vin spil'no vykorystovuie tu samu pam'iat' - bez kopiiuvannia. Funktsiia na Rust modyfikuie pikseli na mistsi, i storona JavaScript bachyt' zminy nehaino.

Nyzhchyi riven': ruchna initsializatsiia WASM

Yakshcho vy ne khochete vykorystovuvaty wasm-bindgen, vy mozhete stvoriuvaty ekzempliayry WASM-moduliv bezposerdn'o:

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

Tse korysno, koly vam potribni minimal'ni nakladni vytraty i ne potribem bahatyi typovyi interop.

Produktyvnist': WASM vs JavaScript

Real'ni benchmarky pokazuiut' znachne pryshvydshennia dlia CPU-intensyvnykh zavdan':

WASM pratsiuie na blyz'ko 95% shvydkosti natyvnoho kodu. Naibil'shi vyhrashy dosiahaiut'sia za rakhunok:

• Peredbachuvanoi produktyvnosti (bez prohrivu JIT, bez pauz GC)
• Instruktsii SIMD dlia paralel'noi obrobky danykh
• Priamoho dostupu do pam'iati bez vtruchannia garbage collector-a

De WASM NE shvydshyi: manipuliatsiia DOM, mali obchyslennia, zavdannia z obmezhenim I/O. JavaScript vzhe optymizovanyi dlia nykh.

Vyrobnychi keisy

Figma: renderynkh vektoriv u real'nomu chasi

Osnovnyi rukhivok renderynhu Figma - tse C++, skompil'ovanyi u WASM. Kozhna forma, hradiient ta efekt obchysliuiut'sia u WASM ta malyuiut'sia na element Canvas. Tse dozvoliaie Figma obrobliaty skladni dyzainy z tysiachamy shariv pry 60fps u brauzeri - produktyvnist', yaka bula b nemozhlyvov na chystomu JavaScript.

Adobe Photoshop u vebi

Adobe portuvala kliuchovi fil'try ta instrumenty Photoshop u WASM za dopomohoiu Rust. Yikhni benchmarky pokazuiut' obrobku zobrazhennia 4K za 22ms z WASM SIMD proty 180ms u JavaScript - 8-kratne pokrashchennia, yake robyt' mozhlyvym perehiliad fil'triv u real'nomu chasi.

Cloudflare Workers

Cloudflare zapuskaie WASM-moduli u izoliiatakh V8 u ponad 330 edge-lokatsiiakh. Kholodni starty stanovliat' 1-5ms (u porivnianni zi 100-500ms dlia konteinernogo serverless). U liutomu 2026 roku vony rozghornuly inferens Llama-3-8b po vsiit svoii edge-merezhi z vykorystanniam WASM.

Google Meet

Rozmyttia fonu ta virtual'ni fony u Google Meet vykorystovuiut' WASM z SIMD dlia obrobky video u real'nomu chasi. WASM-modul' obrobliiaie kozhen videokadr dostatn'o shvydko dlia pidtrymannia plavnoho video pry 30fps.

Pidtrymka brauzeriv (2026)

Vsi osnovni brauzery povnistiu pidtrymuiut' WASM. Novishi funktsii (WasmGC, Exception Handling) dosiahnuly shyrokoi dostupnosti.

Dovidnyk instrumentiv

Optymizatsiia rozmiru binarnoho failu

WASM-binarnyky mozhut' buty velykymy. Os' yak yikh zmenshyty:

# 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

Typovyi WASM-modul' na Rust zmenshuiet'sia z 500KB do menshe 50KB z tsymy optymizatsiiamy.

Plan dii dlia startu

Vysnovok

WebAssembly bil'she ne ie eksperymental'nym. Tse vyrobnycha tekhnolohiia, yaku vykorystovuiut' deiaki z naivymohlyvishykh zastosunkiv u vebi. Produktyvnist' blyz'ka do natyvnoi, bezpeka pisochnitsi ta universal'na portatyvnist' - zhodnyi inshyi tsil' kompiliatsii ne daie usikh tr'okh odnochasno.

Vam ne potribno perepisuvaty ves' zastosunok na WASM. Pochnit' z odniei CPU-intensyvnoi funktsii - fil'tra zobrazhennia, parsera danykh, fizychnoho rozrakhunku - skompiliuiete yii u WASM ta vyklykhte z JavaScript. Vymiriaiete riznytsiiu. Potim vyrishit', de shche WASM mozhe dopomohty.

Instrumenty zrili, pidtrymka brauzeriv universal'na, i ekosystema zrostaie. Yakshcho vy pyshete na Rust, vy vzhe na vidstani odniei komandy vid brauzera.

Kontrol'nyi spysok dlia startu:

• Rust ta wasm-pack vstanovleni
• Pershyi WASM-modul' zibranyii ta zapushchenyi u brauzeri
• JavaScript interop pratsiuie (vyklyk WASM z JS)
• Reliznna zbirka z optymizatsiiamy rozmiru zastosovana
• Produktyvnist' porivianiiana z ekvivalentom na chystomu JavaScript
• WASI doslidzheno z Wasmtime dlia servernykh keisiv