WebAssembly Nedir? Tarayıcıda Yerel Hız

01WebAssembly Nedir?

WebAssembly, web tarayıcılarının JavaScript dışında anlayabildiği ikinci bir çalıştırma biçimidir. W3C tarafından standartlaştırılmıştır ve Chrome, Firefox, Safari, Edge gibi bütün büyük tarayıcılarda yerleşik olarak çalışır; kullanıcının hiçbir şey kurmasına gerek yoktur.

Adındaki “assembly” kelimesi yanıltmasın: Wasm'ı genellikle elle yazmazsınız. Kodunuzu alışık olduğunuz bir dilde yazar, ardından bir derleyiciyle .wasm dosyasına dönüştürürsünüz. Tarayıcı bu küçük ve kompakt dosyayı hızla indirir, doğrular ve makine koduna çevirerek çalıştırır.

Kısacası wasm nedir sorusunun en sade yanıtı şudur: masaüstü uygulama performansını tarayıcıya taşıyan, taşınabilir ve güvenli bir derleme hedefi.

02WebAssembly Nasıl Çalışır?

JavaScript metin olarak gelir; tarayıcı onu ayrıştırır, yorumlar ve çalışma sırasında optimize eder. WebAssembly ise önceden derlenmiş olarak gelir. Türleri belli, yapısı katı olduğu için tarayıcı onu çok daha az tahminle ve öngörülebilir bir hızla çalıştırabilir.

1. Geliştirici kodu C++, Rust, Go veya C# gibi bir dilde yazar.
2. Derleyici araç zinciri kodu .wasm modülüne dönüştürür.
3. Web sayfası modülü JavaScript üzerinden yükler ve başlatır.
4. JavaScript, Wasm fonksiyonlarını çağırır; sonuçları arayüze yansıtır.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/hesap.wasm')
);

console.log(instance.exports.topla(2, 3)); // 5

03Wasm ile JavaScript Farkı

Wasm javascript farkı çoğu zaman yanlış anlaşılır. WebAssembly, JavaScript'i öldürmek için değil, onun zorlandığı alanlarda yardım etmek için tasarlanmıştır. Arayüz, olay yönetimi ve sayfa etkileşimi yine JavaScript'in işidir.

Wasm'ın asıl kazancı yoğun hesaplamada görülür. Ancak her iş için daha hızlı değildir: JavaScript ile Wasm arasında sık veri taşımak ek maliyet yaratır. Küçük işlerde bu maliyet, kazancı yok edebilir.

04WebAssembly Kullanım Alanları

Webassembly kullanım alanları her geçen yıl genişliyor. Ortak nokta, tarayıcıda daha önce imkânsız ya da çok yavaş olan işlerin artık kurulum gerektirmeden yapılabilmesidir.

Tasarım ve medya araçları

Tarayıcıda çalışan profesyonel tasarım uygulamaları, fotoğraf düzenleyiciler ve video dönüştürücüler, ağır işleme çekirdeklerini Wasm ile çalıştırır. Örneğin bir videoyu sunucuya yüklemeden doğrudan tarayıcıda sıkıştırmak mümkün hâle gelir.

Oyun, 3D ve simülasyon

Oyun motorları çıktılarını Wasm'a derleyebilir. Grafik tarafında WebGPU nedir yazımızda anlattığımız yeni grafik arayüzüyle birlikte kullanıldığında, tarayıcıda konsol benzeri deneyimler kurulabilir.

İş uygulamaları ve veri

Tarayıcıda çalışan veritabanları, PDF işleme, şifreleme, CAD görüntüleyiciler ve karmaşık hesaplama motorları Wasm'dan yararlanır. Mevcut masaüstü kodu yeniden yazılmadan web'e taşınabilir; bu da yıllarca geliştirilmiş kütüphanelerin korunması demektir.

Tarayıcı dışı kullanım

WASI adlı arayüz sayesinde Wasm sunucuda, uç bilişimde ve eklenti sistemlerinde de çalışabilir. Hafif ve izole yapısı, onu güvenli eklenti çalıştırmak için cazip bir seçenek yapar.

05Hangi Dillerle Wasm Yazılır?

Wasm'a derlenebilen dil sayısı fazladır, ama olgunluk düzeyleri farklıdır. En yaygın tercihler C/C++ ve Rust'tır. Rust, bellek güvenliği ve araç desteği sayesinde bu alanda öne çıkar; ayrıntısını Rust nedir yazımızda bulabilirsiniz.

• C ve C++: Emscripten araç zinciriyle olgun ve yaygın destek.
• Rust: wasm-pack ve wasm-bindgen ile JavaScript'e rahat köprü.
• Go: resmî derleyiciyle Wasm çıktısı; çıktı boyutu görece büyüktür.
• C# / .NET: Blazor ile tarayıcıda .NET uygulamaları.
• AssemblyScript: TypeScript'e benzer sözdizimiyle Wasm yazmak isteyenler için.

cargo install wasm-pack
wasm-pack build --target web

06Performans: Gerçek Kazanç Nerede?

Wasm'ı bir web sitesine eklemek sayfayı otomatik olarak hızlandırmaz. Kurumsal bir sitede ya da bir e-ticaret altyapısı üzerinde çalışan mağazada yavaşlığın asıl nedenleri genellikle büyük görseller, gereksiz scriptler ve sunucu yanıt süresidir. Bu sorunlar hız ve performans yönetimi çalışmasıyla çözülür, Wasm ile değil.

Wasm'ın parladığı yer, tarayıcıda yüksek performans gerektiren uygulamalardır: saniyede milyonlarca işlem yapan hesaplama, görüntü filtreleri, sıkıştırma, simülasyon. Bu tür işlerde kazanç ciddi olabilir; ama ölçmeden karar vermek doğru değildir.

07Sınırlar ve Dikkat Edilecekler

WebAssembly güçlü bir araçtır ama her projeye uygun değildir. Ekibin bilgi birikimi, hata ayıklama kolaylığı ve bakım maliyeti de karar sürecine girmelidir.

• Hata ayıklama JavaScript'e göre daha zahmetlidir; kaynak haritaları her zaman kusursuz değildir.
• JavaScript ile Wasm arasında büyük veri taşımak performansı düşürebilir.
• Modül boyutu, kullanılan dile ve kütüphanelere göre büyüyebilir.
• Ekipte derlenen dillere hâkim geliştirici olmalıdır.
• Derlenmiş modüller de test edilmelidir; bunun için yazılım testi nedir yazımızdaki yaklaşımlar burada da geçerlidir.

08Projeye Wasm Eklemeden Önce

WebAssembly'ye karar vermeden önce sorunu doğru tanımlamak gerekir. Çoğu zaman yavaşlık hissi, hesaplamadan değil ağ isteklerinden, büyük paketlerden ya da gereksiz yeniden çizimlerden kaynaklanır. Bu durumda Wasm eklemek karmaşıklığı artırır, sorunu çözmez.

Doğru yaklaşım, önce tarayıcının performans araçlarıyla darboğazı bulmak, ardından yalnızca o parçayı Wasm'a taşımaktır. Uygulamanın geri kalanı JavaScript ya da TypeScript olarak kalabilir; böylece ekip alışık olduğu araçlarla çalışmaya devam eder.

1. Darboğazı profil araçlarıyla ölçerek tespit edin.
2. Taşınacak parçanın girdi ve çıktılarını küçük ve net tutun.
3. Aynı işin JavaScript sürümünü karşılaştırma için saklayın.
4. Modülü yalnızca ihtiyaç duyulduğunda, tembel yükleme ile getirin.
5. Eski cihazlarda ve mobilde gerçek kullanıcı koşullarında test edin.

09WebAssembly'nin Geleceği

Standart, iş parçacıkları (threads), SIMD komutları ve çöp toplayıcı desteği gibi eklemelerle her yıl olgunlaşıyor. Çöp toplayıcı desteği, Java, Kotlin ve Dart gibi dillerin de Wasm'a daha verimli derlenmesinin yolunu açtı.

Yakın gelecekte web uygulaması ile masaüstü uygulaması arasındaki çizgi daha da incelecek. İşletmeler için bunun anlamı, kurulum gerektirmeyen ama güçlü iş uygulamalarının mümkün olmasıdır. Böyle bir uygulamanın arayüzü de en az motoru kadar önemlidir; UI/UX tasarım burada kullanıcı deneyimini belirler.