Giriş: Neden WebAssembly (Wasm)?
Web uygulamalarında performans ihtiyacı arttıkça, tarayıcının “sadece JavaScript” ile sınırlı olmadığı gerçeği daha fazla önem kazanıyor. WebAssembly (Wasm), C/C++ veya Rust gibi dillerle derlenen kodu tarayıcıda güvenli bir sanal makinede çalıştırarak, özellikle CPU yoğun işlerde (şifreleme, görüntü işleme, sıkıştırma, fizik simülasyonları, veri pars etme) ciddi hız avantajı sunuyor. Bu yazıda ileri seviye ama uygulanabilir bir örnekle, Rust kullanarak Wasm modülü üretmeyi ve bunu modern bir web projesinde çalıştırmayı adım adım anlatacağım.
Hangi Senaryolarda Wasm Mantıklı?
Wasm her şeyin ilacı değil. DOM manipülasyonu, UI güncellemeleri ve tipik CRUD akışları JavaScript/TypeScript ile zaten yeterince hızlıdır. Wasm’ın güçlü olduğu taraf, hesaplama ağırlıklı fonksiyonları izole edip hızlandırmaktır. Örneğin JSON parse etmek yerine ikili format işlemek, büyük diziler üzerinde matematik, kripto, audio DSP veya WebGPU öncesi hazırlık işlemleri gibi alanlarda fark yaratır. Ayrıca Rust tarafında bellek güvenliği avantajı da cabasıdır.
Kurulum: Rust + Wasm Toolchain
Öncelikle Rust kurulu olmalı. Rust’ın resmi aracı olan rustup ile kurulum yaptıktan sonra Wasm hedefini ekleyeceğiz. Ardından JavaScript ile köprü kurmayı kolaylaştıran wasm-bindgen ekosisteminden yararlanacağız. Terminalde aşağıdaki adımları uygulayın:
1) Wasm hedefi: rustup target add wasm32-unknown-unknown
2) wasm-pack (opsiyonel ama pratik): cargo install wasm-pack
wasm-pack, derleme ve paketleme sürecini tek komutla yönetmenizi sağlar. Bu sayede npm tabanlı projelere Wasm çıktısını daha rahat entegre edebilirsiniz.
Örnek Proje: Rust ile Hızlı Fibonacci (Memoization’lı)
Klasik Fibonacci örneği basit görünse de, burada amaç “Wasm köprüsü” kurmayı göstermek. Gerçek projede benzer şekilde sık çağrılan fonksiyonlarınızı Wasm’a taşıyabilirsiniz. Yeni bir klasör açıp Rust kütüphanesini oluşturalım:
cargo new --lib wasm-fibo
Proje klasöründe Cargo.toml dosyasını Wasm uyumlu hale getirelim. Kütüphaneyi cdylib olarak derlemek gerekiyor. Ayrıca wasm-bindgen ekleyeceğiz:
Cargo.toml içinde şu alanlar olmalı:
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = "0.2"
Şimdi src/lib.rs dosyasını düzenleyelim. Basit bir memoization yaklaşımıyla, büyük n değerlerinde gereksiz tekrar hesaplamayı azaltacağız:
Not: Rust’ta Wasm tarafında performans için panik mesajlarını kapatmak, uygun allocator seçmek gibi ek optimizasyonlar da yapılabilir; ama bu yazıda temeli sağlam kurmaya odaklanıyoruz.
src/lib.rs örneği:
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fib(n: u32) -> u64 {
let mut a: u64 = 0;
let mut b: u64 = 1;
for _ in 0..n {
let tmp = a + b;
a = b;
b = tmp;
}
a
}
Derleme: wasm-pack ile Paket Üretmek
Şimdi derleyelim. Proje kök dizininde:
wasm-pack build --target web
Bu komut, pkg adlı bir klasör oluşturur. İçinde .wasm dosyası, JavaScript bağlayıcıları ve package.json benzeri paket metadata’ları yer alır. --target web seçeneği, doğrudan tarayıcıda ES Module olarak kullanım senaryosuna uygundur.
Tarayıcıda Kullanım: Minimal HTML + JS
Wasm çıktısını bir web projesinde kullanmak için birçok yol var: Vite, Webpack, Next.js veya sadece statik dosyalar. En kolay anlaşılır yöntem için “düz” bir kullanım mantığını tarif edelim: pkg klasörünü web kökünüze kopyalayın ve modülü ES Module olarak import edin.
Örnek JavaScript (ör. main.js) akışı şu şekilde olur:
import init, { fib } from "./pkg/wasm_fibo.js";
async function run() {
await init();
console.log("fib(50) =", fib(50));
}
run();
Buradaki kritik nokta init() fonksiyonudur. Wasm modülünün yüklenmesi ve başlatılması bu aşamada gerçekleşir. Eğer init çağrısını atlar veya yanlış path verirseniz, tarayıcı modülü bulamaz ya da instantiate edemez.
Performans İpuçları ve Sık Yapılan Hatalar
1) Veri kopyalama maliyetine dikkat: Wasm ile JS arasında büyük diziler taşıyorsanız, asıl darboğaz “kopyalama” olabilir. Mümkün olduğunca TypedArray ve paylaşımlı bellek (uygun senaryolarda) stratejilerini araştırın.
2) Küçük fonksiyonları Wasm’a taşımayın: Çok sık ama çok küçük işler için köprü maliyeti performansı düşürebilir. Wasm’ı “toplu iş” mantığıyla kullanmak genelde daha verimlidir.
3) Release derleme kullanın: wasm-pack zaten uygun optimizasyonları hedefler; yine de üretimde “debug” benzeri çıktılarla test yapmayın. Boyut ve hız farkı barizdir.
4) Hata ayıklama yaklaşımı: Rust tarafında panik durumlarını yönetmek ve tarayıcı konsolunda anlamlı hata görmek için ek araçlar (ör. console_error_panic_hook) kullanılabilir. Proje büyüdükçe bu tür “geliştirici deneyimi” bağımlılıkları ciddi zaman kazandırır.
Sonuç: Rust + Wasm ile Modern Web’e Performans Katmanı
Bu rehberde, Rust ile basit bir fonksiyonu WebAssembly’ye derleyip tarayıcıda çalıştırmanın temel yolunu kurduk. Buradaki yapı taşları gerçek projelerde de aynıdır: Rust tarafında Wasm uyumlu kütüphane, wasm-bindgen ile arayüz, wasm-pack ile paketleme ve tarayıcıda modül yükleme. Eğer uygulamanızda CPU yoğun bir bölüm varsa, doğru tasarımla Wasm size hem performans hem de daha güvenli bir kod tabanı sağlayabilir.
