Web Geliştiricileri için WebAssembly: Sıfırdan Üretime

WebAssembly (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.

Chrome 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ı.

Bu rehber, WebAssembly ile geliştirmeye başlamak için bilmeniz gereken her şeyi kapsar.

WebAssembly Nedir?

WebAssembly, 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.

Nasıl Çalışır

WASM 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.

Temel özellikler:

• 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.
• 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.
• 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.
• Taşınabilir (Portable): Aynı .wasm ikili dosyası, WASM çalışma zamanına sahip herhangi bir platformda yeniden derleme olmadan çalışır.

WASM ve JavaScript Karşılaştırması

WASM, JavaScript'in yerini almaz. Onu tamamlar.

UI 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.

WASM 3.0: Yenilikler

WebAssembly 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ı.

En 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.

WASI: Tarayıcının Ötesinde WebAssembly

Tarayı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.

WASI Preview 2 (mevcut kararlı sürüm) bu arayüzleri tanımlar:

• wasi:filesystem - yetenek tanıtıcıları aracılığıyla dosya işlemleri (geleneksel dosya tanımlayıcıları değil)
• wasi:sockets - TCP/UDP ağ iletişimi
• wasi:http - HTTP istek/yanıt işleme
• wasi:clocks - duvar saati, monoton saat
• wasi:random - kriptografik rastgelelik
• wasi:cli - komut satırı argümanları, ortam değişkenleri, stdio

Temel 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.

WASI 1.0'a Giden Yol

WASI 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.

Component Model

Ç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.

WIT (WebAssembly Arayüz Türleri)

WIT, 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.

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

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.

Rust ile İlk WASM Modülünüzü Oluşturma

Rust 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ü.

Kurulum

# 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

Cargo.toml'u Yapılandırma

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

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

[dependencies]
wasm-bindgen = "0.2"

Rust Kodunu Yazma

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

Derleme

wasm-pack build --target web

Bu, aşağıdakileri içeren bir pkg/ dizini üretir:

• image_processor_bg.wasm - derlenmiş WASM ikili dosyası
• image_processor.js - TypeScript tanımlarıyla JavaScript yapıştırıcı kodu
• package.json - npm'de yayınlamaya hazır

JavaScript'te Kullanma

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

Temel 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.

Alt Düzey: Manuel WASM Örnekleme

wasm-bindgen kullanmak istemiyorsanız, WASM modüllerini doğrudan örnekleyebilirsiniz:

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

Bu, minimum yük istediğinizde ve zengin tür entegrasyonuna ihtiyaç duymadığınızda kullanışlıdır.

Performans: WASM ve JavaScript

Gerçek dünya kıyaslamaları CPU yoğun görevler için önemli hız artışları gösteriyor:

WASM, yerel kod hızının yaklaşık %95'inde çalışır. En büyük kazanımlar şunlardan gelir:

• Tahmin edilebilir performans (JIT ısınması yok, GC duraklamaları yok)
• Paralel veri işleme için SIMD talimatları
• Çöp toplayıcı müdahalesi olmadan doğrudan bellek erişimi

WASM'ı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.

Üretim Kullanım Senaryoları

Figma: Gerçek Zamanlı Vektör İşleme

Figma'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.

Web Üzerinde Adobe Photoshop

Adobe, 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.

Cloudflare Workers

Cloudflare, 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.

Google Meet

Google 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.

Tarayıcı Desteği (2026)

Tüm büyük tarayıcılar WASM'ı tam olarak destekler. Daha yeni özellikler (WasmGC, Exception Handling) geniş kullanılabilirliğe ulaştı.

Araç Referansı

İkili Boyut Optimizasyonu

WASM ikili dosyaları büyük olabilir. Küçültme yöntemi:

# 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

Tipik bir Rust WASM modülü bu optimizasyonlarla 500KB'dan 50KB'ın altına düşer.

Başlangıç Yol Haritası

Sonuç

WebAssembly 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.

Tü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.

Araç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.

Başlangıç Kontrol Listesi:

• Rust ve wasm-pack kuruldu
• İlk WASM modülü oluşturuldu ve tarayıcıda çalışıyor
• JavaScript entegrasyonu çalışıyor (JS'den WASM çağırma)
• Boyut optimizasyonları uygulanmış sürüm derlemesi
• Saf JavaScript eşdeğerine karşı performans kıyaslandı
• Sunucu tarafı kullanım senaryoları için Wasmtime ile WASI keşfedildi