Cele, kluczowe koncepcje i przypadki użycia

Czy zastanawiałeś się kiedykolwiek nad fundamentalnymi założeniami i praktycznym zastosowaniem WASM? Jeżeli nie, nie martw się, jesteśmy tutaj, by Ci pomóc.

WebAssembly (WASM) to innowacyjny język programowania niskiego poziomu, który otwiera drogę do osiągnięcia natywnej wydajności w środowisku webowym.

W artykule „WebAssembly dla początkujących – część 1” zaprezentowaliśmy WASM z punktu widzenia osoby stawiającej pierwsze kroki, przybliżając jego definicję i ograniczenia. Ponadto, omówiliśmy funkcje WebAssembly, plan jego rozwoju, a także sposób, w jaki JavaScript współdziała z WebAssembly, a nie konkuruje z nim.

Ten artykuł ma na celu zgłębienie tematu WebAssembly poprzez omówienie jego celów, kluczowych założeń i przykładów użycia. Dodatkowo, przyjrzymy się kilku inspirującym projektom.

Zaczynajmy.

Założenia WebAssembly

Aby zrozumieć kluczowe koncepcje WebAssembly, musimy na początku przeanalizować jego cele. Obejmują one:

• Umożliwienie efektywnego wykorzystania zasobów sprzętowych poprzez zastosowanie binarnego formatu, który charakteryzuje się szybkim ładowaniem i niewielkim rozmiarem. Mówiąc prościej, WASM wykorzystuje abstrakcyjne drzewo składniowe (AST) w postaci binarnej, co przyspiesza kompilację i wykonywanie kodu, zbliżając je do prędkości natywnej. Dzięki takiemu podejściu, WASM może działać na różnorodnych urządzeniach, w tym w Internecie Rzeczy (IoT), w sieci oraz na urządzeniach mobilnych.
• Celem WASM nie jest zastąpienie czy modyfikacja istniejącej platformy internetowej. Dzięki takiemu podejściu, WebAssembly bez problemu integruje się z obecnym i przyszłym ekosystemem sieciowym. Pozwala także na płynną współpracę WebAssembly z JavaScript, umożliwiając ich równoległe działanie oraz synchroniczne wywoływanie funkcji JavaScript.
• Zapewnienie bezproblemowej współpracy z mechanizmami bezpieczeństwa, w tym z zasadami uprawnień i polityką tego samego pochodzenia.
• Dostarczenie programistom narzędzi do projektowania rozwiązań, które mogą być osadzane poza środowiskiem przeglądarki.
• Dostarczenie deweloperom narzędzi do wydajnej pracy z kodem źródłowym WebAssembly, poprzez udostępnienie formatu tekstowego, który jest czytelny dla człowieka.

Kluczowe koncepcje WebAssembly

Pod maską WebAssembly wykonuje następujące operacje:

• Na początku, należy napisać kod w języku o statycznej typizacji, z precyzyjnie określonymi typami danych.
• Następnie, wygenerowany jest wstępnie skompilowany moduł WASM, a kod przekazywany jest do kompilatora silnika.
• Ten proces zapewnia, że WASM pomija fazę parsowania i przygotowuje kod do natychmiastowego renderowania w przeglądarce internetowej.

Kluczowe koncepcje, które umożliwiają działanie WebAssembly w przeglądarce internetowej, to:

• Pamięć: Zarządzanie pamięcią w WebAssembly odbywa się za pomocą instrukcji niskopoziomowych, które umożliwiają bezpośredni dostęp do pamięci. Technicznie rzecz biorąc, jest to obiekt ArrayBuffer o zmiennym rozmiarze, który przechowuje tablicę bajtów pamięci.
• Moduł: Moduł w WebAssembly to skompilowany kod komputerowy, który jest gotowy do wykonania. Ze względu na swoją bezstanową naturę, przeglądarka kompiluje moduł i udostępnia go systemowi Windows i pracownikom. Moduł przechowuje i deklaruje importy i eksporty, a także funkcje, tabele, typy, wartości globalne i pamięć.
• Tabela: Tabela zawiera zbiór referencji i funkcji, wykorzystujących tablicę o zmiennym rozmiarze. Eliminuje to konieczność przechowywania nieprzetworzonych bajtów w pamięci.
• Instancja: W WASM, instancja jest modułem w trakcie wykonywania, wraz z powiązanymi stanami. Stany te obejmują tabelę, pamięć i inne importowane zestawy wartości.

Kluczowe koncepcje WASM

Jako programista webowy możesz korzystać z JavaScript API, aby wywoływać i definiować moduły, tabele, instancje i tablice. Co więcej, możesz używać JavaScript do synchronicznego wywoływania eksportowanych funkcji WASM w ramach funkcji JavaScript. Dlatego też, JavaScript dobrze współpracuje z WebAssembly, umożliwiając pisanie wysoce wydajnych aplikacji w przeglądarce internetowej przy użyciu WASM.

Obiekty WASM

Podczas pracy z WebAssembly, istotne jest śledzenie ośmiu obiektów WASM. Są to:

• WebAssembly.Global — obiekt Global reprezentuje zmienną globalną. Jest ona dostępna zarówno z poziomu WebAssembly.Module, jak i JavaScript.
• WebAssembly.Module — w tym obiekcie przechowywany jest bezstanowy kod WASM. Kod ten jest wstępnie skompilowany.
• WebAssembly.Instance — WebAssembly.Instance to wykonywalna, stanowa instancja WebAssembly.Module.
• WebAssembly.Table — obiekt Table zawiera odwołania do funkcji i działa jako otoczka JavaScript.
• WebAssembly.CompileError — obiekt CompileError gromadzi wszystkie błędy, które wystąpiły podczas procesu sprawdzania poprawności i dekodowania.
• WebAssembly.RuntimeError — obiekt RuntimeError przechowuje listę wszystkich błędów, które wystąpiły w czasie wykonywania.
• WebAssembly.LinkError — obiekt LinkError zawiera błędy, które pojawiły się w trakcie tworzenia instancji modułu.

Przykłady użycia i projekty WASM

Wiemy już, że WebAssembly oferuje natywną wydajność w przeglądarce internetowej. Aby jednak w pełni zrozumieć jego potencjał, warto przyjrzeć się praktycznym przypadkom jego wykorzystania. Poniżej przedstawiamy kilka z nich.

WebAssembly znajduje zastosowanie zarówno wewnątrz, jak i poza przeglądarką. Przykładowo, w przeglądarce, WASM może być wykorzystywany do:

• Edycji wideo lub audio, jak w projekcie ffmpegwasm.
• Gier wideo w przeglądarce internetowej, zwłaszcza tych, które wymagają wysokiej wydajności.
• Wizualizacji danych naukowych i symulacji.
• Emulacji platform, takich jak DOSBox czy MAME.
• Szyfrowania danych.
• Zdalnego wyświetlania ekranu.
• Narzędzi deweloperskich.

Przykłady zastosowań

W szerszym kontekście, do przekonujących przykładów zastosowań WebAssembly można zaliczyć:

• Zdolność do pisania szybszego kodu, który może wykorzystać potencjał sprzętu.
• Możliwość wykonywania kompresji po stronie klienta, co przekłada się na szybsze ładowanie stron i oszczędność przepustowości. W tym przypadku, wykorzystywane są zasoby procesora klienta do kompresji i dekompresji, odciążając tym samym serwer.
• Umożliwienie używania różnych języków programowania do tworzenia aplikacji webowych, a nie tylko JavaScript. Na przykład, do pisania wysokowydajnego kodu można używać Rust, C i C++.

Realizowane projekty

Przechodząc do konkretnych przykładów, warto wspomnieć o następujących projektach.

• Firma Figma poprawiła wydajność swojej aplikacji internetowej dzięki wykorzystaniu WebAssembly. Skrócono czas ładowania aplikacji, renderowania projektów i pobierania plików. Jak wcześniej wspomniano, WebAssembly doskonale sprawdza się w kompresji danych. Figma wdrożyła WASM, aby zmniejszyć rozmiar pobieranych plików, co przyniosło znaczną poprawę.
• Pyodide: Kolejnym ciekawym projektem WASM jest Pyodide, stworzony przez Mozillę. Umożliwia on naukowcom kompilację stosu naukowego Pythona do WebAssembly, w tym NumPy, SciPy, Scikit-learn, i korzystanie z tych bibliotek w przeglądarce. Pyodide oferuje także płynną konwersję obiektów między Pythonem a JavaScriptem. Co więcej, umożliwia on programistom korzystanie z API webowych przy użyciu Pythona.
• Blazor WebAssembly: Platforma Blazor WebAssembly umożliwia deweloperom tworzenie jednostronicowych, interaktywnych aplikacji internetowych po stronie klienta za pomocą .NET. Aplikacje te mogą być hostowane w przeglądarce, przy użyciu środowiska uruchomieniowego .NET opartego na WebAssembly. W tym przypadku, programiści mają dostęp do funkcjonalności przeglądarki w kodzie .NET, za pomocą API JavaScript WebAssembly.

źródło: Figa

Wiele innych znanych projektów korzysta z WebAssembly, m.in. Binaryen, Cheerp, Forest i Grain.

Podsumowanie

WebAssembly nie jest najbardziej intuicyjną technologią dla początkujących. Niemniej jednak, analizując jego zastosowania i kluczowe koncepcje, można w pełni zrozumieć jego możliwości.

Biorąc pod uwagę dynamiczny rozwój projektów, to idealny moment, aby zacząć naukę WebAssembly, szczególnie dla osób zajmujących się tworzeniem stron internetowych. Zdolność WASM do pracy poza przeglądarką sprawia, że jest to doskonały wybór do programowania zorientowanego na wydajność.

Podobał Ci się artykuł? Zachęcamy do podzielenia się nim z innymi!