WebAssembly Nedir: Webin Yeni Performans Devrimi

Yazar:komut.io ekibi
0 Yorum

Web uygulamalarının performans sınırlarını zorladığı bir dönemde, JavaScript’in yalnız başına taşıyamayacağı yükler ortaya çıkmaya başladı. Video düzenleme, 3D rendering, bilimsel hesaplama, oyun motorları… Bunların hepsi tarayıcıda çalışması beklenen ama JavaScript’in hız sınırlarına sürekli çarpan senaryolar. İşte tam bu noktada WebAssembly sahneye girdi ve web platformunun oyununu tamamen değiştirdi.

WebAssembly Nedir?

WebAssembly, kısaca WASM olarak da bilinen, tarayıcıda çalışabilen düşük seviyeli bir binary format ve sanal makine spesifikasyonudur. 2019 yılında W3C tarafından resmi bir web standardı olarak kabul edildi. Ama sadece “tarayıcıda çalışan hızlı kod” demek, işin özünü tam anlatmıyor.

WASM’ı özel kılan şu: C, C++, Rust, Go gibi dillerde yazdığın kodu derleyip tarayıcıda çalıştırabiliyorsun. Bu kod native uygulamaya yakın hızlarda çalışıyor. Mozilla, Google, Microsoft ve Apple’ın ortak geliştirdiği bu standart, web platformuna gerçek anlamda sistem programlama kapısını açtı.

WASM bir derlenmiş format. JavaScript gibi yorumlanmıyor, doğrudan tarayıcının sanal makinesinde binary olarak çalışıyor. Bu nedenle parse edilmesi çok daha hızlı, optimize edilmesi çok daha kolay.

Stack Tabanlı Sanal Makine Mantığı

WASM, stack tabanlı bir sanal makine üzerinde çalışır. Her şey bir yığın (stack) mantığıyla işlenir. Kayıtlar yok, yığından değer alırsın, işlem yaparsın, yığına geri koyarsın.

# Basit bir WASM text format örneği (.wat dosyası)
# İki sayıyı toplayan bir fonksiyon

cat > toplama.wat << 'EOF'
(module
  (func $topla (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "topla" (func $topla))
)
EOF

# WAT formatını WASM binary formatına dönüştür
wat2wasm toplama.wat -o toplama.wasm

# Dosya boyutunu kontrol et
ls -lh toplama.wasm

Bu basit örnekte bile WASM’ın yapısını görüyorsun: modüller, fonksiyonlar, tipler ve export mekanizması. Text format (.wat) insan okunabilir, binary format (.wasm) ise tarayıcının direkt işlediği format.

Nasıl Çalışır: Derleme Süreci

WASM’ın çalışma mantığını anlamak için derleme pipeline’ına bakmak gerekiyor. Sysadmin olarak biz bunu bir build pipeline gibi düşünebiliriz.

# Rust ile basit bir WASM modülü oluşturma örneği

# Önce Rust ve wasm-pack kur
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

# Yeni bir Rust projesi oluştur
cargo new --lib wasm-hesaplama
cd wasm-hesaplama

# Cargo.toml dosyasını yapılandır
cat > Cargo.toml << 'EOF'
[package]
name = "wasm-hesaplama"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"
EOF
# src/lib.rs dosyasını yaz
cat > src/lib.rs << 'EOF'
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 faktoriyel(n: u64) -> u64 {
    if n == 0 {
        return 1;
    }
    n * faktoriyel(n - 1)
}
EOF

# WASM olarak derle
wasm-pack build --target web

# Çıktı dizinini kontrol et
ls -lh pkg/

Derleme tamamlandığında pkg/ dizininde .wasm dosyası ve bunu JavaScript’ten kullanmayı kolaylaştıran wrapper dosyaları oluşuyor. Bu wrapper’lar olmadan JavaScript ile WASM arasındaki veri alışverişi oldukça zahmetli olur.

C/C++ ile Emscripten Kullanımı

WASM dünyasında C/C++ projelerini dönüştürmek için en yaygın araç Emscripten’dir. Özellikle legacy C/C++ kütüphanelerini web’e taşımak için kritik.

# Emscripten kurulumu (Linux)
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

# Basit bir C dosyası oluştur
cat > goruntu_isleme.c << 'EOF'
#include <stdlib.h>
#include <string.h>

// Gri tonlama filtresi
void gri_tonlama(unsigned char* piksel_data, int genislik, int yukseklik) {
    int toplam_piksel = genislik * yukseklik;
    for (int i = 0; i < toplam_piksel; i++) {
        int offset = i * 4;
        unsigned char r = piksel_data[offset];
        unsigned char g = piksel_data[offset + 1];
        unsigned char b = piksel_data[offset + 2];
        unsigned char gri = (unsigned char)(0.299 * r + 0.587 * g + 0.114 * b);
        piksel_data[offset] = gri;
        piksel_data[offset + 1] = gri;
        piksel_data[offset + 2] = gri;
    }
}
EOF

# WASM olarak derle
emcc goruntu_isleme.c 
  -O3 
  -o goruntu_isleme.js 
  -s WASM=1 
  -s EXPORTED_FUNCTIONS='["_gri_tonlama"]' 
  -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

# Oluşan dosyaları kontrol et
ls -lh goruntu_isleme.*

-O3 flag’i agresif optimizasyon anlamına geliyor. WASM için bu optimizasyon seviyeleri kritik çünkü dosya boyutunu ve çalışma hızını doğrudan etkiliyor.

JavaScript ile WASM Entegrasyonu

WASM tek başına çalışmaz. JavaScript ile el ele çalışır. Bu ortaklık çok önemli: WASM ağır hesaplamayı yapar, JavaScript DOM ve API işlerini halleder.

// index.html içinde WASM yükleme ve kullanma
async function wasmYukle() {
    try {
        // WASM modülünü fetch et
        const response = await fetch('toplama.wasm');
        const buffer = await response.arrayBuffer();
        
        // WebAssembly.instantiate ile modülü başlat
        const { instance } = await WebAssembly.instantiate(buffer, {
            env: {
                memory: new WebAssembly.Memory({ initial: 256 }),
                abort: () => console.error('WASM abort çağrıldı')
            }
        });
        
        // WASM fonksiyonunu çağır
        const sonuc = instance.exports.topla(15, 27);
        console.log(`15 + 27 = ${sonuc}`);
        
        // Fibonacci testi
        console.time('wasm-fibonacci');
        const fib40 = instance.exports.fibonacci(40);
        console.timeEnd('wasm-fibonacci');
        console.log(`Fibonacci(40) = ${fib40}`);
        
    } catch (hata) {
        console.error('WASM yüklenemedi:', hata);
    }
}

wasmYukle();
# Node.js ortamında WASM test etme (sunucu tarafı)
cat > test_wasm.js << 'EOF'
const fs = require('fs');

async function testEt() {
    const wasmBuffer = fs.readFileSync('./toplama.wasm');
    
    const { instance } = await WebAssembly.instantiate(wasmBuffer, {
        env: {
            memory: new WebAssembly.Memory({ initial: 256 })
        }
    });
    
    // Performans karşılaştırması
    const TEKRAR = 1000000;
    
    // WASM ile
    console.time('wasm-toplama');
    for (let i = 0; i < TEKRAR; i++) {
        instance.exports.topla(i, i + 1);
    }
    console.timeEnd('wasm-toplama');
    
    // Pure JS ile
    console.time('js-toplama');
    for (let i = 0; i < TEKRAR; i++) {
        i + (i + 1);
    }
    console.timeEnd('js-toplama');
}

testEt().catch(console.error);
EOF

node test_wasm.js

Gerçek Dünya Senaryoları

Teoria güzel ama sysadmin olarak bizi asıl ilgilendiren gerçek kullanım senaryoları. WASM’ın production’da ne işe yaradığına bakalım.

Senaryo 1: Figma Benzeri Web Uygulaması

Figma, tasarım araçlarını web’e taşırken C++ motorunu WASM’a derleyerek kullanıcılara native’e yakın performans sundu. Benzer bir yaklaşım düşünelim: tarayıcıda SVG/canvas üzerinde çalışan ağır bir rendering motoru.

# Wasmer ile sunucu taraflı WASM çalıştırma örneği
# Wasmer kurulumu
curl https://get.wasmer.io -sSfL | sh

# Bir WASM modülünü doğrudan çalıştır
wasmer run --dir /tmp toplama.wasm

# WASM modülü için benchmark
wasmer run --enable-all toplama.wasm -- --benchmark

# Wasmer'in WASI (WebAssembly System Interface) desteği ile
# dosya sistemi erişimi olan bir WASM uygulaması
wasmer run --dir /home/kullanici/data uygulama.wasm

Senaryo 2: Edge Computing ile WASM

Edge computing’de WASM son derece güçlü. Cloudflare Workers, Fastly Compute@Edge gibi platformlar WASM’ı edge node’larda çalıştırıyor. Sunucu gerektirmeden, kullanıcıya en yakın noktada hesaplama yapabiliyorsun.

# Wasmtime kurulumu (WASM runtime, sunucu tarafı)
curl https://wasmtime.dev/install.sh -sSf | bash

# WASM modülünü wasmtime ile çalıştır
wasmtime toplama.wasm

# WASI ile sistem çağrılarına izinli çalıştırma
wasmtime --dir /tmp --env HOME=/tmp uygulama.wasm

# Wasmtime ile performans profili
wasmtime --profile=guest uygulama.wasm

# İzolasyon testi: sadece belirli dizine erişim ver
wasmtime 
  --dir /var/app/data::/data 
  --env DATABASE_URL=sqlite:///data/app.db 
  backend.wasm

Bu izolasyon mekanizması sysadminler için çok değerli. WASM modülü sadece izin verdiğin kaynaklara erişebiliyor. Docker gibi ama çok daha hafif ve hızlı başlayan bir izolasyon.

Senaryo 3: Şifreleme ve Güvenlik İşlemleri

Tarayıcıda AES şifreleme, hash hesaplama gibi işlemler WASM ile ciddi hız kazanıyor. Web Crypto API ile kıyaslandığında bazı senaryolarda WASM daha fazla kontrol sunuyor.

// Rust ile yazılmış, WASM'a derlenecek şifreleme kodu
// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn sha256_hesapla(veri: &[u8]) -> Vec<u8> {
    // Basitleştirilmiş örnek - gerçekte sha2 crate kullanılır
    let mut hash = vec![0u8; 32];
    
    // XOR tabanlı basit hash (örnek amaçlı)
    for (i, &byte) in veri.iter().enumerate() {
        hash[i % 32] ^= byte;
        hash[i % 32] = hash[i % 32].wrapping_add(byte.wrapping_mul(31));
    }
    
    hash
}

#[wasm_bindgen]
pub fn base64_encode(veri: &[u8]) -> String {
    let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    let chars: Vec<char> = chars.chars().collect();
    let mut sonuc = String::new();
    
    for chunk in veri.chunks(3) {
        let b0 = chunk[0] as usize;
        let b1 = if chunk.len() > 1 { chunk[1] as usize } else { 0 };
        let b2 = if chunk.len() > 2 { chunk[2] as usize } else { 0 };
        
        sonuc.push(chars[(b0 >> 2) & 0x3F]);
        sonuc.push(chars[((b0 & 0x3) << 4) | ((b1 >> 4) & 0xF)]);
        sonuc.push(if chunk.len() > 1 { chars[((b1 & 0xF) << 2) | ((b2 >> 6) & 0x3)] } else { '=' });
        sonuc.push(if chunk.len() > 2 { chars[b2 & 0x3F] } else { '=' });
    }
    
    sonuc
}

WASM’ın Güvenlik Modeli

Sysadmin perspektifinden WASM’ın güvenlik modelini anlamak kritik. WASM sandbox içinde çalışır ve bu sandbox oldukça güçlü.

Bellek izolasyonu: Her WASM modülü kendi linear memory alanına sahip. Dışarıya doğrudan erişemez.

Capability-based güvenlik: WASI standardıyla birlikte WASM modülleri sadece açıkça verilen yeteneklere (dosya erişimi, ağ vs.) sahip olabiliyor.

Tip güvenliği: WASM statik olarak tiplenmiş. Çalışmadan önce doğrulama yapılıyor.

Kontrol akışı bütünlüğü: WASM’da rastgele adrese atlama yok. Kontrol akışı doğrulanıyor.

# WASM modülünün güvenlik özelliklerini kontrol et
# wasm-validate aracı ile modülü doğrula
wasm-validate benim_modulüm.wasm

# wasm2wat ile modülün içeriğini incele
wasm2wat benim_modulüm.wasm -o inceleme.wat
cat inceleme.wat

# Import ve export tablosunu görüntüle
wasm-objdump -x benim_modulüm.wasm

# Modülün kullandığı fonksiyonları listele
wasm-objdump -d benim_modulüm.wasm | grep "func["

Performans Optimizasyonu

WASM hızlı ama yanlış kullanılırsa bu hızı hissetmeyebilirsin. Özellikle JavaScript ile WASM arasındaki sınırı (boundary) sık geçmek ciddi overhead yaratıyor.

# WASM binary boyutunu optimize et
# wasm-opt aracı (Binaryen'den)
wasm-opt -O3 -o optimized.wasm original.wasm
wasm-opt -Oz -o small.wasm original.wasm  # boyut optimizasyonu

# Boyut karşılaştırması
echo "Orijinal:"
ls -lh original.wasm

echo "Hız optimize:"
ls -lh optimized.wasm

echo "Boyut optimize:"
ls -lh small.wasm

# wasm-strip ile debug bilgilerini kaldır
wasm-strip optimized.wasm

# gzip ile ek küçültme (HTTP transfer için)
gzip -9 -k optimized.wasm
ls -lh optimized.wasm.gz
# WASM için CI/CD pipeline örneği
cat > .github/workflows/wasm-build.yml << 'EOF'
name: WASM Build Pipeline

on:
  push:
    branches: [main]

jobs:
  build-wasm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Rust kurulumu
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
          target: wasm32-unknown-unknown
      
      - name: wasm-pack kurulumu
        run: cargo install wasm-pack
      
      - name: WASM derle
        run: wasm-pack build --target web --release
      
      - name: Boyut kontrolü
        run: |
          WASM_SIZE=$(stat -c%s pkg/*.wasm)
          echo "WASM boyutu: $WASM_SIZE bytes"
          if [ $WASM_SIZE -gt 1048576 ]; then
            echo "UYARI: WASM dosyası 1MB sınırını aştı!"
            exit 1
          fi
      
      - name: Artifaktları yükle
        uses: actions/upload-artifact@v3
        with:
          name: wasm-package
          path: pkg/
EOF

WASM’ın Geleceği ve WASI

WASM sadece tarayıcıyla sınırlı değil artık. WASI (WebAssembly System Interface), WASM’ı sunucu tarafında, container’larda ve IoT cihazlarında çalıştırmayı standardize ediyor.

Docker’ın kurucularından Solomon Hykes’ın meşhur sözü var: “Eğer 2008’de WASM ve WASI olsaydı, Docker’ı yaratmamıza gerek kalmayabilirdi.” Bu söz WASM’ın potansiyelini çok net özetliyor.

Şu an production’da WASM kullanan büyük projeler:

  • Figma: C++ render motorunu WASM’a derledi
  • AutoCAD: 30 yıllık C++ kod tabanını web’e taşıdı
  • Google Earth: WebGL + WASM kombinasyonu
  • Shopify: Eklenti sistemini WASM ile izole etti
  • Cloudflare Workers: Edge function’ları WASM üzerinde çalıştırıyor
  • Fastly Compute@Edge: WASM tabanlı serverless platform
  • Zoom: Video kodlama filtrelerinde WASM kullanıyor

Sysadmin Olarak WASM ile Ne Yapabilirsin?

Tarayıcı geliştirici olmayan biri için neden WASM öğrenmeli sorusu akla gelebilir. Ama bakış açısını genişletince fark ediyorsun:

Plugin izolasyonu: Uygulamanın eklenti sistemini WASM ile yapıyorsan, kötü yazılmış bir eklenti tüm sistemi çökertemiyor.

Hafif containerization: Wasmer veya Wasmtime kullanarak uygulamaları Docker olmadan izole çalıştırabiliyorsun. Başlangıç süresi milisaniyeler.

Cross-platform araçlar: Bir kez derle, her yerde çalıştır. Linux, Windows, macOS, tarayıcı. Gerçek anlamda platform bağımsızlık.

Serverless ve edge: Lambda fonksiyonlarını WASM olarak deploy etmek, cold start süresini dramatik şekilde düşürüyor.

# Wasmer ile basit bir WASM uygulaması container gibi çalıştır
wasmer create-exe uygulama.wasm -o uygulama_native

# Artık native binary gibi çalışır
./uygulama_native

# Wasmer registry'den hazır WASM uygulaması çalıştır
wasmer run python/python -- --version
wasmer run syrusakbary/cowsay -- "WASM harika!"

Sonuç

WebAssembly, web platformunun son 10 yılının en önemli gelişmelerinden biri. Sadece “tarayıcıda hızlı kod çalıştırma” olarak görmemek gerekiyor. WASM, güvenli izolasyon, platform bağımsızlığı ve yüksek performansı bir arada sunan yeni nesil bir çalışma ortamı.

Sysadmin ve DevOps perspektifinden bakıldığında WASM’ın getirdiği en büyük değer izolasyon ve taşınabilirliktir. Docker container’larından çok daha hızlı başlayan, çok daha az kaynak tüketen, ama benzer güvenlik garantileri sunan bir teknoloji hayal edebiliyorsun artık.

Şu an yapman gereken pratik ilk adımlar basit: Wasmtime veya Wasmer kur, bir Rust projesi derleyip WASM çıktısı al, Node.js ile bu WASM modülünü test et. Bu döngüyü birkaç kez yapınca WASM’ın nasıl çalıştığı kafanda oturmuş olacak.

Edge computing’in yükselişiyle birlikte WASM’ı anlamak giderek daha kritik bir sysadmin becerisi haline geliyor. Cloudflare Workers, Fastly, Deno Deploy gibi platformların tamamı WASM’ı birinci sınıf vatandaş olarak destekliyor. Bu trende hazırlıklı olmak, yarın bu altyapıları yönetirken seni bir adım öne geçirecek.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir