Fatih Pense's Blog

WebAssembly (WASM) nedir?

Wednesday, April 20th, 2022

WebAssembly, Firefox’un asm.js projesi ile başlayan ve daha sonra standartlaşan VM spesifikasyonudur. https://webassembly.org/

https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

Cross-Platform

Halihazırda tarayıcılar ve tarayıcı dışında yazılım dillerinde desteklenmektedir.

Daha çok C, C++ dillerinde yazılmış olan uygulama veya libraryleri webde tekrar kullanmak için kullanılıyor. Ancak .NET veya Rust gibi dillerde yazıp daha sonra WebAssembly’e dönüştürüp kodu tarayıcı veya Java’da çalıştırabilirsiniz.

Astro örneği, Go ile yazılan compiler WASM ile hem Node.js hem Web ortamında çalışıyor: https://astro.build/blog/astro-021-preview/

Sandboxing

Sandbox olarak da kullanılabilir. Örneğin herkesin Javascript ile plugin geliştirebileceği bir sistem geliştirdiniz. Üçüncü şahıslar tarafından geliştirilen pluginlerin kısıtlı bir ortamda çalışıp, zarar verme ihtimalini ortadan kaldırmak için Wasm kullanabilirsiniz. Örneğin, QuickJs Javascript runtime’ının Wasm’a dönüşmüş hali bulunmaktadır. Browser içerisinde JS -> Wasm(QuickJS) -> JS şeklinde kodu çalıştırdığınızda, çalışan kod browser’daki JS’ye erişemeyecektir.

Figma örneği: https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

ScyllaDB örneği: https://www.scylladb.com/2022/04/14/wasmtime/

Shopify örneği: https://github.com/Shopify/javy

Performans

Performansı hızlı ancak Javascript de sürekli optimize edilen bir dil. Sadece hız için WebAssembly kullanmanın uygun olduğunu düşünmüyorum. Ancak garbage collection ve Javascript özelinde VM çalışırken anlık optimizasyonlar yaptığı için, Javascript kodunda anlık yavaşlamalar olabilir. Uygulamanın hep aynı performansta çalışmasını isterseniz Wasm kullanabilirsiniz.

Container alternatifi ve yetkilendirme

Server tarafında container gibi kullanmak üzerine, işletim sistemleri ile etkileşim arayüzü üzerine ve yetkilendirme üzerine inovatif çalışmalar yapan ekipler bulunmaktadır. https://wasi.dev/

Kullanıma en uygun olan alanlar

Çalışma esnasında I/O içermeyen parser, codec dönüşümü gibi işlemler için Wasm daha uygundur.

Resim formatlarını dönüştürmek için örnek uygulama(WebAssembly sadece resim formatlarını dönüştürmek için kullanılıyor): https://squoosh.app/

HTML DOM üzerinde çalışan interaktif UI için şu anda uygun değildir. Ancak WebGL veya Canvas üzerinde çalışan uygulamalar yapılabilir. Flutter Web bu şekilde çalışıyor. Diğer örnekler: https://www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8-000-device-types .NET Blazor https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor Muhtemelen bir çok oyun motoru da Web sürümlerini benzer şekilde destekliyor.

Teknik Özellikler

WebAssembly basit bir çalışma mantığına sahiptir ve şu anda host runtime(ör: Javascript) ile arasındaki etkileşim kısıtlıdır. Spec’ini inceleyebilirsiniz: https://webassembly.github.io/spec/core/

WebAssembly host platform(Ör: Tarayıcı JS) değişkenlerine erişemediği için, kendi memory alanında objeleri oluşturup adreslerini sayı olarak dönebilir.

Memory üzerine daha detaylı bilgi için https://radu-matei.com/blog/practical-guide-to-wasm-memory/

Interface types: https://hacks.mozilla.org/2019/08/webassembly-interface-types/

Şu anda v2 yayınlandı ancak implementasyonu yaygın değil. Fonksiyonlardan birden fazla değer döndürme gibi yenilikler geldi. Gelecekte “garbage collection” eklenebilir. https://www.w3.org/TR/wasm-core-2/

Halihazırda standarda eklenmesi tartışılan geliştirmeler: https://github.com/WebAssembly/proposals

Bytecode Allience: https://bytecodealliance.org/

Yazılım projeleri ile entegrasyonu

Özellikle garbage collection’ı olmayan diller ile WebAssembly binary dosyaları oluşturmak çok kolay. Emscripten projesi (https://emscripten.org/) ve Rust dilinde Cargo ile entegre desteği ön plana çıkıyor.

Bunun dışında sadece WebAssembly yazmak için Typescript benzeri bir dil var: https://www.assemblyscript.org/

WebAssembly kodunu çalıştırmak için runtime’a örnek olarak: https://wasmer.io/