WebAssembly: Web Uygulamalarının Geleceği

giriiş

WebAssembly (Wasm), modern web tarayıcılarında neredeyse yerel hızda yürütülen düşük seviyeli bir ikili talimat formatıdır. C, C++, Rust ve Go gibi diller için bir derleme hedefi sağlayarak video düzenleme, 3D oluşturma, oyun, bilimsel simülasyonlar gibi yüksek performanslı uygulamaların tarayıcıda yerel kodla karşılaştırılabilir bir performansla çalışmasını sağlar.

Wasm, JavaScript'in yerini almıyor; onu tamamlıyor. Wasm, performans açısından kritik yolları güçlendirirken, JavaScript kullanıcı arayüzünü ve etkileşimi yönetir.

---

Neden WebAssembly?

JavaScript'le İlgili Sorun

JavaScript hiçbir zaman yüksek performanslı bilgi işlem için tasarlanmamıştır. Dinamik olarak yazılmış, çöp toplanmış, tek iş parçacıklı bir dildir. Modern JIT derleyicileri (V8, SpiderMonkey) JS'yi oldukça hızlı hale getirmiş olsa da temel sınırlamalar halen devam etmektedir:

Sınırlama	Darbe
Dinamik yazma	Çalışma zamanında tip kontrolü ek yük getirir
Çöp toplama	GC döngüleri için duraklamalar
Tek iş parçacıklı	Çok çekirdekli CPU'lar kullanılamıyor (Web Çalışanları olmadan)
SIMD yok (yakın zamana kadar)	Paralel iş yükleri için daha yavaş
Büyük uygulamalar	JS'yi ayrıştırmak ve derlemek pahalıdır

WebAssembly Neler Sunuyor?

Özellik	Fayda
Yerel hıza yakın	Derlenmiş ikili program, yoğun işlem gerektiren görevler için eşdeğer JavaScript'ten 10-50 kat daha hızlı çalışır
Tahmin edilebilir performans	JIT ısınması yok, çöp toplama duraklaması yok
Dil esnekliği	Rust, C++, Go, Zig veya 40'tan fazla dilde yazın
Güvenli korumalı alan	Bellek açısından güvenli, yalıtılmış bir ortamda çalışır
Taşınabilir	Tüm modern tarayıcılarda, sunucularda, IoT'lerde ve yerleşik cihazlarda çalışır
Küçük dosya boyutu	Wasm ikilisi genellikle eşdeğer JS'den %50-80 daha küçüktür

Performans Karşılaştırması

Task                  JavaScript    WebAssembly    Native
─────────────────────────────────────────────────────────
Image blur (4MP)      120ms         8ms            5ms
JSON parse (10MB)     45ms          12ms           10ms
Physics simulation    30 FPS        60 FPS         60 FPS
Audio encoding        3.2x realtime 0.8x realtime  0.5x realtime
Video decoding        30 FPS        60 FPS         60 FPS

---

WebAssembly Nasıl Çalışır?

Derleme İşlem Hattı

Source Code (Rust/C++/Go/...) ──► Compiler (wasm-pack, emcc, tinygo)
                                        │
                                        ▼
                                .wasm binary
                                        │
                                        ▼
                              Browser or Runtime
                              (V8, SpiderMonkey, Wasmtime)
                                        │
                                        ▼
                                Machine Code

Wasm'ı Yükleme ve Örnekleme

// Load and instantiate a WebAssembly module
const response = await fetch('module.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);

// Call exported functions
const result = instance.exports.add(5, 7);
console.log(result); // 12

Bellek Modeli

Wasm'ın doğrusal bir belleği vardır; bu, hem Wasm modülünün hem de JavaScript'in erişebileceği bitişik bir bayt dizisidir:

// Wasm memory is accessible from JavaScript
const memory = instance.exports.memory;
const buffer = new Uint8Array(memory.buffer, offset, length);

// Write data from JS to Wasm memory
buffer[0] = 42;

// Call Wasm function that reads from memory
instance.exports.process_data(offset, length);

// Read results back
console.log(buffer[0]); // Wasm may have modified it

---

WebAssembly Uygulamaları Oluşturma

Pas + wasm paketi

Rust, WebAssembly geliştirmede en popüler dil haline geldi:

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

#[wasm_bindgen]
pub fn process_image(data: &[u8], width: u32, height: u32) -> Vec<u8> {
    // High-performance image processing
    data.chunks(4)
        .map(|pixel| {
            let r = pixel[0] as f32;
            let g = pixel[1] as f32;
            let b = pixel[2] as f32;
            let gray = (r * 0.299 + g * 0.587 + b * 0.114) as u8;
            [gray, gray, gray, pixel[3]]
        })
        .flatten()
        .collect()
}

# Build Wasm package
wasm-pack build --target web

# Generated files:
# - pkg/my_wasm_bg.wasm  (compiled Wasm binary)
# - pkg/my_wasm.js       (JS glue)
# - pkg/my_wasm.d.ts     (TypeScript types)

C/C++ + Yazılı metin

// image_filter.cpp
#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
void apply_sepia(unsigned char* data, int length) {
    for (int i = 0; i < length; i += 4) {
        int r = data[i];
        int g = data[i + 1];
        int b = data[i + 2];

        data[i] = (r * 0.393 + g * 0.769 + b * 0.189);
        data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168);
        data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131);
    }
}
}

emcc image_filter.cpp -o image_filter.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_apply_sepia"]'

Git + TinyGo

package main

import "syscall/js"

func add(this js.Value, args []js.Value) interface{} {
    return js.ValueOf(args[0].Int() + args[1].Int())
}

func main() {
    c := make(chan struct{}, 0)
    js.Global().Set("wasmAdd", js.FuncOf(add))
    <-c
}

tinygo build -o main.wasm -target wasm main.go

---

WebAssembly Kullanım Durumları

1. Yüksek Performanslı Web Uygulamaları

Başvuru	Dil	Neden Wasm
Figma	C++ (Emscripten aracılığıyla)	Gerçek zamanlı vektör oluşturma
Adobe Photoshop Web	C++	Tarayıcıda masaüstü sınıfı görüntü düzenleme
Google Earth	C++	Küresel arazinin 3 boyutlu görüntüsü
AutoCAD Web	C++	Tarayıcıda CAD modelleme
FFmpeg.wasm	C	Tamamen tarayıcıda video kod dönüştürme

2. Oyun

Oyun motorları WebAssembly'a derlenir:

# Unity
Build Settings → WebGL → Build

# Unreal Engine
# Supports WebAssembly as a target platform

3. Sunucu Tarafı Web Montajı (WASI)

WebAssembly Sistem Arayüzü (WASI), Wasm'ı tarayıcının dışında etkinleştirir:

┌──────────────────────────────────────────┐
│           Serverless Platform            │
├──────────────────────────────────────────┤
│  Cloudflare Workers                      │
│  ┌──────────┐  ┌──────────┐  ┌─────────┐ │
│  │ Wasm app1│  │ Wasm app2│  │ Wasm... │ │
│  └──────────┘  └──────────┘  └─────────┘ │
│  ┌──────────────────────────────────────┐│
│  │         Fastly Compute@Edge         ││
│  └──────────────────────────────────────┘│
│  ┌──────────────────────────────────────┐│
│  │         Fermyon Spin (Nomad)        ││
│  └──────────────────────────────────────┘│
└──────────────────────────────────────────┘

Sunucu tarafı Wasm'ın faydaları:

• Kapsayıcılar için soğuk başlatma < 1 ms ve 100 ms+.
• Deterministik — Aynı girdi her zaman aynı çıktıyı üretir.
• Korumalı alan — İşletim sistemine veya dosya sistemine erişim yok (izin verilmedikçe).
• Taşınabilir — Herhangi bir WASI çalışma zamanında aynı ikili çalışır.
• Hafif — Yüzlerce KB bellekte çalışır.

4. Eklenti Sistemleri

Wasm, genişletilebilirlik açısından idealdir; uygulamalar, kullanıcının katkıda bulunduğu eklentileri güvenli bir şekilde çalıştırabilir:

// Application engine with Wasm plugin support
fn run_plugin(plugin_bytes: &[u8], input_data: &[u8]) -> Result<Vec<u8>, Error> {
    let engine = Engine::default();
    let module = Module::new(&engine, plugin_bytes)?;
    let store = Store::new(&engine, ());

    // Wasm plugin runs in a sandboxed environment
    let instance = Instance::new(&store, &module, &[])?;

    let result = instance.exports()
        .get_typed_function::<(i32, i32), i32>("process")?
        .call(&store, (input_ptr, input_len))?;

    Ok(read_result_from_memory(result))
}

Gerçek dünyadan örnekler:

• Shopify — WebAssembly tabanlı tema oluşturma.
• Elçi proxy — Trafik işlemeye yönelik Wasm filtreleri.
• Unity — Komut dosyası oluşturma çalışma zamanı Wasm'ı kullanır.

---

WebAssembly ve JavaScript karşılaştırması

Bakış açısı	JavaScript	Web Montajı
Dil	Yalnızca JS	40'tan fazla dil
Uygulamak	Yorumlanmış + JIT	Derlenmiş ikili
Performans	Kullanıcı arayüzü için iyi	Bilgi işlem için yerele yakın
DOM erişimi	Doğrudan	Dolaylı (JS aracılığıyla)
Hafıza	GC tarafından yönetilen	Manuel (doğrusal bellek)
Dosya boyutu	Daha büyük (kaynak + küçültülmüş)	Daha küçük (ikili)
Hata ayıklama	Olgun takımlar	Gelişen
Başlatmak	Ayrıştırma + derleme (soğuk)	Kod çözme + derleme (hızlı)
Güvenlik	Tarayıcı korumalı alanı	Korumalı alan + bellek güvenliği

Hangisi ne zaman kullanılır:

• JavaScript — DOM manipülasyonu, kullanıcı etkileşimi, ağ oluşturma, küçük uygulamalar.
• WebAssembly — Yoğun bilgi işlem gerektiren görevler, oyun motorları, görüntü/video işleme, yerel kitaplıkları taşıma.

En iyi uygulama: Kullanıcı arayüzü katmanı için JS'yi, performans açısından kritik hesaplamalar için Wasm'ı kullanın.

---

WebAssembly Ekosistemi

Geliştirme Araçları

Alet	Amaç	Diller
wasm-pack	Rust Wasm paketlerini oluşturun, test edin ve yayınlayın	Pas
Etiket	C/C++'ı Wasm'a derleyin	C, C++
TinyGo	Wasm desteğiyle derleyiciye gidin	Gitmek
wasm-bingen	Üst düzey JS-Wasm birlikte çalışma	Pas
zamanımdı	Bağımsız Wasm çalışma zamanı (WASI)	Herhangi bir Wasm
smer	Evrensel Wasm çalışma zamanı	Herhangi bir Wasm
WABT	Wasm ikili araç seti	Toplantı

Standart Kütüphane ve Çerçeveler

• stdweb / web-sys — Tarayıcı API'leri için Rust bağlamaları.
• Yew — Wasm web uygulamaları oluşturmaya yönelik Rust çerçevesi (React benzeri).
• Leptos — Wasm ile Rust tam yığın web çerçevesi.
• Blazor WebAssembly — Tarayıcıda Wasm aracılığıyla çalışan C#/.NET çerçevesi.

Hata ayıklama

# Enable DWARF debug info in Wasm
wasm-pack build --debug

# Browser DevTools support
# Chrome: Sources → WebAssembly → .wasm files
# Firefox: Debugger → WebAssembly

---

Sınırlamalar ve Zorluklar

1. DOM Erişimi

Wasm, DOM'u doğrudan değiştiremez. JavaScript'ten geçmesi gerekir:

// Wasm → JS bridge (currently required for DOM)
// Wasm calls JS function → JS modifies DOM → result back to Wasm

Gelecek: WebIDL bağlamaları ve GC teklifi sonunda doğrudan DOM erişimine izin verecektir.

2. Çöp Toplama (GC Önerisi)

Şu anda Wasm'da manuel bellek yönetimi bulunmaktadır. GC teklifi (4. aşama, 2026-2027'de bekleniyor) şunları ekleyecektir:

• Yönetilen diller için destek (Java, Kotlin, Dart, Python).
• Referans türleri ve nesne grafikleri.
• Wasm içerisinde otomatik hafıza yönetimi.

3. Diş Açma

Wasm iş parçacıkları tarayıcılarda "SharedArrayBuffer" ve "Atomic" işlemleri aracılığıyla desteklenir, ancak belirli HTTP başlıkları gerektirir:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

4. Hata ayıklama

Wasm hata ayıklaması JavaScript'ten daha az gelişmiştir:

• Wasm için kaynak haritaları desteklenir (Rust, C++, DWARF aracılığıyla).
• Adım adım hata ayıklama Chrome ve Firefox'ta çalışır.
• Değişken denetim JS'ye kıyasla sınırlıdır.

5. Takım Olgunluğu

• Derleme işlem hatları, yalnızca JS projelerinden daha karmaşıktır.
• Bağımlılık yönetimi kaynak dile göre değişir.
• Hata mesajları şifreli olabilir (özellikle Emscripten'den).

---

WebAssembly'ın Geleceği

Bileşen Modeli

Bileşen modeli, Wasm modüllerinin nasıl etkileşime girdiğini standartlaştırır:

// Component interface definition
(component
  (import "host" "console_log" (func (param string)))
  (export "process" (func))
)

Bu şunları sağlar:

• Dilden bağımsız kitaplık paylaşımı.
• Farklı dillerden Wasm bileşenlerinin bileşimi.
• Bir paket ekosistemi (https://wasm.pkg.dev).

WASIX / WASI 2.0

Genişletilmiş WASI spesifikasyonu şunları ekliyor:

• Soketler ve ağ iletişimi.
• Asenkron G/Ç.
• Yumurtlama süreci.
• Zaman ve rastgele sayı üretimi.

W3C İlerlemesi

Teklif	Durum	Darbe
GC (Çöp Toplama)	Aşama 4	Wasm'da yönetilen diller
Diş açma	Aşama 3 (tarayıcılar)	Gerçek paralellik
İstisna yönetimi	Aşama 3	Yapılandırılmış hata yönetimi
Kuyruk çağrısı optimizasyonu	Aşama 2	Verimli özyineleme
Bellek kontrolü	Aşama 2	İnce taneli bellek yönetimi
Sabit genişlikli SIMD	Zaten gönderiliyor	Paralel işleme

---

Çözüm

WebAssembly is transforming the web from a document viewer into a true application platform. Temel çıkarımlar:

1. Wasm bir JS katili değildir — Performans açısından kritik kodların tamamlayıcısıdır.
2. Rust, önde gelen Wasm dilidir — Güçlü ekosistem, güvenlik ve ergonomi.
3. Sunucu tarafı Wasm büyüyor — Container'lardan daha hızlı soğuk başlatma; sunucusuz kullanım için idealdir.
4. Eklenti sistemleri Wasm'dan yararlanır — Güvenilmeyen kod için güvenli korumalı alan oluşturma.
5. Standartlar hızla gelişiyor — GC, iş parçacığı ve bileşen modeli yeni kullanım örneklerinin kilidini açacak.

Çoğu web geliştiricisi için Wasm'ın benimsenmesi, görüntü işleme, veri sıkıştırma, karmaşık hesaplamalar gibi belirli performans darboğazlarıyla başlayabilir. Araçlar olgunlaştıkça ve standartlar istikrara kavuştukça Wasm, web geliştirme araç kutusunun standart bir parçası haline gelecektir.