Эта статья написана, чтобы помочь новичкам понять основные концепции: с чего начать? Что для вас есть и какие реальные проблемы вы можете решить?

Я уже некоторое время слышу термин «веб-сборка». Наконец, я решил разобраться, что происходит, и почему Google говорил об этом на своем мероприятии I / O?

2017: https://www.youtube.com/watch?v=6v4E6oksar0

2018: https://www.youtube.com/watch?v=BnYq7JapeDA

2019: https://www.youtube.com/watch?v=njt-Qzw0mVY

Так что же такое веб-сборка?

  • Web Assembly была создана для создания безопасного, портативного, быстро загружаемого и «исполняемого формата, подходящего» для Интернета.
  • Бинарный формат, подобный сборке, для кода, который может выполняться веб-браузерами.
  • Он предоставляет платформу для заполнения пробелов или возможностей, которых иногда не хватает браузеру, короче говоря, переносимости.
  • Его можно сгенерировать из таких языков, как C, C ++, Rust и т. Д.
  • Это цель компилятора для программ в Интернете.
  • Открытый стандарт с поддержкой кроссбраузеров и поддержкой Mozilla, Microsoft, Apple и Google.
  • Разработано сообществом W3C, сокращенно wasm.
  • Обеспечивает развертывание в Интернете клиентских и серверных приложений.

Цель компилятора - это не что иное, как код, созданный компиляторами.

Итак, как это работает?

Существуют разные способы реализации веб-сборки. Этот пост будет посвящен только Emscripten и AssemblyScript.

Например, если вы пишете низкоуровневый код на языке C / C ++ или Rust, вы конвертируете его в битовый код LLVM с помощью Clang / GCC ( интерфейсные компиляторы ), который дополнительно анализирует код C, C ++ и переводит его в представление, подходящее для LLVM.

Emscripten Compiler компилирует любой другой код, который можно преобразовать из битового кода LLVM в .wasm. Этот файл wasm представляет собой скомпилированный формат байт-кода, который позволяет развертывать в Интернете клиентские и серверные приложения.

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

Демо

Давайте рассмотрим несколько демонстраций в реальном времени и поймем, как они были реализованы.

Vapor Boy: это приложение с поддержкой PWA, и оно ясно показывает, что мы все еще можем использовать код 90-х и развертывать его в Интернете с помощью wasm.

Введение: https://github.com/torch2424/vaporBoy

Демо: https://vaporboy.net/

FunkyKarts: Это также хороший пример игрового процесса в Интернете. Если вы внимательно посмотрите, вы можете найти .wasm файл в сетевой панели, который загружается при загрузке страницы как отдельный запрос.

Введение: https://www.rossis.red/wasm.html#making_a_splash

Демо: https://www.funkykarts.rocks/demo.html

Google Lab: это инструмент сжатия изображений, который работает в автономном режиме в браузере без сервера. Вы можете перейти в автономный режим, и он по-прежнему сжимает изображения в автономном режиме для вас. Многие из нас выходят в Интернет, чтобы сжимать изображения, когда это необходимо, чего можно избежать в целях безопасности. Эти инструменты написаны на Emscripten и поддерживаются такими языками, как OptiPNG, Resize (Rust), MozJPEG (C ++), WebP. Также еще один хороший пример Emscripten.

Введение: https://github.com/GoogleChromeLabs/squoosh/

Демо: https://squoosh.app/

Perception Toolkit: PerceptionToolkit - это инструмент, который обеспечивает резервную поддержку для сканирования QR-кода и других функций распознавания форм, которые иногда не поддерживаются браузером. Вы можете выполнить быструю установку, запустить ее на своем локальном компьютере и узнать больше.

Https://perceptiontoolkit.dev/documentation/

Вы можете писать в веб-сборке?

Хотя веб-сборка в настоящее время поддерживается многими языками, включая Node, Java, Python, C, C ++, Rust, Assembly Script и т. Д., В этом посте будут описаны только Emscripten и AssemblyScript подходит.

Emscripten

Если вы являетесь разработчиком C / C ++ или Rust, я бы посоветовал использовать Emscripten и следующие функции:

  • Компилирует код C и C ++ в .wasm или asm.js, который можно развернуть в Интернете с помощью связующего кода.
  • Скомпилируйте любой другой код, который можно преобразовать из битового кода LLVM в JavaScript.
  • Это заставляет WebGL притворяться OpenGL для работы с реальными файлами в серверной среде.
  • Для получения более подробной информации ознакомьтесь с документацией ниже.


Документация Emscripten - документация Emscripten 1.39.2
Этот полный набор документации содержит все, что вам нужно знать для использования Emscripten. Начало работы… emscripten.org



Сценарий сборки

Если вы разработчик JavaScript, AssemblyScript поможет вам написать код TypeScript и скомпилировать его в WebAssembly. Некоторые функции и ограничения упомянуты ниже:

  • Он поставляется со своими специальными типами, включая числа и указатели, такие как i32, i64, f32, f64, usize и т. Д.
  • Он поставляется с некоторыми из его типов, включая целые числа и указатели.
  • В AssemblyScript переменные и аргументы должны быть статически типизированы, поскольку он не поддерживает никаких типов объединения.
  • Некоторые ограничения, которые он налагает: отсутствие интерфейсов, упрощенный интерфейс массива, отсутствие строки или дат.
  • В wasm у вас нет DOM API, поэтому вы не можете напрямую использовать свой код TypeScript.


Введение
Его архитектура отличается от виртуальной машины JavaScript тем, что она заранее компилирует программу, что очень похоже на другие… docs.assemblyscript.org



Онлайн-редакторы

Если вы достаточно ленивы, чтобы установить и настроить Emscripten или AssemblyScript на вашем локальном компьютере, есть несколько онлайн-редакторов, которые вы можете проверить на предмет ввода, вывода и файлов, сгенерированных на лету, пока вы компилируете и выполняете свой wasm-код.

Если вы откроете первую ссылку, вы сможете создать проект C / C ++ / Rust или AssemblyScript из левой навигации и заметить исходный каталог с некоторыми начальными файлами.

  • Если вы начнете с кода C, вы можете увидеть следующие файлы и их соответствующие роли:
  • Файл main.c - это ваш основной файл для инициализации вашего внутреннего кода и возврата любых ожидаемых данных.
  • main.html будет статическим HTML-файлом, который будет загружать файл отдельно в один из ваших HTML-заполнителей.
  • main.js будет загружать файл .wasm, а затем читать его данные из буфера массива и запускать экземпляр веб-сборки для вызова основного метода программы C, который вернет данные, которые вы ожидаете в контейнере, который вы упомянули в указанный выше HTML-файл.

Жизненный цикл кода

JS против Wasm: приведенная выше диаграмма является одним из примеров компиляции JIT (точно в срок) и AOT (заранее). Поскольку типизированный язык wasm знает, сколько памяти ему нужно для выполнения и обработки определенных функций, тогда как JavaScript по своей природе является интерпретируемым языком.

Парсер против декодирования: нет необходимости разбирать .wasm code. Вместо этого браузеры декодируют файл wasm, на что уходит меньше времени, чем на анализ кода JavaScript.

Компиляция / оптимизация: код wasm оптимизируется при генерации его двоичного кода, что устраняет необходимость тратить это время на выполнение. Однако JavaScript тратит время на оптимизацию и деоптимизацию перед любым выполнением, что делает его медленным.

Код Выполнение: wasm не требует такой оптимизации, поскольку он генерируется из статически типизированного кода. Это также заставляет браузер тратить меньше памяти, поскольку профилировщику не нужно поддерживать таблицу со статистикой выполнения кода для ее оптимизации.

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

Wasm против JavaScript (непредсказуемо)

JavaScript непредсказуемо относительно того, сколько времени потребуется для завершения процесса, в то время как wasm остается неизменным во всех браузерах и платформах. Если вы заметили на диаграмме ниже, JavaScript находится на «быстром пути» в одном браузере и «медленно» в другом, в то время как wasm остается неизменным. Я знаю, что вы согласитесь с медленным поведением браузеров Internet Explorer.

Почему веб-сборка?

  • Если вы хотите развернуть компонент, написанный на языке, отличном от JS, в Интернете (переносимость).
  • Если вы хотите повысить производительность своего приложения.
  • Если вы предпочитаете компиляцию AOT (заранее) вместо компиляции JIT (точно в срок). Подробнее об этом здесь: https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/
  • Если вы работаете над высокопроизводительными играми, которым необходимо отображать графику, воспроизводить звуки, загружать и обрабатывать файлы, вплоть до фреймворков приложений, таких как QT.
  • Если вы разработчик C / C ++ / Rust и не хотите изучать JavaScript для развертывания чего-либо в Интернете.
  • Каждый модуль веб-сборки выполняется в изолированной среде, отделенной от среды выполнения хоста, с использованием своих методов изоляции сбоев. Это делает модули wasm более безопасными и с меньшим количеством ошибок.
  • Он способен сделать Интернет равным нативным приложениям в таких характеристиках, как распознавание лиц, высококачественные игры, производительность, аналогичная нативной, управление памятью, просмотр OpenGL непосредственно в сети.

Ключевыми преимуществами могут быть:

Какие сообщества уже используют Wasm?

AutoCAD - хорошо известный продукт теперь работает в веб-браузерах. Https://www.autodesk.com/products/autocad-web-app/overview?linkId=68719474

Игровой движок Unity - хорошо известен для 2D / 3D / AR / VR и моделирования. Https://blogs.unity3d.com/2018/08/15/webassembly-is-here/

Движок Unreal Game - разработан Epic Games и специализируется на боевых действиях и убийствах. Https://docs.unity3d.com/Manual/webgl-building.html

eBay - Реализован сканер штрих-кода для Интернета. Https://tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/

Поддержка браузера

Если вы хотите убедиться, что браузер поддерживает wasm, я предлагаю вам взглянуть на https://caniuse.com/

Ресурсы: