Cele, kluczowe koncepcje i przypadki użycia

Czy zastanawiałeś się nad kluczowymi koncepcjami i przypadkami użycia WASM? Jeśli nie, zapewniamy Ci ochronę.

WebAssembly(WASM) to nowy język niskiego poziomu, który pozwala odblokować natywną wydajność w sieci.

W WebAssembly dla początkujących – część 1 przedstawiliśmy WASM z perspektywy początkującego, omawiając jego definicję i ograniczenia. Dodatkowo omówiliśmy funkcje WebAssembly, mapę drogową WASM oraz sposób, w jaki JavaScript współpracuje z WebAssembly, a nie przeciwko niemu.

Ten post będzie eksplorował WebAssembly poprzez omówienie celów WASM, kluczowych koncepcji i przypadków użycia. Przyjrzymy się także niektórym z jej ekscytujących projektów.

Zacznijmy.

Cele WebAssembly

Aby zrozumieć kluczowe koncepcje WebAssembly, musimy najpierw przyjrzeć się jego celom. Cele te obejmują:

  • Możliwość wykorzystania dostępnego sprzętu poprzez użycie formatu binarnego efektywnego pod względem czasu ładowania i rozmiaru jako celu kompilacji. Mówiąc prościej, WASM wykorzystuje abstrakcyjne drzewo składniowe (AST) w formacie binarnym, wspierając kompilację i wykonywanie z natywną prędkością. Korzystając z tego podejścia, WASM może działać na różnych urządzeniach, w tym na IoT, w Internecie i na urządzeniach mobilnych.
  • Celem WASM nie jest zmiana lub zmiana istniejącej platformy internetowej. Dzięki takiemu podejściu WebAssembly może dobrze integrować się z obecną i przeszłą siecią Web. Umożliwia także bezproblemową współpracę WebAssembly z JavaScript, w tym wykonywanie obok lub wykonywanie synchronicznych wywołań JavaScript.
  • Aby bezproblemowo pracować z zasadami bezpieczeństwa uprawnień i tym samym źródłem.
  • Upewnij się, że programiści mogą projektować swoje rozwiązania tak, aby obsługiwały osadzenie bez przeglądarki.
  • Wreszcie, zapewnienie programistom narzędzi do wydajnej pracy z kodem źródłowym WebAssembly poprzez udostępnienie edytowalnego przez człowieka formatu tekstowego.

Kluczowe koncepcje zestawu WebAssembly

Wewnątrz okapu WebAssembly wykonuje następujące kroki:

  • Najpierw musisz napisać kod w języku o typie statycznym ze zdefiniowanymi typami.
  • Po zakończeniu generujesz wstępnie skompilowany moduł WASM i przekazujesz kod do kompilatora silnika.
  • Powyższy krok gwarantuje, że WASM pominie parsowanie i przygotuje kod do renderowania w przeglądarce internetowej.

Kluczowe koncepcje stojące za WebAssembly działającym w przeglądarce internetowej obejmują:

  • Pamięć: Pamięć w WebAssembly jest zarządzana i zapisywana przez instrukcje dostępu do pamięci niskiego poziomu. Technicznie rzecz biorąc, jest to ArrayBuffer o zmiennym rozmiarze i zawiera tablicę bajtów pamięci.
  • Moduł: Moduł w WebAssembly to skompilowany, wykonywalny kod komputerowy. Ze względu na swoją bezstanową formę przeglądarka internetowa kompiluje moduł i udostępnia go systemowi Windows i pracownikom. Ponadto Moduł przechowuje i deklaruje importy i eksporty, oprócz przechowywania funkcji, tabel, typów, wartości globalnych i pamięci.
  • Tabela: Tabela składa się ze wszystkich odwołań 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 czasie wykonywania, ze wszystkimi stanami sparowanymi. Stany te obejmują tabelę, pamięć i inne zaimportowane zestawy wartości.

Kluczowe koncepcje WASM

Jako programista WWW możesz używać JavaScript API do wywoływania i definiowania modułów, tabel, instancji i tabel. Co więcej, używasz języka JavaScript do synchronicznego wywoływania eksportów WASM w ramach funkcji JavaScript. Dlatego JavaScript dobrze współpracuje z WebAssembly, ponieważ można używać WASM do pisania aplikacji o wysokiej wydajności w przeglądarce internetowej.

Obiekty WASM

Podczas pracy z WebAssembly musisz śledzić osiem obiektów WASM. Obiekty te obejmują:

  • WebAssembly.Global — obiekt Global jest instancją zmiennej globalnej. Jest dostępny zarówno przez WebAssembly.Module, jak i JavaScript.
  • WebAssembly.Module — tutaj obiekt Module zawiera bezstanowy kod WASM. Kod 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 opakowanie JavaScript.
  • WebAssembly.CompileError — obiekt CompileError zawiera wszystkie błędy podczas sprawdzania poprawności i dekodowania.
  • WebAssembly.RuntimeError — tutaj obiekt RuntimeError zawiera listę wszystkich błędów czasu wykonywania.
  • WebAssembly.LinkError — obiekt LinkError zawiera błędy występujące podczas tworzenia wystąpienia modułu.

Przypadki użycia i projekty WASM

Wiemy już, że WebAssembly oferuje natywną wydajność w przeglądarce internetowej. Aby jednak naprawdę zrozumieć, gdzie można go używać, należy przyjrzeć się jego przypadkom użycia. Wymieńmy poniżej kilka przypadków użycia WASM.

Przypadki użycia WebAssembly obejmują zarówno wewnątrz, jak i na zewnątrz przeglądarki. Na przykład, jeśli chcesz używać WASM w przeglądarce, możesz zrobić wiele rzeczy, w tym:

  • Edycja wideo lub audio, na przykład projekt ffmpegwasm.
  • Gry wideo w przeglądarce internetowej, takie jak te gry o wysokiej wydajności.
  • Wizualizacja i symulacja naukowa
  • Emulacja/symulacja platformy, taka jak DOSBox, MAME itp.
  • Szyfrowanie
  • Zdalny ekran
  • Narzędzia deweloperskie

Przypadków użycia

Z ogólnego punktu widzenia przekonujące przypadki użycia WebAssembly obejmują

  • Możliwość pisania szybszego kodu może wykorzystać podstawowy sprzęt.
  • Co więcej, możesz również wykonać kompresję po stronie klienta, co skutkuje lepszym czasem ładowania i oszczędnością przepustowości. Tak więc używasz procesora Klienta lub podstawowego sprzętu do kompresji i dekompresji, a następnie korzystasz z zasobów serwera.
  • Ponadto możesz używać różnych języków programowania do pisania kodu dla sieci, nie tylko za pomocą JavaScript. Na przykład możesz użyć Rust, C i C++ do pisania wysokowydajnego kodu dla niektórych aspektów twoich aplikacji internetowych.

Projektowanie

Jeśli przejdziemy do rzeczywistych przykładów, warto wspomnieć o następujących projektach.

  • Figma poprawiła wydajność swojej aplikacji internetowej dzięki wykorzystaniu WebAssembly. Skrócili czas ładowania podczas inicjowania aplikacji, renderowania całego projektu, a nawet pobierania pliku projektu. Jak omówiliśmy wcześniej, WebAssembly doskonale nadaje się również do kompresji. Figma wdrożyła WASM, aby poprawić rozmiar pobieranych plików, znacznie je zmniejszając.
  • Pyodide: Kolejnym ekscytującym projektem WASM jest projekt Pyodide, który został wydany przez Mozillę. Umożliwia naukowcom kompilację stosu naukowego Pythona do WebAssembly, w tym NumPy, SciPy, Scikit-learn itp., w przeglądarce. Oferuje przejrzystą konwersję obiektów między Pythonem a JavaScriptem. Wreszcie, umożliwia także programistom korzystanie z interfejsów API sieci Web przy użyciu języka Python.
  • Brazor WebAssembly: Platforma Brazor WebAssembly umożliwia programistom tworzenie jednostronicowych, po stronie klienta i interaktywnych aplikacji internetowych za pomocą platformy .NET. Możesz hostować te aplikacje w przeglądarce za pomocą środowiska uruchomieniowego platformy .NET opartego na WebAssembly. Tutaj, jako programista, uzyskujesz dostęp do funkcjonalności przeglądarki w swoim kodzie .NET za pomocą interfejsów API JavaScript WebAssembly.

źródło: Figa

Inne, wiele znanych i godnych uwagi projektów korzysta z WebAssembly. Są to Binaryen, Cheerp, Forest, Grain i inne.

Końcowe przemyślenia

WebAssembly nie jest do końca przyjazny dla początkujących. Jednak studiując jego przypadki użycia i kluczowe koncepcje, możesz jasno zrozumieć jego możliwości.

Dzięki ekscytującym projektom na rynku jest to najlepszy czas na naukę WebAssembly, zwłaszcza jeśli zajmujesz się tworzeniem stron internetowych. Zdolność WASM do pracy poza przeglądarką sprawia, że ​​jest to również doskonały wybór do programowania zorientowanego na wydajność.

Podobał Ci się artykuł? A co powiesz na dzielenie się ze światem?