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.
