1~
2WebAssembly (WASM), tarayıcıda C++ çalıştırmanın bir yolu olarak başladı. 2026'da her yerde çalışıyor  -  tarayıcılar, sunucular, uç ağlar, gömülü cihazlar  -  ve web üzerindeki en zorlu uygulamalardan bazılarına güç veriyor. Figma'nın render motoru, web üzerinde Adobe Photoshop, Google Meet'in video işleme özelliği ve Cloudflare'in uç bilgi işlem platformu hepsi WebAssembly üzerinde çalışıyor.
3~
4Chrome Platform Status'a göre 2026 başı itibarıyla WASM, tüm Chrome sayfa yüklemelerinin yaklaşık %5.5'ini oluşturuyor, bir önceki yıl %4.5'ten yükseldi. WASM 3.0'ın W3C standardı haline gelmesi ve WASI'nin 1.0'a doğru olgunlaşmasıyla ekosistem bir dönüm noktasına ulaştı.
5~
6Bu rehber, WebAssembly ile geliştirmeye başlamak için bilmeniz gereken her şeyi kapsar.
7~
8## WebAssembly Nedir?
9~
10WebAssembly, bir derleme hedefi olarak tasarlanmış ikili bir talimat formatıdır. Üst düzey bir dilde (Rust, C, C++, Go, Kotlin) kod yazarsınız, `.wasm`'a derlersiniz ve WASM çalışma zamanına sahip herhangi bir ortamda çalıştırırsınız  -  tarayıcılar, Node.js, Cloudflare Workers, Wasmtime veya 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### Nasıl Çalışır
23~
24WASM bir **yığın tabanlı sanal makinedir (stack-based virtual machine)**. Fonksiyonlar bir işlenen yığınına değer iter ve çeker. Ana bilgisayar çalışma zamanı (Chrome'da V8, Firefox'ta SpiderMonkey) WASM bayt kodunu yerel makine koduna JIT-derler, bu nedenle performans neredeyse yerel düzeydedir.
25~
26Temel özellikler:
27~
28- **Sandbox'ta yürütme (Sandboxed execution)**: WASM modülleri yalnızca ana bilgisayarın açıkça verdiği kaynaklara erişebilir. İzin verilmedikçe dosya sistemi yok, ağ yok, işletim sistemi erişimi yok. Bu, yerel koddan temelden farklıdır.
29- **Doğrusal bellek (Linear memory)**: WASM ve ana bilgisayar arasında paylaşılan tek bir bitişik `ArrayBuffer`. Karmaşık veriler (dizeler, yapılar) belleğe yazılarak ve işaretçi paylaşılarak iletilir.
30- **Tür sınırlı (Type-limited)**: WASM yerel olarak yalnızca dört türü destekler: `i32`, `i64`, `f32`, `f64`. Geri kalan her şey (dizeler, diziler, nesneler) doğrusal bellek veya Component Model aracılığıyla kodlama gerektirir.
31- **Taşınabilir (Portable)**: Aynı `.wasm` ikili dosyası, WASM çalışma zamanına sahip herhangi bir platformda yeniden derleme olmadan çalışır.
32~
33### WASM ve JavaScript Karşılaştırması
34~
35WASM, JavaScript'in yerini almaz. Onu tamamlar.
36~
37| Yön | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **Ayrıştırma** | Çalışma zamanında Parse + derleme | Önceden derlenmiş ikili, yalnızca decode |
40| **Yürütme hızı** | JIT-optimize, değişken | Neredeyse yerel, tutarlı |
41| **Başlangıç** | Küçük betikler için hızlı | Hızlı decode, tahmin edilebilir |
42| **DOM erişimi** | Doğrudan | Dolaylı (JS yapıştırıcı kod aracılığıyla) |
43| **En uygun** | UI, DOM manipülasyonu, olay yönetimi | CPU yoğun hesaplama |
44| **Çöp toplama** | Yerleşik | WasmGC (yeni) veya manuel |
45~
46UI ve DOM işleri için JavaScript kullanın. Ağır hesaplamalar için WASM kullanın: görüntü işleme, video kodlama, fizik simülasyonu, kriptografi, veri ayrıştırma.
47~
48## WASM 3.0: Yenilikler
49~
50WebAssembly 3.0, Eylül 2025'te W3C standardı oldu ve yıllardır geliştirme aşamasında olan dokuz özelliği standartlaştırdı.
51~
52| Özellik | Neyi Etkinleştirir |
53|---------|----------------|
54| **WasmGC** | WASM'da yerel çöp toplama. Yönetilen diller (Java, Kotlin, Dart) kendi GC çalışma zamanlarını göndermeden WASM'a derlenebilir. Chrome 119+, Firefox 120+, Safari 18.2+'da desteklenir. |
55| **Exception Handling** | WASM'da yerel `try`/`catch`. Daha önce, istisnalar JavaScript'e maliyetli gidiş-dönüşler gerektiriyordu. |
56| **Tail Calls** | Yığın taşması olmadan verimli özyineleme sağlar. Fonksiyonel diller için kritik. |
57| **Relaxed SIMD** | Paralel veri işleme için 128-bit vektör talimatları. Donanıma özgü optimizasyonlar sağlar. |
58| **Memory64** | 4GB doğrusal bellek sınırını aşar. Büyük ölçekli veri işleme için gerekli. |
59| **Multi-memory** | Bir modülde birden fazla bağımsız bellek bölgesi. |
60~
61En etkili olanı **WasmGC**'dir. Bundan önce, Java veya Kotlin'i WASM'a derlemek, ikili dosyanın bir parçası olarak tam bir çöp toplayıcı göndermek anlamına geliyordu ve bu dosya boyutlarını şişiriyordu. Artık tarayıcının kendi GC'si, JavaScript için yaptığı gibi WASM modülleri için bellek yönetimini üstleniyor.
62~
63## WASI: Tarayıcının Ötesinde WebAssembly
64~
65Tarayıcıda WASM güçlüdür, ancak **WASI (WebAssembly Sistem Arayüzü)** WASM'ı evrensel bir çalışma zamanı yapan şeydir. WASI, sistem kaynakları için standartlaştırılmış arayüzler sağlar  -  dosyalar, ağ, saatler, rastgele sayılar  -  WASM modüllerinin tarayıcı dışında çalışmasına izin verir.
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 (mevcut kararlı sürüm) bu arayüzleri tanımlar:
84~
85- `wasi:filesystem`  -  yetenek tanıtıcıları aracılığıyla dosya işlemleri (geleneksel dosya tanımlayıcıları değil)
86- `wasi:sockets`  -  TCP/UDP ağ iletişimi
87- `wasi:http`  -  HTTP istek/yanıt işleme
88- `wasi:clocks`  -  duvar saati, monoton saat
89- `wasi:random`  -  kriptografik rastgelelik
90- `wasi:cli`  -  komut satırı argümanları, ortam değişkenleri, stdio
91~
92Temel ilke **yetenek tabanlı güvenlik (capability-based security)**'dir: Bir WASM modülü, ana bilgisayar belirli bir dizin için açıkça bir tanıtıcı vermedikçe dosya sistemine erişemez. Bu, WASI'yi yerel çalıştırılabilir dosyaları çalıştırmaktan temelden daha güvenli kılar.
93~
94### WASI 1.0'a Giden Yol
95~
96WASI 0.3.0 (async/eşzamanlılık ilkelleri ekleme) 2026'da bekleniyor, ardından WASI 1.0 gelecek. Ana ekleme, sıfır kopyalı akış I/O ile dil entegreli async'dir.
97~
98## Component Model
99~
100Çekirdek WASM modülleri yalnızca sayı alışverişi yapabilir. **Component Model**, WASM üzerine zengin bir tür sistemi ve birleştirilebilirlik katmanı ekleyerek bu sınırlamayı çözer.
101~
102### WIT (WebAssembly Arayüz Türleri)
103~
104WIT, bileşenlerin içe ve dışa aktarımlarını zengin türlerle bildirmesine olanak tanıyan bir Arayüz Tanımlama Dilidir  -  dizeler, kayıtlar, listeler, varyantlar, numaralandırmalar  -  sadece `i32` ve `f64` değil.
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~
127`wit-bindgen` gibi araç zincirleri WIT dosyalarından dile özgü bağlamalar üretir. Bir Rust bileşeni ve bir Python bileşeni, hiçbir tarafın diğerinin uygulama dilini bilmeden WIT sözleşmeleri aracılığıyla dizeler, kayıtlar ve listeler alışverişi yapabilir.
128~
129## Rust ile İlk WASM Modülünüzü Oluşturma
130~
131Rust en olgun WASM araçlarına sahiptir. Pratik bir örnek oluşturalım: tarayıcıda çalışan bir görüntü işleme modülü.
132~
133### Kurulum
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'u Yapılandırma
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### Rust Kodunu Yazma
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### Derleme
223~
224```bash
225wasm-pack build --target web
226```
227~
228Bu, aşağıdakileri içeren bir `pkg/` dizini üretir:
229- `image_processor_bg.wasm`  -  derlenmiş WASM ikili dosyası
230- `image_processor.js`  -  TypeScript tanımlarıyla JavaScript yapıştırıcı kodu
231- `package.json`  -  npm'de yayınlamaya hazır
232~
233### JavaScript'te Kullanma
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~
286Temel içgörü: `imageData.data`, bir `ArrayBuffer` tarafından desteklenen bir `Uint8ClampedArray`'dir. WASM'a iletildiğinde aynı belleği paylaşır  -  kopyalama yok. Rust fonksiyonu pikselleri yerinde değiştirir ve JavaScript tarafı değişiklikleri anında görür.
287~
288## Alt Düzey: Manuel WASM Örnekleme
289~
290`wasm-bindgen` kullanmak istemiyorsanız, WASM modüllerini doğrudan örnekleyebilirsiniz:
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~
307Bu, minimum yük istediğinizde ve zengin tür entegrasyonuna ihtiyaç duymadığınızda kullanışlıdır.
308~
309## Performans: WASM ve JavaScript
310~
311Gerçek dünya kıyaslamaları CPU yoğun görevler için önemli hız artışları gösteriyor:
312~
313| Görev | JavaScript | WASM | Hız Artışı |
314|------|-----------|------|---------|
315| 4K görüntü işleme | 180ms | 8ms (SIMD ile) | 22x |
316| Görüntü yeniden boyutlandırma (4K) | 250ms | 45ms | 5.5x |
317| Fizik simülasyonu (10K varlık) | Kare düşüşü | Akıcı 60fps | ~10x |
318| JSON ayrıştırma (büyük yük) | 12ms | 3ms | 4x |
319| Kriptografik karma | 45ms | 6ms | 7.5x |
320~
321WASM, yerel kod hızının yaklaşık %95'inde çalışır. En büyük kazanımlar şunlardan gelir:
322- Tahmin edilebilir performans (JIT ısınması yok, GC duraklamaları yok)
323- Paralel veri işleme için SIMD talimatları
324- Çöp toplayıcı müdahalesi olmadan doğrudan bellek erişimi
325~
326WASM'ın daha hızlı olmadığı yerler: DOM manipülasyonu, küçük hesaplamalar, G/Ç sınırlı görevler. JavaScript bunlar için zaten optimize edilmiştir.
327~
328## Üretim Kullanım Senaryoları
329~
330### Figma: Gerçek Zamanlı Vektör İşleme
331~
332Figma'nın çekirdek render motoru, WASM'a derlenmiş C++'tır. Her şekil, gradyan ve efekt WASM'da hesaplanır ve bir Canvas öğesine çizilir. Bu, Figma'nın tarayıcıda binlerce katmanlı karmaşık tasarımları 60fps'de işlemesine olanak tanır  -  saf JavaScript'te imkansız olacak bir performans.
333~
334### Web Üzerinde Adobe Photoshop
335~
336Adobe, Rust kullanarak temel Photoshop filtrelerini ve araçlarını WASM'a taşıdı. Kıyaslamaları WASM SIMD ile 22ms'de 4K görüntü işleme gösteriyor, JavaScript'te 180ms'ye karşı  -  gerçek zamanlı filtre önizlemelerini mümkün kılan 8 kat iyileştirme.
337~
338### Cloudflare Workers
339~
340Cloudflare, 330+ uç konumda V8 izolasyonlarında WASM modülleri çalıştırıyor. Soğuk başlangıçlar 1-5ms'dir (konteyner tabanlı sunucusuz için 100-500ms ile karşılaştırıldığında). Şubat 2026'da, WASM kullanarak uç ağlarında Llama-3-8b çıkarımını dağıttılar.
341~
342### Google Meet
343~
344Google Meet'teki arka plan bulanıklaştırma ve sanal arka planlar, gerçek zamanlı video işleme için SIMD ile WASM kullanır. WASM modülü her video karesini 30fps'de akıcı video sürdürecek kadar hızlı işler.
345~
346## Tarayıcı Desteği (2026)
347~
348| Özellik | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | Tam | Tam | Tam | Tam |
351| Threads | Evet | Evet | Evet | Evet |
352| SIMD (128-bit) | Evet | Evet | Evet | Evet |
353| WasmGC | 119+ | 120+ | 18.2+ | Evet |
354| Exception Handling | Evet | Evet | Evet | Evet |
355| Memory64 | Evet | Evet | Kısmi | Evet |
356~
357Tüm büyük tarayıcılar WASM'ı tam olarak destekler. Daha yeni özellikler (WasmGC, Exception Handling) geniş kullanılabilirliğe ulaştı.
358~
359## Araç Referansı
360~
361| Araç | Amaç | Kurulum |
362|------|---------|---------|
363| **wasm-pack** | Rust'ı WASM'a derleyin, npm paketleri oluşturun | `cargo install wasm-pack` |
364| **wasm-bindgen** | Rust/JS entegrasyon bağlamaları (wasm-pack tarafından kullanılır) | Cargo.toml'da Dependency |
365| **wasm-opt** | İkili boyut optimizasyonu (%50+ azalma) | Binaryen'in parçası: `brew install binaryen` |
366| **wit-bindgen** | WIT dosyalarından bağlamalar oluşturun | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Sunucu tarafı WASM çalışma zamanı (referans WASI uygulaması) | `brew install wasmtime` |
368| **Wasmer** | WASI destekli alternatif WASM çalışma zamanı | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Çalışma zamanı tarayıcı özellik algılama | `npm install wasm-feature-detect` |
370~
371### İkili Boyut Optimizasyonu
372~
373WASM ikili dosyaları büyük olabilir. Küçültme yöntemi:
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~
392Tipik bir Rust WASM modülü bu optimizasyonlarla 500KB'dan 50KB'ın altına düşer.
393~
394## Başlangıç Yol Haritası
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## Sonuç
420~
421WebAssembly artık deneysel değil. Web üzerindeki en zorlu uygulamalardan bazıları tarafından kullanılan bir üretim teknolojisidir. Neredeyse yerel performans, sandbox güvenliği ve evrensel taşınabilirlik  -  başka hiçbir derleme hedefi size bu üçünü birden vermez.
422~
423Tüm uygulamanızı WASM'da yeniden yazmanız gerekmiyor. Tek bir CPU yoğun fonksiyonla başlayın  -  bir görüntü filtresi, bir veri ayrıştırıcı, bir fizik hesabı  -  WASM'a derleyin ve JavaScript'ten çağırın. Farkı ölçün. Sonra WASM'ın başka nerede yardımcı olabileceğine karar verin.
424~
425Araçlar olgun, tarayıcı desteği evrensel ve ekosistem büyüyor. Rust yazıyorsanız, tarayıcıdan zaten yalnızca bir komut uzaktasınız.
426~
427> **Başlangıç Kontrol Listesi:**
428>
429> - [x] Rust ve wasm-pack kuruldu
430> - [x] İlk WASM modülü oluşturuldu ve tarayıcıda çalışıyor
431> - [x] JavaScript entegrasyonu çalışıyor (JS'den WASM çağırma)
432> - [x] Boyut optimizasyonları uygulanmış sürüm derlemesi
433> - [x] Saf JavaScript eşdeğerine karşı performans kıyaslandı
434> - [x] Sunucu tarafı kullanım senaryoları için Wasmtime ile WASI keşfedildi
435~