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

Так что на случай, если вы никогда не слышали о WebAssembly, кратко коснемся:

  • Хорошо, - что это?
  • Что мне нужно для его запуска?
  • И в конце концов - как мне запустить его в браузере?

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

Не судите о платформе SaaS по ее обложке. Наша команда разработчиков глубоко разбирается в последних разработках систем. ›› Смотрите наши открытые роли

Для меня это было то же самое, поэтому я начал читать и пытаться настроить свою среду так, чтобы она работала, и пыталась понять ее лучше.

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

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

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

Фото focusblurred на flickr

Если вы не можете объяснить это просто, значит, вы недостаточно хорошо это понимаете. ~ Альберт Эйнштейн

Что такое WebAssembly?

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

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

WebAssembly позволяет вам взять такие вещи, как C / C ++, Rust, Go или любой другой поддерживаемый код, и скомпилировать его в так называемый модуль WebAssembly. Вы можете загрузить это в свое веб-приложение и вызвать его из JavaScript.

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

Вы можете начать писать код в формате WAT:

Хотя я не думаю, что вам захочется начинать писать такой код, когда можно написать что-то более читаемое. См. Приведенный ниже пример использования Rust для доставки того же кода с той же функциональностью, создания простой программы с функцией:

Еще один важный аспект - поддержка, WebAssembly поддерживается всеми основными браузерами.

Итак, зачем нам WebAssembly?

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

  • Скорость. Двоичные файлы намного меньше текстовых файлов (файлов JavaScript) и из-за их размера загружаются быстрее.
  • Переносимость - с WebAssembly у нас есть только один этап компиляции, не нужно заботиться о разных операционных системах, потому что ваше приложение будет работать в браузере.
  • Гибкость. До сих пор для написания веб-приложений вам приходилось использовать JavaScript. С WebAssembly вы можете выбрать Java, Rust и многие другие поддерживаемые языки.

Помните, что WebAssembly не заменяет JavaScript, это новый партнер, который будет работать вместе с ним.

Итак, как вы используете WebAssembly?

Теперь пришло время, которого все ждали, как писать / компилировать и запускать WebAssembly.

Для этого есть несколько вариантов:

  1. Без какой-либо настройки, то есть вы можете использовать онлайн-инструменты для написания и компиляции кода.
  2. Настройте свою среду, здесь у вас есть несколько вариантов в зависимости от того, какой язык вы хотите использовать. Я упомянул несколько, но помните, что их гораздо больше.

Вот список языков, поддерживающих компиляцию в WASM.

  • LLVM - Возможность настройки для работы с разными языками.
  • Emscripten - C / C ++
  • Rustc - Ржавчина

Вариант 1 (настройка не требуется)

1. Откройте webassembly.studio.

2. Что у нас здесь:

main.rs

  • Это простой файл, написанный на «Rust», где код экспортирует общедоступную функцию, которая получает одно число для ввода и возвращает результат добавления «1» к переданному вводу.
  • no_mangle extern «C» - функции используются для экспорта их как общедоступных из ящика (модуля ржавчины) с целью связывания с другими библиотеками
  • Этот код будет скомпилирован в файл «wasm», то есть фактический файл, который будет загружен в браузер.

main.js

  • Это дополнительный простой файл, написанный на «JS», где код извлекает скомпилированный файл типа «wasm».
  • Загруженный файл ответов преобразуется в arrayBuffer, а затем инициализирует объект WebAssembly с помощью WebAssembly.instantiate, в этом объекте у нас есть экспортированные функции instance.exports.myFunc.

main.html

  • Файл «HTML», загружающий файл «JS».
  • Чтобы запустить его, нажмите кнопку «Сборка», а затем кнопки «Выполнить» соответственно.

Вариант 2 (требуется настройка)

Этот пример предоставляет несколько способов запустить пример в вашей локальной среде, а также языки на выбор. Я снова выбрал Rust (и вы можете найти здесь отличное руководство для Rust Setup), но не стесняйтесь выбирать свой любимый язык для работы.

В моем случае я использовал вариант установка с помощью Docker.

Для начала вам понадобится файл «Rust», который я использовал в этом примере:

После его компиляции вам понадобится такой HTML-файл:

  • После запуска «HTML» и если все пойдет по плану, вы увидите это в браузере:

Надеюсь, я немного прояснил, что такое WebAssembly и как с ним поиграться.

Использование языка высокого уровня, такого как Rust или Java, открывает для нас множество вариантов, а также множество вариантов использования, к которым это можно применить, например:

  • Инструменты для редактирования видео / аудио
  • Инструменты для потоковой передачи видео / аудио
  • Игры
  • Видео / аудио звонки
  • Виртуальная / дополненная реальность
  • Искусственный интеллект

Наслаждаться!