Rust WebAssembly (Wasm), Rust kodunu tarayıcılarda ve sunucu ortamlarında çalışan bir ikili formata derleyerek web uygulamalarına neredeyse yerel performans sağlar. Rust'ın bellek güvenliği garantileri ile WebAssembly'nin sandbox'lı yürütmesinin birleşimi, görüntü işlemeden kriptografik operasyonlara kadar performans kritik web bileşenleri için güçlü bir temel oluşturur.

Önemli Bilgi

Rust, wasm-pack ve wasm-bindgen aracılığıyla WebAssembly'ye derlenir ve JavaScript'in doğrudan içe aktarıp çağırabileceği modüller üretir. İş akışı, Rust fonksiyonları yazmayı, bunları #[wasm_bindgen] ile işaretlemeyi, .wasm'a derlemeyi ve oluşturulan JavaScript yapıştırıcı kodunu herhangi bir web uygulamasına içe aktarmayı içerir.

WebAssembly Geliştirme İçin Rust Kurulumu

Rust araç zinciri, WebAssembly modülleri oluşturmak için wasm32-unknown-unknown hedefini ve wasm-pack'i gerektirir. Bu araçlar derleme, optimizasyon ve JavaScript bağlama oluşturmayı otomatik olarak yönetir.

bash

# install-wasm-tools.sh
# rustup'a WebAssembly hedefini ekle
rustup target add wasm32-unknown-unknown

# Oluşturma ve paketleme için wasm-pack'i yükle
cargo install wasm-pack

# Kurulumu doğrula
wasm-pack --version

Kurulumdan sonra, WebAssembly çıktısı için yapılandırılmış yeni bir kütüphane crate'i oluşturulmalıdır. Cargo.toml dosyası Wasm uyumluluğu için belirli ayarlar gerektirir.

toml

# Cargo.toml
[package]
name = "wasm-calculator"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2.100"

[profile.release]
opt-level = "z"      # Boyut için optimize et
lto = true           # Link-time optimizasyonu

cdylib crate türü, WebAssembly için uygun bir dinamik kütüphane üretir. Release profili optimizasyonları, son .wasm dosya boyutunu önemli ölçüde azaltır — optimize edilmemiş derlemelere kıyasla genellikle %50 veya daha fazla.

wasm-bindgen ve JavaScript İnteroperabilitesini Anlama

wasm-bindgen crate'i, otomatik olarak tip güvenli bağlamalar oluşturarak Rust ve JavaScript arasında köprü kurar. #[wasm_bindgen] ile işaretlenen fonksiyonlar JavaScript'ten çağrılabilir hale gelirken, JavaScript fonksiyonları Rust'a içe aktarılabilir.

src/lib.rsrust

use wasm_bindgen::prelude::*;

// Bu fonksiyonu JavaScript'e dışa aktar
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    // Özyineleme için temel durumlar
    match n {
        0 => 0,
        1 => 1,
        // Kuyruk çağrısı optimizasyonlu özyinelemeli hesaplama
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// JavaScript'ten console.log'u içe aktar
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// console.log kullanan bir fonksiyonu dışa aktar
#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Merhaba, {}!", name));
}

extern "C" bloğu, Rust kodunun çağırabileceği JavaScript fonksiyonlarını bildirir. js_namespace özniteliği, fonksiyonu içeren JavaScript nesnesini belirtir. Bu çift yönlü bağlama, Rust mantığı ile JavaScript API'leri arasında sorunsuz entegrasyonu mümkün kılar.

WebAssembly Modüllerini Oluşturma ve Paketleme

wasm-pack build komutu Rust'ı WebAssembly'ye derler ve JavaScript sarmalayıcı kodu üretir. Farklı hedefler farklı JavaScript ortamlarına uygundur.

bash

# build-wasm.sh
# webpack, Vite veya Rollup gibi bundler'lar için oluştur
wasm-pack build --target bundler --release

# Yerel ES modülleri için oluştur (tarayıcı)
wasm-pack build --target web --release

# Node.js için oluştur
wasm-pack build --target nodejs --release

Her hedef pkg/ dizininde farklı çıktı üretir. Bundler hedefi, ES modüllerini ve WebAssembly içe aktarmalarını destekleyen modern JavaScript bundler'larıyla çalışır. Web hedefi, <script type="module"> aracılığıyla tarayıcılarda doğrudan yüklenen kod üretir.

main.jsjavascript

// Oluşturulan WebAssembly modülünü içe aktar
import init, { fibonacci, greet } from './pkg/wasm_calculator.js';

async function run() {
    // WebAssembly modülünü başlat
    await init();
    
    // Dışa aktarılan Rust fonksiyonlarını çağır
    const result = fibonacci(20);
    console.log(`fibonacci(20) = ${result}`);
    
    greet('WebAssembly');
}

run();

init() fonksiyonu .wasm dosyasını asenkron olarak alır ve derler. Başlatmadan sonra, dışa aktarılan fonksiyonlar normal JavaScript fonksiyonları gibi davranır ve wasm-bindgen tip dönüşümlerini otomatik olarak yönetir.

Rust mülakatlarında başarılı olmaya hazır mısın?

İnteraktif simülatörler, flashcards ve teknik testlerle pratik yap.

Rust keşfet

Karmaşık Tiplerle ve Bellekle Çalışma

WebAssembly doğrusal bellek üzerinde çalışır — sürekli bir bayt bloğu. Rust ve JavaScript arasında karmaşık tiplerin aktarılması serileştirme veya doğrudan bellek manipülasyonu gerektirir. wasm-bindgen crate'i çoğu yaygın tipi otomatik olarak yönetir.

src/lib.rsrust

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

// wasm-bindgen için serde desteğini etkinleştir
#[derive(Serialize, Deserialize)]
pub struct Point {
    pub x: f64,
    pub y: f64,
}

// JavaScript nesnelerini kabul et ve döndür
#[wasm_bindgen]
pub fn distance(a: JsValue, b: JsValue) -> Result<f64, JsValue> {
    // JavaScript nesnelerini Rust struct'larına deserialize et
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    // Öklid mesafesini hesapla
    let dx = point_b.x - point_a.x;
    let dy = point_b.y - point_a.y;
    
    Ok((dx * dx + dy * dy).sqrt())
}

// Rust struct'ını JavaScript nesnesi olarak döndür
#[wasm_bindgen]
pub fn midpoint(a: JsValue, b: JsValue) -> Result<JsValue, JsValue> {
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    let mid = Point {
        x: (point_a.x + point_b.x) / 2.0,
        y: (point_a.y + point_b.y) / 2.0,
    };
    
    // Rust struct'ını JavaScript nesnesine serialize et
    Ok(serde_wasm_bindgen::to_value(&mid)?)
}

serde-wasm-bindgen crate'i (Cargo.toml'a ekleyin: serde-wasm-bindgen = "0.6" ve serde = { version = "1.0", features = ["derive"] }) JavaScript nesneleri ile Rust tipleri arasında verimli dönüşüm sağlar. Performans kritik kod için, js_sys ve web_sys crate'leri aracılığıyla doğrudan bellek erişimi serileştirme yükünü ortadan kaldırır.

WebAssembly Performansını ve Boyutunu Optimize Etme

WebAssembly modülleri çeşitli optimizasyon tekniklerinden yararlanır. Boyut azaltma yükleme sürelerini iyileştirirken, algoritmik optimizasyonlar çalışma zamanı performansını artırır. Binaryen'den wasm-opt aracı, derleme sonrası ek optimizasyonlar sağlar.

bash

# optimize-wasm.sh
# wasm-opt için binaryen'i yükle
# macOS'ta: brew install binaryen
# Ubuntu'da: apt install binaryen

# Agresif boyut optimizasyonları uygula
wasm-opt -Oz -o pkg/wasm_calculator_opt.wasm pkg/wasm_calculator_bg.wasm

# Bunun yerine hız optimizasyonları uygula
wasm-opt -O3 -o pkg/wasm_calculator_fast.wasm pkg/wasm_calculator_bg.wasm

Ek Cargo.toml ayarları çıktı boyutunu daha da azaltır:

toml

# Cargo.toml - ek optimizasyonlar
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true

Bu ayarlar, link-time optimizasyonunu etkinleştirerek, paralel kod üretimini azaltarak ve debug sembollerini çıkararak mümkün olan en küçük çıktıyı üretir. Basit bir Wasm modülü, uygun optimizasyonla 100KB'dan 20KB'ın altına düşebilir.

Pratik Kullanım Örneği: Tarayıcıda Görüntü İşleme

WebAssembly, görüntü işleme gibi yoğun hesaplama gerektiren görevlerde mükemmeldir. Aşağıdaki örnek, görüntü verilerine gri tonlama filtresi uygulayarak maksimum performans için doğrudan bellek erişimini gösterir.

src/lib.rsrust

use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

#[wasm_bindgen]
pub fn grayscale(data: Clamped<Vec<u8>>, width: u32, height: u32) -> Clamped<Vec<u8>> {
    let mut pixels = data.0;
    let len = (width * height * 4) as usize;
    
    // Her pikseli işle (RGBA formatı)
    for i in (0..len).step_by(4) {
        // Standart katsayılar kullanarak parlaklık hesapla
        let r = pixels[i] as f32;
        let g = pixels[i + 1] as f32;
        let b = pixels[i + 2] as f32;
        
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        // RGB kanallarını gri tonlama değerine ayarla
        pixels[i] = gray;     // R
        pixels[i + 1] = gray; // G
        pixels[i + 2] = gray; // B
        // Alfa kanalı (i + 3) değişmeden kalır
    }
    
    Clamped(pixels)
}

JavaScript tarafı, canvas'tan piksel verilerini çıkarır, Wasm'a aktarır ve sonucu render eder:

image-processor.jsjavascript

import init, { grayscale } from './pkg/image_processor.js';

async function applyGrayscale(canvas) {
    await init();
    
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // Piksel verilerini WebAssembly'ye aktar
    const result = grayscale(imageData.data, canvas.width, canvas.height);
    
    // İşlenmiş piksellerle yeni ImageData oluştur
    const processed = new ImageData(result, canvas.width, canvas.height);
    ctx.putImageData(processed, 0, 0);
}

Bu yaklaşım saniyede milyonlarca pikseli işler — eşdeğer JavaScript kodundan önemli ölçüde daha hızlı. Tipik bir dizüstü bilgisayardaki kıyaslamalar, görüntü işlemleri için 3-5 kat hızlanma gösterir.

Mülakat Soruları: Rust WebAssembly Kavramları

Rust WebAssembly kavramlarını anlamak, sistem programlama bilgisini gösterir. Bu sorular, performans odaklı web geliştirme rolleri için mülakatlarda sıkça karşılaşılır.

S: wasm-bindgen ile JavaScript interoperabilitesi arasındaki ilişki nedir?

wasm-bindgen, Rust ve JavaScript arasında tip dönüşümlerini yöneten JavaScript yapıştırıcı kodu üretir. Her dışa aktarılan Rust fonksiyonu için bellek tahsisi, string kodlama ve karmaşık tip serileştirmesini yöneten bir JavaScript sarmalayıcı oluşturur. wasm-bindgen olmadan, geliştiricilerin WebAssembly doğrusal belleğini manuel olarak yönetmesi ve kendi serileştirme protokollerini uygulaması gerekir.

S: WebAssembly neden doğrusal bellek kullanır ve bunun sonuçları nelerdir?

WebAssembly'nin doğrusal belleği, hem JavaScript hem de Wasm kodunun erişebildiği sürekli, yeniden boyutlandırılabilir bir bayt dizisidir. Bu tasarım, sınır kontrolü ve sandbox aracılığıyla bellek güvenliği sağlar. Sonucu olarak, karmaşık veri yapılarının aktarılması ya verilerin doğrusal belleğe kopyalanmasını ya da dikkatli yaşam süresi yönetimiyle referans kullanımını gerektirir. Rust'ın sahiplik modeli bu kısıtlamayla iyi uyum sağlar, çünkü derleme zamanında sarkan işaretçileri ve veri yarışlarını önler.

S: Rust'ın no_std modu WebAssembly geliştirmesine nasıl fayda sağlar?

#![no_std] özniteliği Rust standart kütüphanesini hariç tutarak daha küçük Wasm ikili dosyaları üretir. std olmadan, geliştiriciler temel işlevsellik için core ve alloc crate'lerini kullanır. Bu yaklaşım paket boyutunu dramatik olarak azaltır — basit modüller için ~100KB'dan ~10KB'a. Takas, String, Vec ve standart I/O gibi kolaylıkları kaybetmektir, ancak alloc gerektiğinde heap-tahsisli tipler sağlar.

WebAssembly geliştirmesini tamamlayan Rust async kalıplarının daha derin incelemesi için, async/await modül soruları sayfasına bakabilirsiniz.

WebAssembly Modüllerini Debug Etme ve Test Etme

Etkili test, hem Rust tarafı birim testleri hem de tarayıcı entegrasyon testleri gerektirir. wasm-pack test komutu testleri headless tarayıcı ortamında çalıştırır.

src/lib.rsrust

#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    // Testleri tarayıcıda çalışacak şekilde yapılandır
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_fibonacci() {
        assert_eq!(fibonacci(0), 0);
        assert_eq!(fibonacci(1), 1);
        assert_eq!(fibonacci(10), 55);
    }
    
    #[wasm_bindgen_test]
    fn test_greet() {
        // Bu test greet'in panik yapmadığını doğrular
        greet("Test User");
    }
}

Chrome veya Firefox ile tarayıcı testlerini çalıştırın:

bash

# test-wasm.sh
# Headless Chrome'da testleri çalıştır
wasm-pack test --headless --chrome

# Headless Firefox'ta testleri çalıştır
wasm-pack test --headless --firefox

Debug için source map'leri ve konsol çıktısını etkinleştirin. console_error_panic_hook crate'i tarayıcı konsolunda anlamlı panik mesajları sağlar:

src/lib.rsrust

use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}

Cargo.toml'a ekleyin: console_error_panic_hook = "0.1". Bu kurulum, şifreli WebAssembly hataları yerine tarayıcı geliştirici araçlarında Rust panik mesajlarını görüntüler.

Sonuç

Rust, wasm-pack aracılığıyla WebAssembly'ye derlenir ve otomatik tip dönüşümleriyle JavaScript'ten çağrılabilir modüller üretir
#[wasm_bindgen] özniteliği fonksiyonları dışa aktarmak için işaretler; extern "C" blokları JavaScript fonksiyonlarını Rust'a içe aktarır
Boyut optimizasyonları (opt-level = "z", lto = true, wasm-opt -Oz) paket boyutunu %50-80 azaltır
Karmaşık tipler JSON benzeri serileştirme için serde-wasm-bindgen üzerinden veya maksimum performans için doğrudan bellek erişimiyle aktarılır
Görüntü işleme, kriptografi ve yoğun hesaplama algoritmaları JavaScript uygulamalarına kıyasla 3-5 kat hızlanma görür
wasm-pack test --headless ile tarayıcı testi hem Rust mantığını hem de JavaScript entegrasyonunu doğrular