WebAssembly Nedir ve React Burada Nasıl Kullanılır

WebAssembly (WASM), web tarayıcılarında yerel hıza yakın hızda çalışmak üzere tasarlanmış ikili bir yönerge biçimidir. Üst düzey yorumlanan bir dil olan JavaScript'in aksine WASM, tarayıcının JavaScript motorunun çok az ek yükle derleyip yürüttüğü düşük düzeyli bir bayt kodudur; böylece yerel kodun performansından yalnızca %10-20 sapmayla çalışır.

WebAssembly, doğrudan yazdığınız bir programlama dili değildir — bir derleme hedefidir. Rust, C, C++ ve Go gibi diller, kendi araç zincirleri kullanılarak WASM bayt koduna derlenebilir. Bir sistem diliyle yazarsınız, WASM'e derlersiniz ve ikili modülü tarayıcıya gönderirsiniz.

WASM, tarayıcı içindeki yalıtılmış bir VM'de çalışır ve JavaScript ile aynı güvenlik kısıtlamalarına tabidir. DOM'a, ağa veya dosya sistemine doğrudan erişemez — tüm bu erişim JavaScript bağlantıları üzerinden gerçekleşir. Bu yalıtım, yerel hızdaki kodun bile tarayıcı güvenlik politikalarını aşamamasını sağlar.

WASM ve JavaScript birbirlerinin yerine geçmek için değil, birlikte çalışmak üzere tasarlanmıştır. JavaScript, uygulama akışını yönetme, DOM üzerinde işlem yapma, olayları işleme ve tarayıcı API'lerini çağırma konularında başarılıdır. WASM ise yoğun hesaplama gerektiren algoritmalarda başarılıdır. Standart yaklaşım şöyledir: JavaScript uygulama akışını yönetir, WASM yoğun hesaplamayı gerçekleştirir.

WASM, JavaScript ArrayBuffer olarak temsil edilen bitişik bir bayt bloğundan oluşan doğrusal bir bellek modeli kullanır. Hem WASM hem de JavaScript bu paylaşılan belleği okuyup yazabilir. JavaScript ile WASM arasında büyük miktarda veri aktarmak, pahalı serileştirme işlemlerinden kaçınmak için bu paylaşılan arabelleğe yazıp okumakla gerçekleştirilir.

React, kullanıcı arayüzü katmanını yönetir: görüntüleme, durum yönetimi ve kullanıcı etkileşimleri. WASM, React'in JavaScript'te verimli biçimde gerçekleştiremediği hesaplamaları yönetir. React, olay işleyicilerinden veya etkilerden WASM işlevlerini çağırır, sonuçları alır ve yeniden görüntülemeleri tetiklemek üzere durumu günceller. React sunum katmanıdır; WASM hesaplama motorudur.

WASM; görsel veya video işleme (piksel değiştirme), ses sentezi ve işleme, kriptografik işlemler (karma oluşturma, şifreleme), fizik benzetimi, oyun mantığı, sıkıştırma ve açma ile büyük veri kümelerinde metin araması gerektiren React uygulamaları için uygundur. Bunların tümü, JavaScript performansının ölçülebilir biçimde yetersiz kaldığı görevlerdir.

WASM, tarayıcının JIT derleyicisi tarafından çok az optimizasyon çalışması gerektirecek şekilde makine koduna derlendiği için CPU'ya bağlı hesaplamalarda yerel hıza yakın bir performans elde eder. Ancak JavaScript-WASM sınırını geçmenin (JS'den bir WASM işlevi çağırmanın veya bunun tersinin) ek yükü vardır. Veri işlemlerini WASM içinde toplu hâlde gerçekleştirerek sınır geçişlerini en aza indirin.

Hem WASM hem de web çalışanları performans sorununu ele alır. Bir web çalışanı, JavaScript hesaplamalarını ana iş parçacığının dışına taşır. WASM ise çalıştığı iş parçacığında hesaplamayı hızlandırır. En uygun yaklaşım ikisini birlikte kullanmaktır: WASM hesaplamasını bir web çalışanında çalıştırarak React'in ana iş parçacığının kullanıcı arayüzü güncellemeleri için boş kalmasını ve WASM'in yerel hıza yakın çalışmasını sağlayın.

WebAssembly, 2017'den beri tüm modern tarayıcılarda (Chrome, Firefox, Safari ve Edge) desteklenmektedir. Temel WASM belirtimi neredeyse evrensel desteğe sahiptir. Daha yeni uzantıların (SharedArrayBuffer ile iş parçacıkları, vektörleştirilmiş işlemler için SIMD, yönetilen diller için çöp toplama) destek düzeyleri farklıdır; ancak bunlar giderek standartlaştırılmakta ve kullanıma sunulmaktadır.

WASM ekosistemi hızla büyümektedir. Üretimdeki önemli kullanım örnekleri arasında Figma (görüntüleme motoru), Google Earth (3B küre), Adobe Photoshop Web (görsel işleme), AutoCAD Web (CAD görüntüleme) ve çok sayıda şifreleme kitaplığı bulunur. React uygulamaları genellikle aynı kategorilerin hesaplama açısından yoğun bölümleri için WASM kullanır.

WebAssembly tarayıcıda nasıl yürütülür?

WebAssembly, Rust, C, C++ ve Go için, yalıtılmış bir tarayıcı VM'inde yerel hıza yakın hızda çalışan ikili bir derleme hedefidir; bir dil değildir. WASM ve JavaScript birbirini tamamlar: JS uygulama akışını yönetir, WASM hesaplamayı gerçekleştirir. React'in rolü, yoğun hesaplamalar için WASM'i çağıran kullanıcı arayüzü katmanı olmaktır. WASM'i görsel işleme, kriptografi, fizik, ses ve büyük veri araması için kullanın. İşlemleri WASM içinde toplu hâlde gerçekleştirerek JS-WASM sınır geçişlerini en aza indirin.