Введение в WebAssembly

Узнайте, почему WebAssembly - очень важная часть веб-платформы будущего

WebAssemblyв наше время это очень крутая тема.

WebAssembly - это новый двоичный формат низкого уровня для Интернета. Это не язык программирования, который вы собираетесь писать, а вместо этого другие языки более высокого уровня (на данный момент C, Rust и C ++) будут скомпилированы в WebAssembly, чтобы иметь возможность работать в браузере.

Он разработан, чтобы быть быстрым, безопасным для памяти и открытым.

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

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

WebAssembly - это стандарт, разработанныйРабочая группа W3C WebAssembly. Сегодня все современные браузеры (Chrome, Firefox, Safari, Edge, мобильные браузеры) и Node.js поддерживают его.

Я сказал Node.js? Да, потому что WebAssembly родился в браузере, но Node уже поддерживает его, начиная с версии 8, и вы можете создавать части приложения Node.js на любом языке, кроме JavaScript.

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

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

Код JavaScript и WebAssembly взаимодействуют друг с другом, чтобы обеспечить удобство работы пользователей в Интернете.

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

Безопасность

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

Если вам интересна тема, рекомендую прочитатьПамять в WebAssemblyиДокументы по безопасности webassembly.org.

Спектакль

WebAssembly был разработан для скорости. Его главная цель - быть действительно быстрым. Это скомпилированный язык, что означает, что программы будут преобразованы в двоичные файлы перед выполнением.

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

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

Кто сегодня использует WebAssembly?

Готова ли WebAssembly к использованию? Да! Многие компании уже используют его, чтобы улучшить свои продукты в Интернете.

Отличный пример, который вы, вероятно, уже использовали, - этоФигма, приложение для дизайна, которое я также использую для создания части графики, которую использую в повседневной работе. Это приложение работает в браузере, и это очень быстро.

Приложение создано с использованием React, но основная часть приложения, графический редактор, представляет собой приложение C ++, скомпилированное в WebAssembly, отображаемое в Canvas с использованием WebGL.

В начале 2018 года AutoCAD выпустил свой популярный продукт для проектирования, работающий внутри веб-приложения, с использованием WebAssembly для визуализации своего сложного редактора, который был построен с использованием C ++ (и перенесен из кодовой базы настольного клиента).

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

Как можно использовать WebAssembly?

Приложения C и C ++ можно портировать в WebAssembly с помощьюEmscripten, набор инструментов, который может скомпилировать ваш код в два файла:

  • а.wasmфайл
  • а.jsфайл

где.wasmфайл содержит актуальный код WASM, а.jsфайл содержит клей, который позволит коду JavaScript запускать WASM.

Emscripten сделает за вас много работы, например, преобразование вызовов OpenGL в WebGL, предоставит привязки для DOM API и других браузеров и API устройств, предоставит утилиты файловой системы, которые вы можете использовать внутри браузера, и многое другое. По умолчанию эти вещи недоступны напрямую в WebAssembly, так что это отличный помощник.

Код Rust отличается тем, что его можно напрямую скомпилировать в WebAssembly в качестве целевого объекта вывода, и естьhttps://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm.

Что ждет WebAssembly в будущем? Как это развивается?

WebAssembly теперь имеет версию 1.0. В настоящее время он официально поддерживает только 3 языка (C, Rust, C ++), но скоро появятся и другие. Go, Java и C # в настоящее время (официально) не могут быть скомпилированы в WebAssembly, потому что еще нет поддержки сборки мусора.

При любом вызове API-интерфейсов браузера с помощью WebAssembly в настоящее время необходимо сначала взаимодействовать с JavaScript. Ведется работа над тем, чтобы сделать WebAssembly более первоклассным в браузере и сделать его способным напрямую вызывать DOM, Web Workers или другие API-интерфейсы браузера.

Кроме того, ведется работа над тем, чтобы код JavaScript мог загружать модули WebAssembly черезМодули ESТехнические характеристики.

Установка Emscripten

Установите Emscripten, клонировавemsdkРепозиторий GitHub:

git clone https://github.com/juj/emsdk.git

тогда

dev cd emsdk

Теперь убедитесь, что у вас установлена последняя версия Python. У меня была 2.7.10, и это вызвало ошибку TLS.

Пришлось скачать новую (2.7.15) сhttps://www.python.org/getit/установите его, а затем запуститеInstall Certificates.commandпрограмма, поставляемая с установкой.

потом

./emsdk install latest

позвольте ему загрузить и установить пакеты, затем запустите

./emsdk activate latest

и добавьте пути к вашей оболочке, запустив:

source ./emsdk_env.sh

Скомпилируйте программу C в WebAssembly

Я собираюсь создать простойCпрограмма, и я хочу, чтобы она выполнялась в браузере.

Это довольно стандартная программа «Hello World»:

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

Вы можете скомпилировать его, используя:

gcc -o test test.c

и бег./testвыведет на консоль «Hello World».

Скомпилируем эту программу с помощью Emscripten, чтобы запустить ее в браузере:

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

Emscripten предоставил нам html-страницу, которая уже содержит скомпилированную программу WebAssembly, готовую к запуску. Однако вам нужно открыть его с веб-сервера, а не из локальной файловой системы, поэтому запустите локальный веб-сервер, напримерhttp-serverглобальный пакет npm (установите его, используяnpm install -g http-serverесли он еще не установлен). Вот:

The program running in the browser

Как видите, программа запустилась и напечатала «Hello World» в консоли.

Это был один из способов запустить программу, скомпилированную в WebAssembly. Другой вариант - сделать так, чтобы программа открывала функцию, которую вы собираетесь вызывать из JavaScript.

Вызов функции WebAssembly из JavaScript

Давайте настроим ранее определенный Hello World.

Включитеemscriptenзаголовки:

#include <emscripten/emscripten.h>

и определитьhelloфункция:

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {
  printf("Hello!\n");
  return 8;
}

EMSCRIPTEN_KEEPALIVEнеобходим для предотвращения автоматического удаления функции, если она не вызывается изmain()или другой код, выполняемый при запуске (поскольку в противном случае компилятор оптимизировал бы полученный скомпилированный код и удалил неиспользуемые функции - но мы собираемся вызывать это динамически из JS, и компилятор теперь об этом знает).

This little function prints Hello! and returns the number 8.

Теперь, если мы снова скомпилируем, используяemcc:

emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

На этот раз мы добавилиEXTRA_EXPORTED_RUNTIME_METHODSфлаг, чтобы сообщить компилятору покинутьccallиcwrapфункции объекта Module, который мы будем использовать в JavaScript.

Теперь мы можем снова запустить веб-сервер, и как только страница будет открыта, вызовитеModule.ccall('hello', 'number', null, null)в консоли, и он напечатает «Hello!» и вернем 8:

Calling from JS

4 параметра, которыеModule.ccallпринимает имя функции C, возвращаемый тип, типы аргументов (массив) и аргументы (также массив).

Если бы наша функция принимала в качестве параметров 2 строки, например, мы бы назвали ее так:

Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

Мы можем использовать следующие типы:null,string,number,array,boolean.

Мы также можем создать оболочку JavaScript дляhelloфункция с помощьюModule.cwrapфункция, чтобы мы могли вызывать функцию столько раз, сколько захотим, используя аналог JS:

const hello = Module.cwrap('hello', number, null, null)

Using cwrap

Вот официальные документы дляccallиcwrap.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: