WebAssembly (WASM) ile Web Uygulamaları

Yazılım 📖 2 dk okuma
#web#javascript#frontend

WebAssembly, web’de native performance sağlayan binary instruction format.

WebAssembly Nedir?

WASM, C/C++/Rust gibi dilleri web’de çalıştırmanızı sağlar.

Rust → WASM

// Rust code
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2)
    }
}

JavaScript’ten Kullanım

import init, { fibonacci } from './wasm_module.js';

await init();
const result = fibonacci(40);
console.log(result); // Native speed!

Kullanım Alanları

1. Image Processing

// WASM ile hızlı image filter
import { applyFilter } from './image-processing.wasm';

const filtered = applyFilter(imageData, 'blur');

2. Game Engines

// Unity/Unreal Engine → WASM export
const game = await UnityLoader.instantiate(
  "gameContainer", 
  "Build/game.wasm"
);

3. Video/Audio Processing

// FFmpeg.wasm
import { createFFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
await ffmpeg.run('-i', 'input.mp4', 'output.gif');

Performance Karşılaştırması

// JavaScript
function fibonacci(n) {
  return n <= 1 ? n : fibonacci(n-1) + fibonacci(n-2);
}

console.time('JS');
fibonacci(40); // ~1000ms
console.timeEnd('JS');

// WASM
console.time('WASM');
fibonacciWasm(40); // ~100ms
console.timeEnd('WASM');

10x daha hızlı! 🚀

Rust + WASM Setup

# wasm-pack install
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Project oluştur
cargo new --lib my-wasm-project
cd my-wasm-project

# Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

# Build
wasm-pack build --target web

AssemblyScript Alternative

JavaScript’e benzer syntax:

// AssemblyScript
export function add(a: i32, b: i32): i32 {
  return a + b;
}

// Compile to WASM
asc assembly/index.ts -o build/optimized.wasm

WASM ile web uygulamalarınızı supercharge edin!