В сегодняшнем блоге мы познакомим вас с веб-сборкой через простую программу на C/C++ и покажем, насколько мощна эта парадигма.

Итак, что такое веб-сборка?

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

Формат веб-сборки (также называемый wasm) оптимизирован по размеру и времени загрузки. Это обеспечивает более быстрое выполнение веб-приложений.

Сегодня мы возьмем пример простой программы на языке C, создадим wasm и запустим его в браузере Chrome.

Для этого нам понадобится инструмент emscripten, который мы можем скачать и установить отсюда.

https://kripken.github.io/emscriptensite/docs/getting_started/downloads.html

После установки инструмента создайте простой файл c

Используйте компилятор emcc прямо сейчас

emcc hello.c -s WASM=1 -o hello.html

Это создаст файл html, а также файл wasm и файл js.

Запустите html-файл, как показано ниже.

Мы можем увидеть вывод в браузере

Затем мы создаем программу c с нашей определенной функцией и вызываем ее через javascript в браузере.

Здесь мы определили тестовую функцию, которую мы будем вызывать через javascript, как только у нас будет сгенерирован wasm.

Снова сгенерируйте wasm, js и html файл.

Теперь в сгенерированном файле hello1.html нам нужно внести небольшие изменения, чтобы вызвать функцию.

Добавьте кнопку над разделом скрипта

И фактический код прослушивателя событий нажатия кнопки до окончания раздела скрипта. Здесь мы видим, что вызываем проверку функции c.

При открытии в браузере и нажатии на кнопку мы видим

Итак, мы видим, что смогли отобразить вывод функции c в браузере.

Аналогично C, мы можем создать привязки wasm для Rust, golang. В следующем блоге мы рассмотрим программу на Rust, скомпилируем ее в wasm и запустим в браузере.

За более подробной информацией можно следить на сайте Mozilla (https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm)