Czym jest WebAssembly i jakie miejsce zajmuje w nim React

WebAssembly (WASM) to binarny format instrukcji zaprojektowany do działania w przeglądarkach z prędkością zbliżoną do natywnej. W przeciwieństwie do JavaScriptu, który jest interpretowanym językiem wysokiego poziomu, WASM to niskopoziomowy kod bajtowy, który silnik JavaScript przeglądarki kompiluje i wykonuje przy minimalnym narzucie, osiągając wydajność niższą od kodu natywnego o 10–20%.

WebAssembly nie jest językiem programowania, w którym pisze się bezpośrednio — to cel kompilacji. Języki takie jak Rust, C, C++ i Go można kompilować do kodu bajtowego WASM za pomocą odpowiednich łańcuchów narzędzi. Kod jest pisany w języku systemowym, kompilowany do WASM, a następnie binarny moduł jest dostarczany do przeglądarki.

WASM działa w izolowanej maszynie wirtualnej w przeglądarce, z takimi samymi ograniczeniami bezpieczeństwa jak JavaScript. Nie może bezpośrednio uzyskiwać dostępu do DOM-u, sieci ani systemu plików — taki dostęp odbywa się wyłącznie za pośrednictwem bindingów JavaScript. Izolacja gwarantuje, że nawet kod działający z natywną prędkością nie może ominąć zasad bezpieczeństwa przeglądarki.

WASM i JavaScript zostały zaprojektowane do współpracy, a nie do wzajemnego zastępowania się. JavaScript doskonale sprawdza się w koordynowaniu działania aplikacji, manipulowaniu DOM-em, obsłudze zdarzeń i wywoływaniu API przeglądarki. WASM sprawdza się przy algorytmach wymagających intensywnych obliczeń. Standardowy wzorzec wygląda następująco: JavaScript koordynuje działanie aplikacji, a WASM wykonuje kosztowne obliczenia.

WASM korzysta z liniowego modelu pamięci: ciągłego bloku bajtów reprezentowanego jako obiekt JavaScript ArrayBuffer. Zarówno WASM, jak i JavaScript mogą odczytywać tę współdzieloną pamięć i zapisywać w niej dane. Przekazywanie dużych ilości danych między JavaScriptem a WASM polega na zapisywaniu ich we współdzielonym buforze i odczytywaniu z niego, co pozwala uniknąć kosztownej serializacji.

React obsługuje warstwę interfejsu użytkownika: renderowanie, zarządzanie stanem i interakcje użytkownika. WASM wykonuje obliczenia, których React nie może wydajnie realizować w JavaScripcie. React wywołuje funkcje WASM z obsługi zdarzeń lub efektów, odbiera wyniki i aktualizuje stan, aby wywołać ponowne renderowanie. React jest warstwą prezentacji, a WASM — silnikiem obliczeniowym.

WASM sprawdza się w aplikacjach React, które wymagają przetwarzania obrazów lub wideo (manipulowania pikselami), syntezy i przetwarzania dźwięku, operacji kryptograficznych (haszowania i szyfrowania), symulacji fizyki, obsługi logiki gier, kompresji i dekompresji oraz przeszukiwania dużych zbiorów danych pod kątem tekstu. Są to zadania, w przypadku których wydajność JavaScriptu jest mierzalnie niewystarczająca.

WASM osiąga prędkość zbliżoną do natywnej w przypadku obliczeń ograniczonych przez procesor, ponieważ kompilator JIT przeglądarki kompiluje go do kodu maszynowego i wymaga przy tym bardzo niewielkiej optymalizacji. Przekraczanie granicy między JavaScriptem a WASM (wywoływanie funkcji WASM z JS lub odwrotnie) wiąże się jednak z narzutem. Należy ograniczać liczbę takich przejść, grupując operacje na danych wewnątrz WASM.

Zarówno WASM, jak i Web Workers rozwiązują problemy z wydajnością. Web Worker przenosi obliczenia JavaScriptu poza główny wątek. WASM przyspiesza obliczenia niezależnie od wątku, w którym działa. Optymalny wzorzec polega na połączeniu obu rozwiązań: należy uruchamiać obliczenia WASM w Web Workerze, aby główny wątek Reacta pozostawał dostępny dla aktualizacji interfejsu, podczas gdy WASM działa z prędkością zbliżoną do natywnej.

WebAssembly jest obsługiwane we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari i Edge) od 2017 roku. Podstawowa specyfikacja WASM ma niemal uniwersalne wsparcie. Nowsze rozszerzenia (wątki z SharedArrayBuffer, SIMD do operacji wektorowych oraz garbage collection dla języków zarządzanych) mają różny poziom obsługi, ale są stopniowo standaryzowane i wdrażane.

Ekosystem WASM szybko się rozwija. Do najważniejszych zastosowań produkcyjnych należą: Figma (silnik renderujący), Google Earth (globus 3D), Adobe Photoshop Web (przetwarzanie obrazów), AutoCAD Web (renderowanie CAD) oraz liczne biblioteki kryptograficzne. Aplikacje React często wykorzystują WASM do obsługi intensywnych obliczeniowo części tych samych kategorii.

Jak WebAssembly wykonuje kod w przeglądarce?

WebAssembly to binarny cel kompilacji, a nie język, dla języków Rust, C, C++ i Go, działający z prędkością zbliżoną do natywnej w izolowanej maszynie wirtualnej przeglądarki. WASM i JavaScript uzupełniają się: JS koordynuje działanie, a WASM wykonuje obliczenia. React pełni rolę warstwy interfejsu użytkownika, która wywołuje WASM do wykonywania intensywnych obliczeń. WASM należy stosować do przetwarzania obrazów, kryptografii, symulacji fizyki, obsługi dźwięku i przeszukiwania dużych zbiorów danych. Liczbę przejść przez granicę między JS a WASM należy ograniczać, grupując operacje wewnątrz WASM.