WebAssembly (WASM) ile Web Uygulamaları
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!