У вас есть библиотека на родных языках (например, C, C ++)?

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

Если вы ответили «да» на оба вопроса, то этот пост для вас.

WASM еще не разработал полностью специфицированную сборку мусора, которая также задерживает прямое взаимодействие с DOM через WASM. Итак, если вы когда-нибудь захотите взаимодействовать со своим DOM, вам придется подождать. Сборку мусора можно ожидать через год. 🦄

Так что считайте, что у вас есть собственное приложение, которое невероятно быстрое (как мы все знаем) 🏃. Насколько это будет круто, если мы сразу же получим эти преимущества в Интернете?

🗒 Тем не менее, у меня есть личное ощущение, что нет более веского аргумента в пользу использования веб-сборки. Он определенно много обещает и предлагает легкие победы. Нам все еще нужно подождать и посмотреть, насколько они созреют и будут использовать их более оптимальным образом.

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

Чего ждать?

Бери родное приложение. Считайте, что приложение написано на cpp.

Укажите компилятор cpp с флагом -std, в настоящее время поддерживается только version11. Флаг -O2 указывает компилятору генерировать вывод с дополнительными оптимизациями Javascript и оптимизацией LLVR.

У вас могут быть варианты выбора необходимых вам оптимизаций. Проверить эту ссылку

OPTIONS = -std=c++11 -O2 -I./binaryen/src/

Поскольку WASM - это stack machine со списком набора инструкций по сборке. Нам нужно явно перечислить экспортируемые_функции. Для того, чтобы вызвать их из мира javascript.

FLAGS = -s EXPORTED_FUNCTIONS='["_assemble"]' -s

Здесь мы экспортируем _assemble функцию из нашего собственного приложения.

Нам также необходимо убедиться, что функция _assemble также экспортируется из собственного кода.

Например в cpp

или в rust (пример показывает, как экспортировать)

Затем на следующем шаге, build шаге. Мы определяем параметры (как упомянуто выше), начальную точку вашей собственной библиотеки (со всеми ее зависимостями), а затем выходные файлы вместе с флагами (как указано выше)

build: emcc $(OPTIONS) $(CPP_FILES) -o my-awesome.html $(FLAGS)

Обратите внимание, что мы передали здесь имя вывода с расширением .html, вы также можете указать здесь .js или.wasm. .html создаст html, js и файл памяти. Сгенерированный js файл огромен, особенно потому, что он содержит собственный virtualFileSystem, path and its own memory handlings.

.mem - это инициализация статической памяти, которая требуется для запуска вашего asm-модуля. Это также помогает заставить ваш asm js загружать асинхронно и что-то делать.

ℹ️ .mem не будет сгенерирован, если вы создаете модуль WASM вместо asm.js.

Итак, у вас есть .jsfile, который можно запускать в браузере или узле, и вы можете запустить the.html, и ваш замечательный скомпилированный собственный код будет работать в вашем браузере или узле.

🗒 В результате .js создаст свой собственный filesystem, что означает, что вы не можете сразу использовать файлы или файлы сопоставления. Вы можете обойти это по этой ссылке. (чтобы проверить доступные API.

Перейдите по этой ссылке, чтобы увидеть потрясающее руководство 📚

Https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API

Если вы новичок в веб-сборке, ознакомьтесь с этим классным кикстартером

Https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

Пример кода о том, как преобразовать вашу собственную библиотеку во что-то исполняемое в узле или браузере на

Https://github.com/sendilkumarn/wat-to-wasm-with-asm