C++ ve Rust ile WebAssembly

WebAssembly (WASM), modern webin en güçlü teknolojilerinden biridir. JavaScript’in sınırlarını aşarak tarayıcıda yüksek performanslı, yoğun hesaplama gerektiren uygulamaları çalıştırmamıza olanak tanır. Bu rehberde hem C++ hem de Rust ile WASM projelerini detaylı şekilde öğreneceğiz. 

1. WebAssembly Nedir?

• Tanım: Tarayıcıda düşük seviyeli, hızlı ve güvenli kod çalıştırmayı sağlayan ikili format.
• Amaç: JavaScript ile yapılamayan yoğun hesaplamaları tarayıcıda çalıştırmak.
• Desteklenen Diller: C, C++, Rust, Go, AssemblyScript

Kullanım Alanları

• Oyun motorları
• Görüntü işleme
• Veri analitiği ve hesaplamalar
• Matematiksel simülasyonlar

Örnek: Görüntü filtresi uygulaması, 3D fizik hesaplamaları, AI model tarayıcı çalıştırma.

2. C++ ile WebAssembly

Araçlar ve Kurulum

• Emscripten SDK
• Clang derleyici

Adım Adım Örnek

#include <emscripten/emscripten.h>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    int add(int a, int b) {
        return a + b;
    }
}

JS ile çağırma:

fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    console.log(results.instance.exports.add(5, 3)); // 8
  });

Notlar:

• EMSCRIPTEN_KEEPALIVE fonksiyonu, WebAssembly tarafından kullanılacak fonksiyonların garbage collection ile silinmesini önler.
• Emscripten, C++ kodunu optimize edilmiş .wasm ve JS wrapper dosyalarına çevirir.

3. Rust ile WebAssembly

Araçlar ve Kurulum

• Rust + wasm-pack
• Target: wasm32-unknown-unknown

Örnek Rust Kodu

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn multiply(a: i32, b: i32) -> i32 {
    a * b
}

JS ile Kullanım

import init, { multiply } from './pkg/my_wasm_module.js';

async function run() {
    await init();
    console.log(multiply(4, 6)); // 24
}

run();

Notlar:

• Rust ile WASM kullanırken bellek güvenliği ve performans avantajları sağlanır.
• wasm-pack ile paketleme, bağımlılık yönetimi ve JS entegrasyonu kolaylaşır.

4. Performans Avantajları

• Hız: JavaScript’e göre 10–20 kat daha hızlı yoğun hesaplamalarda
• Bellek Yönetimi: Düşük seviyeli kontrol ile optimize bellek kullanımı
• Multithreading: SIMD ve Web Workers ile ek performans

Örnek:

• Görüntü filtreleme, 3D fizik motoru WASM ile JS’den çok daha hızlı çalışır.

5. Tarayıcı Entegrasyonu

• WASM + JS birlikte çalışır.
• DOM manipülasyonu JS üzerinden yapılır.
• WASM modülü .wasm dosyası olarak yüklenir ve JS üzerinden çağrılır.

Örnek Senaryo:

• Rust fizik motoru + JS oyun sahnesi entegrasyonu

6. Proje Örnekleri

1. Oyun Motoru: C++ fizik motoru + JS sahne
2. Görüntü İşleme: Rust ile hızlı filtreleme
3. Matematiksel Simülasyon: Lineer cebir, diferansiyel denklemler WASM ile

7. İleri Seviye Öneriler

• AI modellerini tarayıcıda çalıştırmak
• WASI ile tarayıcı dışı uygulamalar
• Pipeline ve build optimizasyonu
• Memory management ve performans tuning

8. WASM ile Büyük Projeler

• Modüler yapı ve bağımsız paketleme
• Büyük veri setleri ile tarayıcı hesaplamaları
• Oyunlar, görüntü işleme, bilimsel hesaplamalar

9. WASM ve Güvenlik

• Sandbox ortamı ile güvenli çalıştırma
• Bellek taşmaları ve buffer overflow’lara karşı koruma
• JS ile veri iletişimi güvenli protokollerle

10. Gelecek ve Trendler

• WebAssembly System Interface (WASI) ile sunucu tarafı kullanımı
• AI ve Machine Learning modellerini tarayıcıda çalıştırma
• WebAssembly ve IoT cihazlarda uygulama geliştirme