Веб-сборка — это новый веб-стандарт, который позволяет разработчикам запускать низкоуровневый код, такой как C++ или Rust, прямо в браузере. Его часто сокращают до wasm, это двоичный формат инструкций для виртуальной машины на основе стека. Он разработан как переносимая цель для компиляции языков высокого уровня, что позволяет развертывать в Интернете клиентские и серверные приложения. Это позволит разработчикам создавать более мощные и производительные веб-приложения с такими функциями, как трехмерная графика и аудио и видео в реальном времени.

Вот простой пример использования WebAssembly в JavaScript.

Во-первых, вам нужно создать файл .wasm, содержащий код WebAssembly, который вы хотите запустить. Следующий код представляет собой простой пример модуля WebAssembly, который экспортирует одну функцию, которая принимает два целых числа в качестве входных данных и возвращает их сумму:

(module
  (func (export "add") (param i32 i32) (result i32)
    get_local 0
    get_local 1
    i32.add)
)

Затем вы можете использовать API JavaScript WebAssembly для загрузки и создания экземпляра модуля, а также вызывать экспортированные функции из JavaScript.

<script>
  // Fetch and instantiate our wasm module
  WebAssembly.instantiateStreaming(fetch('add.wasm'))
    .then(obj => {
      // Use the exports object to call the add function
      var result = obj.instance.exports.add(2, 3);
      console.log(result); // Outputs: 5
    });
</script>

Это всего лишь простой пример, и WebAssembly можно использовать для гораздо более сложных и мощных приложений. Стоит отметить, что это все еще новая технология, которая еще не широко поддерживается во всех браузерах.

Интересно, что вам не нужно импортировать какую-либо конкретную библиотеку JavaScript, чтобы использовать WebAssembly. WebAssembly JavaScript API — это встроенная функция современных веб-браузеров, которую можно использовать непосредственно в коде JavaScript.

В приведенном ранее примере код использует метод WebAssembly.instantiateStreaming() для загрузки и создания экземпляра модуля WebAssembly. Этот метод является частью JavaScript API WebAssembly, который доступен во всех современных веб-браузерах, поддерживающих WebAssembly.

Другой пример использования WebAssembly для вычисления факториала числа с использованием кода C:

// factorial.c
#include <stdio.h>

int factorial(int n) {
  int result = 1;
  for (int i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

Чтобы скомпилировать этот код в WebAssembly, мы можем использовать набор инструментов Emscripten:

emcc factorial.c -s WASM=1 -o factorial.wasm

Это создаст файл с именем factorial.wasm, который содержит двоичный файл WebAssembly.

Чтобы использовать этот модуль WebAssembly в JavaScript, мы можем использовать метод WebAssembly.instantiate():

const importObject = {};

WebAssembly.instantiateStreaming(fetch('factorial.wasm'), importObject)
  .then(({instance}) => {
    const factorial = instance.exports.factorial;
    console.log(factorial(5)); // 120
  });

В этом примере мы используем метод WebAssembly.instantiateStreaming() для загрузки файла factorial.wasm, а затем мы можем вызвать функцию factorial(), экспортированную из модуля WebAssembly. Функция принимает целочисленный параметр n и возвращает факториал этого числа.

Таким образом, мы можем использовать код C в веб-сборке и сделать веб-страницы более эффективными.

Также стоит отметить, что если вы хотите использовать WebAssembly с фреймворком JavaScript, таким как React или Angular, вы все равно можете использовать JavaScript API WebAssembly непосредственно в своем коде без необходимости в каких-либо дополнительных библиотеках.

Однако есть некоторые библиотеки с открытым исходным кодом, такие как wasm-bindgen, которые могут помочь вам упростить процесс взаимодействия с модулями WebAssembly из JavaScript. Он предоставляет высокоуровневый интерфейс для работы с модулями WebAssembly, а также может обрабатывать некоторые низкоуровневые детали за вас.

Заключение

WebAssembly может революционизировать наши представления о веб-разработке. Благодаря возможности запуска высокопроизводительного кода в браузере он открывает совершенно новый мир возможностей для веб-приложений. WebAssembly справится со всем: от видеоигр и виртуальной реальности до сложных научных симуляций. По мере того, как все больше и больше разработчиков используют эту технологию, мы можем ожидать взрыв новых и инновационных веб-приложений, которые раздвигают границы возможного в Интернете. Будущее веб-разработки выглядит ярче, чем когда-либо прежде, и WebAssembly находится в авангарде этой захватывающей новой эры.

Иконки предоставлены: Flaticon

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.