Используйте возможности языка C для повышения производительности вашего веб-приложения.

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

Но у него могут быть некоторые проблемы с производительностью, когда мы говорим о более интенсивном использовании, таком как 3D-игры, компьютерное зрение и редактирование изображений.

WebAssembly призван решить эту проблему.

Что такое WebAssembly?

Как пишет официальный сайт:

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

Но что это значит?

Это означает, что вы можете скомпилировать код, написанный, например, на C или Rust, и выполнить его в браузере с почти нативной скоростью.

Вы можете повторно использовать этот старый код, который у вас есть, и иметь возможность запускать его в своем браузере, как это было веб-приложение.

Код WebAssembly выполняется на виртуальной машине вместе с JavaScript. Это не способ заменить JavaScript. Это способ оптимизировать и позаботиться о критических для производительности компонентах веб-приложения.

Вы не программируете непосредственно в WebAssembly, а используете другие языки высокого уровня, такие как C, C ++, Rust и Go. При компиляции кода вы устанавливаете цель как WebAssembly и используете ее напрямую в браузере.

Обобщить:

  • Это быстро и эффективно, используя преимущества общих аппаратных возможностей.
  • Он создается с использованием широкого спектра языков высокого уровня, таких как C ++, Rust и Go.
  • Он может обращаться к методам JavaScript и может быть доступен с помощью методов JavaScript.

Примечание: принцип работы WebAssembly не рассматривается в этой статье. Если вы хотите узнать о нем побольше, посмотрите эту замечательную статью.

В этой статье мы увидим, как создать приложение WebAssembly с использованием C.

Вы можете найти полный код здесь.

Настройка среды

Чтобы скомпилировать наш код C / C ++ в WebAssembly, нам понадобится набор инструментов. Этот инструмент будет отвечать за перевод кода в формат WebAssembly.

Для этого мы установим набор инструментов Emscripten. Это проект с открытым исходным кодом, который может компилировать любой переносимый код C / C ++ в WebAssembly.

Примечание: это руководство было выполнено на машине с установленной Ubuntu 20.04.

Для его использования в вашей системе должны быть установлены Python, CMake и Java (необязательно). Если у вас его нет, просто запустите команду:

sudo apt install python3 cmake default-jre

Для установки запустите следующий код:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

После установки вы можете добавить некоторые переменные среды в PATH:

source ./emsdk_env.sh

Примечание: вам придется запускать этот код каждый раз, когда вы захотите использовать компилятор. Вы можете добавить его в свой .bashrc, чтобы он выполнялся каждый раз, когда вы открываете терминал.

Выполните команду emcc, чтобы проверить, все ли работает. У вас должен быть результат, подобный этому:

> emcc --version
emcc (Emscripten gcc/clang-like replacement) 2.0.8 (d059fd603d0b45b584f634dc2365bc9e9a6ec1dd)
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Привет, мир!

В качестве первого теста давайте создадим простую программу.

Теперь нам нужно его скомпилировать:

emcc hello.c -o hello.html

Команда emcc используется для компиляции нашего файла hello.c в WebAssembly. После запуска вы увидите три файла:

  • hello.wasm: это скомпилированный код WebAssembly.
  • hello.js: это связующий код, необходимый для загрузки двоичного файла WebAssembly. Он будет обрабатывать некоторые ошибки (например, деление на ноль) или устанавливать доступ к функциям вывода. Подробнее об этом вы можете узнать здесь.
  • hello.html: страница шаблона, которая загружает WebAssembly и связующий код. Вы можете изменить шаблон с помощью опции --shell-file <<path>>. Вы можете отключить этот вывод, передав цель .js параметру -o.

С этими файлами у вас есть полный пример. Теперь вы можете обслуживать его и проверять в своем браузере. Вы должны увидеть такой вывод:

Примечание: если в вашей системе установлено node, вы можете использовать пакет http-server для обслуживания файлов. Для установки просто запустите команду npm install -g http-server и запустите http-server.

Экспорт функции

Предыдущий пример был прост. Но что, если у нас есть функция и мы хотим использовать ее в нашем коде JavaScript? Посмотрим, как это сделать.

Создайте файл с именем add.c и поместите следующий код:

Функция add получит два целых числа и вернет сумму. Ничего фантастического. Флаг EMSCRIPTEN_KEEPALIVE гарантирует, что компилятор не удалит функцию из окончательного двоичного файла.

Этот флаг также экспортирует функцию. Перед именем функции будет помещен _. Итак, мы должны вызвать _add из кода JavaScript.

Компилировать:

emcc add.c -o add.js

Будет сгенерирован только связующий код JavaScript и двоичный файл wasm.

Теперь нам нужно создать файл html, который загрузит оба файла и будет использовать созданную функцию. Создайте файл add.html и поместите в него следующее содержимое:

Чтобы использовать нашу функцию, мы должны импортировать файл add.js. Это делают:

<script src="add.js"></script>

Этот связующий код (сгенерированный компилятором Emscripten) загрузит файл add.wasm и создаст необходимые привязки.

Все экспортированные функции будут доступны в глобальном объекте с именем Module. Вы можете создать свою собственную реализацию этого кода, если хотите.

Примечание: код WebAssembly загружается асинхронно, поэтому вам придется немного подождать, пока функции станут доступны.

Эта страница проста. Имеет два входа и кнопку. Когда вы щелкаете по кнопке, она вызывает run_ws, который вызывает функцию wasm с аргументами из поля ввода.

Примечание: в этом коде нет обработки ошибок, чтобы упростить его.

Теперь откройте браузер, и вы увидите следующую страницу:

Заключение

Благодаря компилятору Emscripten создание приложения WebAssembly на C не является сложной задачей.

Это также способ повторно использовать старый код, написанный на другом языке программирования, без необходимости переводить его на JavaScript.

В этом руководстве мы увидели, как создать простое приложение WebAssembly с использованием C.

Полный код доступен здесь.