Рубрики
Без рубрики

Введение в веб-сборку

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

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

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

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

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

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

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

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

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

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

JavaScript и код веб-сборки взаимодействуют, обеспечивая отличный пользовательский интерфейс в Интернете.

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

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

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

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

Представление

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

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

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

Кто сегодня использует веб-сборку?

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

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

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

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

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

Как вы можете использовать веб-сборку?

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

  • файл .теплый
  • файл .js

где файл .asm содержит фактический код ISM, а файл .js содержит связующее звено, которое позволит коду JavaScript запускать WASM.

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

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

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

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

При выполнении любого вызова API-интерфейсов браузера с использованием веб-сборки в настоящее время вам необходимо сначала взаимодействовать с JavaScript. В настоящее время ведется работа над тем, чтобы сделать WebAssembly более первоклассным пользователем в браузере и дать ему возможность напрямую вызывать DOM, веб-работников или другие интерфейсы 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/ установите его, а затем запустите Установите сертификаты.команда программа, которая поставляется вместе с установкой.

Затем

./emsdk install latest

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

./emsdk activate latest

и добавьте пути в свою оболочку, выполнив:

source ./emsdk_env.sh

Скомпилируйте программу на языке Си в WebAssembly

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

Это довольно стандартная программа “Привет, мир”:

#include 

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

Вы могли бы скомпилировать его с помощью:

gcc -o test test.c

и запускаем ./тест напечатал бы “Привет, мир” на консоли.

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

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

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

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

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

Вызов функции веб-сборки из JavaScript

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

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

#include

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

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

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

Эта маленькая функция выводит Привет! и возвращает число 8.

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

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

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

Теперь мы можем снова запустить веб-сервер и, как только страница откроется, позвонить Module.ccall ("привет", "номер", ноль, ноль) в консоли, и он напечатает “Привет!” и вернет 8:

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

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

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

Типы, которые мы можем использовать, – это null , строка , число , массив , логическое .

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

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

Вот официальные документы для вызова и обернуть .

Оригинал: “https://flaviocopes.com/webassembly/”

Читайте ещё по теме: