Yeni Başlayanlar İçin WebAssembly – 2. Bölüm: Hedefler, Temel Kavramlar ve Kullanım Örnekleri

WASM'nin temel kavramlarını ve Kullanım örneklerini merak ettiniz mi? Değilse, sizi koruduk.

WebAssembly(WASM), web üzerinde yerel benzeri performansın engelini kaldırmanıza izin veren yeni bir düşük seviyeli dildir.

Yeni Başlayanlar için WebAssembly – Bölüm 1'de, tanımını ve sınırlamalarını ele alarak yeni başlayanların bakış açısından WASM'yi tanıttık. Ek olarak, WebAssembly özelliklerini, WASM yol haritasını ve JavaScript'in WebAssembly ile birlikte nasıl çalıştığını inceledik.

Bu gönderi, WASM Hedeflerini, temel kavramları ve kullanım durumlarını tartışarak WebAssembly'ı keşfedecek. Ayrıca heyecan verici projelerinden bazılarına da göz atacağız.

Başlayalım.

WebAssembly Hedefleri

WebAssembly temel kavramlarını anlamak için öncelikle amaçlarına bakmamız gerekir. Bu hedefler şunları içerir:

• Derleme hedefi olarak yükleme süresi ve boyut açısından verimli ikili format kullanarak mevcut donanımdan yararlanma yeteneği. Basit bir ifadeyle, WASM, derlemeyi ve yerel hızda yürütmeyi destekleyen ikili biçimde bir Soyut Sözdizimi Ağacı (AST) kullanır. Yaklaşımı kullanarak WASM, IoT, Web ve mobil dahil olmak üzere çeşitli cihazlarda çalışabilir.
• WASM'nin amacı, mevcut Web platformunu değiştirmek veya değiştirmek değildir. Bu yaklaşımla WebAssembly, mevcut ve geçmiş Web ile iyi bir şekilde entegre olabilir. Ayrıca, WebAssembly'ın JavaScript ile birlikte yürütme veya JavaScript'ten senkronize çağrılar yapma dahil olmak üzere JavaScript ile sorunsuz çalışmasını sağlar.
• İzinler, güvenlik politikaları ve same-origin ile sorunsuz çalışmak için.
• Geliştiricilerin, çözümlerini tarayıcı dışı yerleştirmeleri destekleyecek şekilde tasarlayabilmelerini sağlayın.
• Son olarak, geliştiricilere, insanlar tarafından düzenlenebilir bir metin biçimi sağlayarak WebAssembly kaynak koduyla verimli bir şekilde çalışacak araçlar sağlamak.

WebAssembly Temel Kavramları

Başlık içinde, WebAssembly aşağıdaki adımları takip eder:

• İlk başta, tanımlanmış türlerle statik olarak yazılmış bir dilde kod yazmanız gerekir.
• Bittiğinde, önceden derlenmiş bir WASM modülü oluşturursunuz ve kodu motor derleyicisine beslersiniz.
• Yukarıdaki adım, WASM'nin ayrıştırmayı atlamasını ve kodu web tarayıcısında işlenmeye hazır hale getirmesini sağlar.

Web tarayıcısında çalışan WebAssembly'nin arkasındaki temel kavramlar şunları içerir:

• Bellek: WebAssembly'daki Bellek, düşük seviyeli bellek erişim talimatları tarafından yönetilir ve yazılır. Teknik olarak, yeniden boyutlandırılabilir bir ArrayBuffer'dır ve bir dizi bellek baytı içerir.
• Modül: WebAssembly içindeki Modül, derlenmiş yürütülebilir bir bilgisayar kodudur. Web tarayıcısı, durum bilgisiz formu nedeniyle Modülü derler ve Windows ve Çalışanlar arasında paylaşır. Ayrıca Modül, işlevleri, tabloları, türleri, globalleri ve Belleği barındırmanın yanı sıra içe ve dışa aktarmaları saklar ve bildirir.
• Tablo: Bir tablo, yeniden boyutlandırılabilir tipte bir dizi kullanan tüm referanslardan ve işlevlerden oluşur. Bu, ham baytları Bellekte depolama ihtiyacını ortadan kaldırır.
• Örnek: WASM'de bir örnek, çalışma zamanı sırasında tüm durumların eşleştirilmiş olduğu bir modüldür. Bu durumlar Tablo, Bellek ve diğer içe aktarılan değer kümelerini içerir.

Bir web geliştiricisi olarak, Modülleri, Tabloları, Örnekleri ve Tabloları çağırmak ve tanımlamak için JavaScript API'sini kullanabilirsiniz. Ayrıca, JavaScript işlevleri içinde eşzamanlı olarak WASM dışa aktarımlarını çağırmak için JavaScript kullanırsınız. Bu nedenle, web tarayıcısında yüksek performanslı uygulamalar yazmak için WASM'yi kullanabildiğiniz için JavaScript, WebAssembly ile iyi çalışır.

WASM Nesneleri

WebAssembly ile çalışırken, sekiz WASM nesnesini takip etmelisiniz. Bu nesneler şunları içerir:

• WebAssembly.Global – Global nesne, global bir değişken örneğidir. Hem WebAssembly.Module hem de JavaScript tarafından erişilebilir.
• WebAssembly.Module – Burada, Module nesnesi durum bilgisi olmayan WASM kodunu içerir. Kod önceden derlenmiştir.
• WebAssemly.Instance – WebAssembly.Instance, WebAssembly.Module öğesinin yürütülebilir, durum bilgisi olan örneğidir.
• WebAssembly.Table – Table nesnesi, işlev referansları içerir ve bir JavaScript sarmalayıcı görevi görür.
• WebAssembly.CompileError – CompileError nesnesi, doğrulama ve kod çözme sırasındaki tüm hataları içerir.
• WebAssembly.RuntimeError – Burada, RuntimeError nesnesi tüm çalışma zamanı hatalarını listeler.
• WebAssembly.LinkError – LinkError nesnesi, modül örneklemesi sırasında gerçekleşen hataları içerir.

WASM Kullanım Örnekleri ve Projeleri

WebAssembly'nin web tarayıcısında yerel benzeri performans sunduğunu zaten biliyoruz. Ancak, onu nerede kullanabileceğinizi gerçekten anlamak için kullanım durumlarına bakmalısınız. WASM kullanım örneklerinden birkaçını aşağıda listeleyelim.

WebAssembly kullanım durumları, tarayıcının hem içine hem de dışına yayılır. Örneğin, WASM'yi bir tarayıcıda kullanmak istiyorsanız, aşağıdakiler dahil pek çok şey yapabilirsiniz:

• Ffmpegwasm projesi gibi video veya ses düzenleme.
• Bu yüksek performanslı oyunlar gibi web tarayıcısındaki video oyunları.
• Bilimsel görselleştirme ve simülasyon
• DOSBox, MAME, vb. gibi platform emülasyonu/simülasyonu.
• şifreleme
• Uzak masaüstü
• Geliştirici araçları

Kullanım Örnekleri

Genel bir bakış açısından, WebAssembly'nin ilgi uyandıran kullanım durumları şunları içerir:

• Daha hızlı kod yazma yeteneği, temeldeki donanımdan yararlanabilir.
• Ayrıca İstemci tarafında sıkıştırma da yapabilirsiniz, bu da daha iyi yükleme süresi ve bant genişliği tasarrufu sağlar. Bu nedenle, sıkıştırma ve sıkıştırmayı açma işlemleri için İstemcinin CPU'sunu veya temeldeki donanımı kullanırsınız, ardından sunucunun kaynaklarını kullanırsınız.
• Ayrıca, JavaScript kullanmak dışında web için kod yazmak için farklı programlama dilleri kullanabilirsiniz. Örneğin, web uygulamalarınızın belirli yönleri için yüksek performanslı kod yazmak için Rust, C ve C++ kullanabilirsiniz.

Projeler

Gerçek dünya örneklerine geçersek, aşağıdaki projelerden bahsetmeye değer.

• Figma , web uygulaması performansını WebAssembly kullanımıyla iyileştirdi. Uygulama başlatma, tüm tasarım oluşturma ve hatta bir tasarım dosyasını indirme sırasında yükleme süresini azalttılar. Daha önce tartıştığımız gibi, WebAssembly ayrıca sıkıştırma için harikadır. Figma, indirme boyutunu iyileştirmek ve önemli ölçüde küçültmek için WASM'yi uyguladı.
• Pyodide : Bir başka heyecan verici WASM projesi, Mozilla'dan yayınlanan Pyodide projesidir. Bilim adamlarının Python bilimsel yığınını NumPy, SciPy, Scikit-learn vb. dahil olmak üzere WebAssembly'de tarayıcıya derlemesini sağlar. Python ve JavaScript arasında şeffaf bir nesne dönüşümü sunar. Son olarak, geliştiricilerin Python kullanarak Web API'lerini kullanmalarına da izin verir.
• Brazor WebAssembly : Brazor WebAssembly çerçevesi, geliştiricilerin .NET ile tek sayfa, istemci tarafı ve etkileşimli web uygulamaları oluşturmasına olanak tanır. WebAssembly tabanlı .NET çalışma zamanı ile bu uygulamaları tarayıcıda barındırabilirsiniz. Burada bir geliştirici olarak, WebAssembly'nin JavaScript API'lerinin yardımıyla .NET kodunuzdaki tarayıcı işlevlerine erişim elde edersiniz.

Diğer pek çok tanınmış ve değerli proje WebAssembly kullanıyor. Bunlar Binaryen, Cheerp, Forest, Grain ve diğerleridir.

Son düşünceler

WebAssembly tam olarak yeni başlayanlar için uygun değildir. Bununla birlikte, kullanım durumlarını ve temel kavramlarını inceleyerek kapasitesini açıkça anlayabilirsiniz.

Piyasadaki heyecan verici projelerle, özellikle Web geliştirme alanındaysanız, WebAssembly'ı öğrenmek için en iyi zaman. WASM'nin tarayıcı dışında çalışabilme özelliği, onu performans odaklı geliştirme için mükemmel bir seçim haline getirir.