1 
2WebAssembly (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.
3 
4Chrome 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.
5 
6Tsei posibnyk okholiuie vse, shcho treba znaty dlia pochatku roboty z WebAssembly.
7 
8## Shcho take WebAssembly?
9 
10WebAssembly  -  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.
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### Yak tse pratsiuie
23 
24WASM  -  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.
25 
26Kliuchovi kharakterystyky:
27 
28- **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.
29- **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.
30- **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.
31- **Portatyvnist'**: toi samyi binarnyi fail `.wasm` zapuskaiet'sia na bud-iakii platformi z WASM-runtime, bez perekompiliatsii.
32 
33### WASM vs JavaScript
34 
35WASM ne zaminiuie JavaScript. Vin dopovniuie yoho.
36 
37| Aspekt | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Parsynh** | Parsynh + kompiliatsiia u runtime | Poperedn'o skompil'ovanyi binarnyi fail, lyshe dekoduvannia |
40| **Shvydkist' vykonannia** | JIT-optymizovana, zminna | Blyz'ko do natyvnoi, stabil'na |
41| **Zapusk** | Shvydkyi dlia malykh skryptiv | Shvydke dekoduvannia, peredbachuvane |
42| **Dostup do DOM** | Priamyi | Nepriamyi (cherez JS-prosharkok) |
43| **Naikrashche dlia** | UI, manipuliatsiia DOM, obrobka podii | CPU-intensyvni obchyslennia |
44| **Zbyrannia smittia** | Vbudovane | WasmGC (nove) abo ruchne |
45 
46Vykorystovuite JavaScript dlia roboty z UI ta DOM. Vykorystovuite WASM dlia vazhkykh obchyslen: obrobka zobrazhen, koduvannia video, fizychni symuliatsii, kryptohrafiia, parsynh danykh.
47 
48## WASM 3.0: shcho novoho
49 
50WebAssembly 3.0 stav standartom W3C u veresni 2025 roku, standartyzuvavshi dev'iat' funktsii, yaki rozrobliuvalysia rokamy.
51 
52| Funktsiia | Shcho daie |
53|---------|----------------|
54| **WasmGC** | Natyvne zbyrannia smittia u WASM. Kerovani movy (Java, Kotlin, Dart) mozhut' kompiliuvatysia u WASM bez dostavky vlasnoho GC-runtime. Pidtrymuiet'sia u Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | Natyvnyi `try`/`catch` u WASM. Ranishe vyniatky vymahalyt dorohi kruhovyi obkhody do JavaScript. |
56| **Tail Calls** | Zabezpechuie efektyvnu rekursiiu bez pereponennia steku. Krytychno dlia funktsional'nykh mov. |
57| **Relaxed SIMD** | 128-bitni vektorni instruktsii dlia paralel'noi obrobky danykh. Dozvoliaie aparatni optymizatsii. |
58| **Memory64** | Znimaie obmezhennnia liniinoi pam'iati u 4 HB. Neobkhidno dlia masshtabnoi obrobky danykh. |
59| **Multi-memory** | Kil'ka nezalezhnykh oblastei pam'iati v odnomu moduli. |
60 
61Naivazhlyvishym 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.
62 
63## WASI: WebAssembly poza brauzerom
64 
65WASM 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.
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 (potochnyi stabil'nyi reliz) vyznachaie nastupni interfeisy:
84 
85- `wasi:filesystem`  -  failovi operatsii cherez capability handles (ne tradytsiini failovi deskryptory)
86- `wasi:sockets`  -  merezha TCP/UDP
87- `wasi:http`  -  obrobka HTTP-zapytiv/vidpovidei
88- `wasi:clocks`  -  nastinnyi hodunnyk, monotonnyi hodunnyk
89- `wasi:random`  -  kryptohrafichna vypadkovist'
90- `wasi:cli`  -  arhumenty komandnoho riadka, zminni seredovyshcha, stdio
91 
92Kliuchovyi 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.
93 
94### Shliakh do WASI 1.0
95 
96WASI 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.
97 
98## Component Model
99 
100Bazovi WASM-moduli mozhut' obminiuvatysia lyshe chyslamy. **Component Model** vyrishuie tse obmezhennnia, dodaiuchy bahatu systemu typiv ta shar kompozytsii poverkh WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT  -  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`.
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 
127Instrumenty, 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.
128 
129## Stvorennia pershoho WASM-modulia na Rust
130 
131Rust maie naizrilishi instrumenty dlia WASM. Stvorimo praktychnyi pryklad: modul' obrobky zobrazhen, shcho pratsiuie u brauzeri.
132 
133### Nalashtuvannia
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### Nalashtuvannia 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### Napyshit' kod na 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### Zbirka
223 
224```bash
225wasm-pack build --target web
226```
227 
228Tse stvoriuie kataloh `pkg/` z:
229- `image_processor_bg.wasm`  -  skompil'ovanyi WASM-binarnyi fail
230- `image_processor.js`  -  JavaScript-z'iednuval'nyi kod z vyznachenniamy TypeScript
231- `package.json`  -  hotovyi do publikatsii u npm
232 
233### Vykorystannia u 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 
286Kliuchovyi 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.
287 
288## Nyzhchyi riven': ruchna initsializatsiia WASM
289 
290Yakshcho vy ne khochete vykorystovuvaty `wasm-bindgen`, vy mozhete stvoriuvaty ekzempliayry WASM-moduliv bezposerdn'o:
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 
307Tse korysno, koly vam potribni minimal'ni nakladni vytraty i ne potribem bahatyi typovyi interop.
308 
309## Produktyvnist': WASM vs JavaScript
310 
311Real'ni benchmarky pokazuiut' znachne pryshvydshennia dlia CPU-intensyvnykh zavdan':
312 
313| Zavdannia | JavaScript | WASM | Pryshvydshennia |
314|------|-----------|------|---------|
315| Obrobka zobrazhennia 4K | 180ms | 8ms (z SIMD) | 22x |
316| Zmina rozmiru zobrazhennia (4K) | 250ms | 45ms | 5,5x |
317| Fizychna symuliiatsiia (10K ob'iektiv) | Vtrachaiut'sia kadry | Plavni 60fps | ~10x |
318| Parsynh JSON (velyke navantazhennia) | 12ms | 3ms | 4x |
319| Kryptohrafichne kheshuvannia | 45ms | 6ms | 7,5x |
320 
321WASM pratsiuie na blyz'ko 95% shvydkosti natyvnoho kodu. Naibil'shi vyhrashy dosiahaiut'sia za rakhunok:
322- Peredbachuvanoi produktyvnosti (bez prohrivu JIT, bez pauz GC)
323- Instruktsii SIMD dlia paralel'noi obrobky danykh
324- Priamoho dostupu do pam'iati bez vtruchannia garbage collector-a
325 
326De WASM NE shvydshyi: manipuliatsiia DOM, mali obchyslennia, zavdannia z obmezhenim I/O. JavaScript vzhe optymizovanyi dlia nykh.
327 
328## Vyrobnychi keisy
329 
330### Figma: renderynkh vektoriv u real'nomu chasi
331 
332Osnovnyi 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.
333 
334### Adobe Photoshop u vebi
335 
336Adobe 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.
337 
338### Cloudflare Workers
339 
340Cloudflare 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.
341 
342### Google Meet
343 
344Rozmyttia 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.
345 
346## Pidtrymka brauzeriv (2026)
347 
348| Funktsiia | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Povna | Povna | Povna | Povna |
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 | Chastkovo | Tak |
356 
357Vsi osnovni brauzery povnistiu pidtrymuiut' WASM. Novishi funktsii (WasmGC, Exception Handling) dosiahnuly shyrokoi dostupnosti.
358 
359## Dovidnyk instrumentiv
360 
361| Instrument | Pryznachennia | Vstanovlennia |
362|------|---------|---------|
363| **wasm-pack** | Zbirka Rust u WASM, heneratsiia npm-paketiv | `cargo install wasm-pack` |
364| **wasm-bindgen** | Pryviiazky Rust/JS interop (vykorystovuiet'sia wasm-pack) | Zalezhnist' u Cargo.toml |
365| **wasm-opt** | Optymizatsiia rozmiru binarnoho failu (50%+ zmenshennia) | Chastyna Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Heneratsiia pryviiazok z WIT-failiv | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Servernyi WASM-runtime (etalonna realizatsiia WASI) | `brew install wasmtime` |
368| **Wasmer** | Al'ternatyvnyi WASM-runtime z pidtrymkoiu WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Vyiavlennia funktsii brauzera pid chas vykonannia | `npm install wasm-feature-detect` |
370 
371### Optymizatsiia rozmiru binarnoho failu
372 
373WASM-binarnyky mozhut' buty velykymy. Os' yak yikh zmenshyty:
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 
392Typovyi WASM-modul' na Rust zmenshuiet'sia z 500KB do menshe 50KB z tsymy optymizatsiiamy.
393 
394## Plan dii dlia startu
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## Vysnovok
420 
421WebAssembly 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.
422 
423Vam 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.
424 
425Instrumenty zrili, pidtrymka brauzeriv universal'na, i ekosystema zrostaie. Yakshcho vy pyshete na Rust, vy vzhe na vidstani odniei komandy vid brauzera.
426 
427> **Kontrol'nyi spysok dlia startu:**
428>
429> - [x] Rust ta wasm-pack vstanovleni
430> - [x] Pershyi WASM-modul' zibranyii ta zapushchenyi u brauzeri
431> - [x] JavaScript interop pratsiuie (vyklyk WASM z JS)
432> - [x] Reliznna zbirka z optymizatsiiamy rozmiru zastosovana
433> - [x] Produktyvnist' porivianiiana z ekvivalentom na chystomu JavaScript
434> - [x] WASI doslidzheno z Wasmtime dlia servernykh keisiv
435