WebAssembly ile Tarayıcıda Yüksek Performans: Rust Kullanarak Adım Adım İlk Modülünü Yayınla

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.

WebAssembly ile Tarayıcıda Rust Çalıştırma: Performans Odaklı Kurulum ve Gerçekçi Kullanım Senaryoları

WebAssembly (Wasm) Nedir ve Neden Rust?

Tarayıcıda “native’e yakın” hız hedefleyen herkesin yolu bir noktada WebAssembly (Wasm) ile kesişiyor. Wasm; JavaScript’in yerine geçmekten çok, onu tamamlamak için tasarlanmış taşınabilir bir düşük seviye bytecode formatı. Performansın kritik olduğu yerlerde (görüntü işleme, kriptografi, veri sıkıştırma, oyun motoru parçaları, büyük veri dönüşümleri vb.) JavaScript tarafında zorlanan işlemleri Wasm’a taşıyabiliyorsunuz.

Bu noktada Rust pratik bir tercih: bellek güvenliği yaklaşımı, güçlü derleyici optimizasyonları ve Wasm ekosisteminin olgunlaşması sayesinde tarayıcı hedefleri için oldukça düzgün bir geliştirme deneyimi sunuyor. Bu yazıda, Blogger’da yayınlanabilir şekilde, sıfırdan Rust + Wasm projesi hazırlayıp tarayıcıda çalıştırmayı ve gerçek hayatta işinize yarayacak püf noktalarını adım adım ele alıyorum.

Ön Koşullar

Kuruluma başlamadan önce sisteminizde Rust ve Node.js bulunmalı. Rust için resmi kurulum aracı rustup yeterli. Node.js tarafında LTS sürüm tercih edin. Ayrıca yerel geliştirme için basit bir web sunucusu kullanacağız (Vite veya benzeri). Örnekleri macOS, Linux ve Windows’ta uygulayabilirsiniz; komutlar büyük ölçüde aynı.

1) Rust’ı Wasm Hedefiyle Hazırlama

İlk adım olarak Rust’ın WebAssembly hedefini ekleyin. Terminalde şu komutu çalıştırın:

rustup target add wasm32-unknown-unknown

Bu hedef, Rust kodunu Wasm bytecode’una derlemenizi sağlar. Ancak tarayıcıyla daha rahat entegrasyon için çoğu projede bir adım daha ileri gidip wasm-bindgen ve wasm-pack kullanılır. wasm-pack, proje iskeletini yönetir, derler ve JavaScript bağlayıcılarını üretir.

2) wasm-pack Kurulumu ve Proje Oluşturma

wasm-pack’i Rust’ın paket yöneticisi Cargo ile kurun:

cargo install wasm-pack

Ardından yeni bir kütüphane projesi oluşturun:

cargo new --lib hizli-wasm

Klasöre girip Cargo.toml dosyanıza wasm-bindgen bağımlılığını ekleyin. Dosyanın ilgili kısmı kabaca şöyle olmalı:

[dependencies]
wasm-bindgen = "0.2"

3) Rust Kodunu Tarayıcıya Açma (wasm-bindgen)

src/lib.rs içine basit ama ölçülebilir bir örnek koyun. Örneğin bir dizi içindeki sayıları filtreleyip toplamak gibi CPU’ya yük bindiren işleri Wasm’a taşımak yaygın bir yaklaşım. Örnek mantık: dışarıdan bir sayı listesi al, tek sayıları süz, kalanları topla. wasm-bindgen ile fonksiyonu dışa açabilirsiniz:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn ciftleri_topla(nums: Vec<u32>) -> u32 {
  nums.into_iter().filter(|n| n % 2 == 0).sum()
}

Buradaki önemli nokta: Tarayıcıya “güvenli” ve “anlaşılır” bir arayüz vermek. Karmaşık veri tipleri mümkündür ama başlangıçta sayılar ve basit diziler üzerinden ilerlemek, performans ve hata ayıklama açısından daha stabildir.

4) Derleme: Wasm Paketini Üretme

Proje klasöründe şu komutu çalıştırın:

wasm-pack build --target web

Komut tamamlandığında pkg adlı bir klasör oluşur. İçinde .wasm dosyası, JavaScript sarmalayıcısı ve package.json benzeri çıktılar yer alır. Bu klasör, web projenizde “modül” gibi kullanılabilir.

5) Vite ile Basit Bir Web Arayüzü

Wasm çıktısını hızlıca test etmek için Vite iyi bir seçenek. Ayrı bir klasörde Vite projesi oluşturun:

npm create vite@latest web-arayuz -- --template vanilla

Klasöre girip bağımlılıkları kurun:

cd web-arayuz
npm install

Ardından Rust projenizdeki pkg klasörünü web-arayuz içine kopyalayın (örneğin web-arayuz/src/pkg). Sonra src/main.js içinde Wasm modülünü içe aktarın:

import init, { ciftleri_topla } from "./pkg/hizli_wasm.js";

async function run() {
  await init();
  const nums = Array.from({ length: 100000 }, (_, i) => i);
  const sonuc = ciftleri_topla(nums);
  console.log("Sonuç:", sonuc);
}

run();

Son olarak geliştirme sunucusunu başlatın:

npm run dev

Tarayıcı konsolunda sonucu görüyorsanız temel entegrasyon tamamdır. Buradan sonra UI ekleyebilir, girdileri form üzerinden alabilir ya da daha gerçekçi veri işleme senaryolarına geçebilirsiniz.

Performans ve Gerçek Hayat İpuçları

Wasm her zaman otomatik olarak “daha hızlı” demek değildir. Kazanç, işin türüne göre değişir. Sık çağrılan küçük fonksiyonlarda JavaScript ↔ Wasm sınırı (FFI) maliyeti baskın hale gelebilir. Bu yüzden çok küçük işleri binlerce kez çağırmak yerine, mümkünse işi Wasm tarafında daha “toplu” yapacak şekilde tasarlayın.

Ayrıca tarayıcı tarafında bellek kopyaları önemli bir maliyet kalemidir. Büyük dizileri sürekli Rust’a geçirip geri almak yerine, veri akışını minimize edin. Daha ileri senaryolarda TypedArray ile bellek paylaşımı ve wasm-bindgen’in sunduğu yardımcılar gündeme gelir; fakat temel kurulum oturduktan sonra bu optimizasyonlara geçmek daha sağlıklı olur.

Hata Ayıklama ve Yaygın Sorunlar

En sık görülen problem, yanlış hedefle derleme veya modülün doğru yüklenmemesidir. Vite gibi bundler’lar ESM modüllerle iyi çalışır; bu yüzden wasm-pack build --target web seçimi önemlidir. Eğer “Failed to load module script” gibi hatalar alıyorsanız, dosya yollarını ve modül import biçimini kontrol edin.

Bir diğer konu da sürüm uyumsuzluklarıdır. wasm-bindgen sürümü yükseldiğinde, eski çıktılarla karışıklık yaşayabilirsiniz. Böyle durumlarda pkg klasörünü temizleyip yeniden derlemek genellikle sorunu çözer.

Sonuç

Rust ile WebAssembly kullanarak tarayıcıya performans odaklı bir modül eklemek, doğru kurulum yapıldığında şaşırtıcı derecede pratik. Bu rehberde Rust hedefini ekledik, wasm-pack ile derleme çıktısı ürettik ve Vite üzerinden tarayıcıda çalıştırdık. Buradan sonra gerçek bir uygulamada kriptografi, görüntü dönüştürme, sıkıştırma veya büyük veri filtreleme gibi alanlarda Wasm’ın avantajını daha net görmeye başlayacaksınız.