WebAssembly для начинающих. Часть 2. Цели, ключевые понятия и варианты использования

Опубликовано: 2022-12-07

Задумывались ли вы о ключевых концепциях и вариантах использования WASM? Если нет, мы вас прикроем.

WebAssembly (WASM) — это новый низкоуровневый язык, который позволяет разблокировать нативную производительность в Интернете.

В WebAssembly для начинающих — часть 1 мы представили WASM с точки зрения новичка, рассмотрев его определение и ограничения. Кроме того, мы рассмотрели функции WebAssembly, дорожную карту WASM и то, как JavaScript работает с WebAssembly, а не против него.

В этом посте мы рассмотрим WebAssembly, обсуждая цели WASM, ключевые концепции и варианты использования. Мы также рассмотрим некоторые из его интересных проектов.

Давайте начнем.

Цели WebAssembly

Чтобы понять ключевые концепции WebAssembly, нам сначала нужно взглянуть на ее цели. Эти цели включают в себя:

  • Возможность использовать преимущества доступного оборудования, используя в качестве цели компиляции двоичный формат с эффективным временем загрузки и размером. Проще говоря, WASM использует абстрактное синтаксическое дерево (AST) в двоичном формате, поддерживая компиляцию и выполнение с исходной скоростью. Используя этот подход, WASM может работать на различных устройствах, включая IoT, Интернет и мобильные устройства.
  • Целью WASM не является изменение существующей веб-платформы. При таком подходе WebAssembly может хорошо интегрироваться с текущим и прошлым Web. Это также позволяет WebAssembly беспрепятственно работать с JavaScript, в том числе выполнять параллельные или синхронные вызовы из JavaScript.
  • Для бесперебойной работы с политиками безопасности разрешений и тем же источником.
  • Убедитесь, что разработчики могут проектировать свои решения для поддержки встраивания вне браузера.
  • И, наконец, предоставление разработчикам инструментов для эффективной работы с исходным кодом WebAssembly за счет предоставления редактируемого текстового формата.
Webassembly-цели-1

Ключевые понятия WebAssembly

Внутри капота WebAssembly выполняет следующие шаги:

  • Сначала вам нужно написать код на статически типизированном языке с определенными типами.
  • После этого вы создаете предварительно скомпилированный модуль WASM и загружаете код в компилятор движка.
  • Вышеупомянутый шаг гарантирует, что WASM пропустит синтаксический анализ и сделает код готовым к отображению в веб-браузере.

Ключевые концепции WebAssembly, работающие в веб-браузере, включают:

  • Память: Память в WebAssembly управляется и записывается с помощью низкоуровневых инструкций доступа к памяти. Технически это ArrayBuffer с изменяемым размером, который содержит массив байтов памяти.
  • Модуль: Модуль в WebAssembly представляет собой скомпилированный исполняемый компьютерный код. Из-за своей формы без сохранения состояния веб-браузер компилирует модуль и делится им между Windows и рабочими процессами. Кроме того, модуль хранит и объявляет импорт и экспорт, в дополнение к функциям, таблицам, типам, глобальным переменным и памяти.
  • Таблица: таблица состоит из всех ссылок и функций, использующих типизированный массив изменяемого размера. Это устраняет необходимость хранить необработанные байты в памяти.
  • Экземпляр: в WASM экземпляр представляет собой модуль во время выполнения со всеми парными состояниями. Эти состояния включают таблицу, память и другие импортированные наборы значений.
wasm-key-концепции-1
Ключевые концепции WASM

Как веб-разработчик, вы можете использовать JavaScript API для вызова и определения модулей, таблиц, экземпляров и таблиц. Более того, вы используете JavaScript для синхронного вызова экспорта WASM внутри функций JavaScript. Таким образом, JavaScript хорошо сочетается с WebAssembly, поскольку вы можете использовать WASM для написания высокопроизводительных приложений в веб-браузере.

WASM-объекты

При работе с WebAssembly необходимо отслеживать восемь объектов WASM. К этим объектам относятся:

  • WebAssembly.Global — объект Global является экземпляром глобальной переменной. Он доступен как для WebAssembly.Module, так и для JavaScript.
  • WebAssembly.Module — здесь объект модуля содержит код WASM без сохранения состояния. Код предварительно скомпилирован.
  • WebAssembly.Instance — WebAssembly.Instance — это исполняемый экземпляр WebAssembly.Module с отслеживанием состояния.
  • WebAssembly.Table — объект Table содержит ссылки на функции и действует как оболочка JavaScript.
  • WebAssembly.CompileError — объект CompileError содержит все ошибки во время проверки и декодирования.
  • WebAssembly.RuntimeError — здесь объект RuntimeError перечисляет все ошибки времени выполнения.
  • WebAssembly.LinkError — объект LinkError содержит ошибки, возникающие при создании экземпляра модуля.

Варианты использования и проекты WASM

Мы уже знаем, что WebAssembly предлагает нативную производительность в веб-браузере. Однако, чтобы по-настоящему понять, где вы можете его использовать, вы должны взглянуть на его варианты использования. Давайте перечислим ниже несколько вариантов использования WASM.

Варианты использования WebAssembly охватывают как внутри, так и вне браузера. Например, если вы хотите использовать WASM в браузере, вы можете сделать многое, в том числе:

  • Редактирование видео или аудио, например проект ffmpegwasm.
  • Видеоигры в веб-браузере, такие как эти высокопроизводительные игры.
  • Научная визуализация и моделирование
  • Эмуляция/моделирование платформ, таких как DOSBox, MAME и т. д.
  • Шифрование
  • Удаленный рабочий стол
  • Инструменты разработчика

Сценарии использования

С общей точки зрения, привлекательные варианты использования WebAssembly включают

  • Возможность писать более быстрый код может использовать преимущества базового оборудования.
  • Кроме того, вы также можете выполнять сжатие на стороне клиента, что приводит к лучшему времени загрузки и экономии полосы пропускания. Таким образом, вы используете ЦП клиента или базовое оборудование для сжатия и распаковки, а затем используете ресурсы сервера.
  • Кроме того, вы можете использовать разные языки программирования для написания кода для Интернета, кроме JavaScript. Например, вы можете использовать Rust, C и C++ для написания высокопроизводительного кода для определенных аспектов ваших веб-приложений.

Проекты

Если перейти к реальным примерам, стоит упомянуть следующие проекты.

  • Figma улучшила производительность своего веб-приложения с помощью WebAssembly. Они сократили время загрузки во время инициализации приложения, рендеринга всего дизайна и даже загрузки файла дизайна. Как мы обсуждали ранее, WebAssembly также отлично подходит для сжатия. Figma внедрила WASM, чтобы увеличить размер загружаемых файлов, значительно уменьшив их.
  • Pyodide : Еще один интересный проект WASM — проект Pyodide, выпущенный Mozilla. Это позволяет ученым компилировать научный стек Python в WebAssembly, включая NumPy, SciPy, Scikit-learn и т. д., в браузер. Он предлагает прозрачное преобразование объектов между Python и JavaScript. Наконец, он также позволяет разработчикам использовать веб-API с помощью Python.
  • Brazor WebAssembly : платформа Brazor WebAssembly позволяет разработчикам создавать одностраничные, клиентские и интерактивные веб-приложения с помощью .NET. Вы можете разместить эти приложения в браузере с помощью среды выполнения .NET на основе WebAssembly. Здесь, как разработчик, вы получаете доступ к функциям браузера в своем коде .NET с помощью JavaScript API WebAssembly.
фигма-веб-сборка
Источник: Фигма

Другие многие известные и достойные проекты используют WebAssembly. Это Binaryen, Cheerp, Forest, Grain и другие.

Последние мысли

WebAssembly не очень удобен для новичков. Однако, изучив его варианты использования и ключевые концепции, вы сможете четко понять его возможности.

Учитывая интересные проекты на рынке, самое время изучить WebAssembly, особенно если вы занимаетесь веб-разработкой. Способность WASM работать вне браузера также делает его отличным выбором для разработки, ориентированной на производительность.