Автор оригинала: Мартин Ольсанским (Осло)
WASM в Golang для разработчиков JavaScript
- Вы думаете, что WebAssembly (WASM) используется только для работы с изображениями, сложной математики или других нишевых случаев применения в Интернете?
- Вы все еще путаете WASM с Web Workers и Service Workers?
- Вам не интересно, потому что вы думаете, что веб-приложения на JavaScript, разрабатываемые сегодня, будут нуждаться в поддержке в течение следующих 10+ лет?
- Вы хотите заниматься фронтенд веб-разработкой на языках, отличных от JavaScript?
Для тех, кто не понимает, вот ссылки на демо или src ? Есть gists с поясняющими комментариями в коде.
Сюжет
Наша цель – создать простую игру для кошек: перемещение красного лазера на мобильном телефоне с некоторыми аудиоэффектами и вибрациями. Мы будем реализовывать все на Golang (Go), включая манипуляции с DOM, логику и состояние.
Аааааа и поскольку кошки не могут использовать мышь, нам понадобится сенсорное взаимодействие для этих кошачьих лап.
Введение объяснено!
Думайте о WASM как об универсальной виртуальной машине (песочнице), где вы пишете ЛЮБОЙ код один раз, и он работает везде.
WASM – это цель компиляции, а не язык. Как если бы вы компилировали одновременно для Windows, Mac OS и Linux!
Я не думаю, что WASM стремится свергнуть JS, он стремится иметь альтернативы без каких-либо жертв.
Представьте себе всех людей, которые разрабатывают на Go, Swift, Rust, Ruby, C++, OCaml или других языках. Теперь они могут использовать свой любимый язык для создания интерактивных, сетевых, быстрых, поддерживающих автономную работу веб-сайтов и веб-приложений.
Вы когда-нибудь участвовали в дискуссии о том, будет ли ваш проект моно-репо или мульти-репо?
Теперь вам также предстоит обсудить, будет ли ваш проект моно- или мультиязычным.
Когда люди могут работать с одним и тем же техническим стеком, все становится проще. Особенно общение между командами.
Вы по-прежнему можете использовать React, Vue, но теперь вы больше не вынуждены использовать JS.
Чем WASM отличается от Service & Web Workers?
Service & Web Workers позволяют запускать фоновые, автономные и кэширующие процессы. Они имитируют многопоточность, не имеют доступа к DOM, не могут делиться данными (только через обмен сообщениями) и выполняются в отдельном контексте. Черт возьми, вы даже можете запустить в них WASM вместо JS. На мой взгляд, они лишь предоставляют некий слой абстракции с особыми привилегиями, никто не говорит, что эти слои должны выполнять JS.
Service & Web Workers – это функция браузера, это не какая-то эксклюзивная функция JS.
Настройка среды разработки
Мы будем использовать WASM, Go, JS и (опционально) Docker.
Если вы не знаете Go, но знаете JS, изучите Go, а затем вернитесь сюда. Давайте начнем с обращения к вики Go WASM.
Используйте ваш локальный go, я использую golang:1.12-rc Docker образ. Просто установите два флага WASM для компилятора go здесь. Создайте простой hello world в main.go для тестирования.
$ GOOS=js GOARCH=wasm go build -o game.wasm main.go
Теперь возьмите клей wasm_exec.js, предоставленный командой Go. Этот глобал Go абстрагирует инициацию WASM. Нам не нужно создавать абстракцию DOM с нуля? Наконец, возьмите файл .wasm и запустите нашу игру.
В целом, она должна выглядеть так:
Покажите мне уже код Go!
Для отображения нашей простой игры достаточно <canvas>. Мы можем создать структуру DOM и элементы прямо из кода Go! Этот syscall/js (включенный в стандартный пакет Go) обрабатывает взаимодействие DOM для нас.
main()
Спорим, вы давно не видели main()?
Выглядит очень похоже на JS, не так ли?
Да, это все, что вам нужно для взаимодействия с DOM! Пока только несколько функций Get и Call.
В этот момент я спросил себя. Я все еще пишу JS в некотором роде… как это может быть улучшением? Поскольку у нас пока нет прямого доступа к DOM, нам приходится прибегать к вызову DOM (через JS), чтобы сделать что-либо. Представьте, как можно абстрагироваться от этого, скажем, с помощью JSX/React. На самом деле, вы уже можете, но давайте оставим это для моей следующей статьи.
“Рендеринг” и обработка событий
Прямое использование либы syscall/js открывает некоторые ES5-подобные обратные вызовы. Мы можем прослушивать события DOM. Выглядит очень чисто с этими статическими типами!
Логирование, аудио и “асинхронность”
В Go существует правило писать все функции синхронно. Решение о том, является ли func асинхронной, принимает вызывающая сторона. Заставить func выполняться асинхронно очень просто. Просто добавьте к ней префикс go, и готово! При этом создается поток с собственным контекстом. Вы все еще можете привязать к нему родительский контекст, не волнуйтесь.
Запускаем нашу игру навсегда!
Этот код создает небуферизованный канал и пытается получить от него сообщение. И поскольку никто никогда ничего не посылает по этому каналу, это, по сути, блокирующая вечная операция, позволяющая нам запускать нашу программу вечно.
Обновление состояния игры и перемещение красного лазера
Здесь нет никакого управления состоянием, просто простая типизированная структура, которая не позволяет передавать внутрь некорректные значения.
Заключение
Тот факт, что WASM все еще считается MVP (MAP) и что вы можете создать такую игру, не написав ни строчки JS, удивителен! CanIUse уже полностью зелёный, ничто не мешает вам создавать сайты и приложения на базе WASM.
Смотрите, вы можете комбинировать все языки, какие захотите, событие JS -> WASM. В конце концов, все они будут компилироваться в байткод WASM. Если вам нужно разделить что-то между ними, вы можете это сделать, потому что они могут использовать общую память.
Чего я боюсь: из последних новостей мы узнали, что Microsoft создает браузер Chromium, а доля рынка Firefox составляет менее 9%. Это дает Google власть над WASM. Если они не пойдут на это, массы могут никогда об этом не узнать.
Кто уже использует WASM?
Согласен, мой пример просто рисует полностраничный canvas. Вот более продвинутые примеры, ориентированные на семантический веб awesome-wasm#web-frameworks-libraries.
Довольно много проектов уже вскочили на поезд WASM. Некоторые из наиболее интересных для меня – Spotify, Twitch, Figma и EWASM.
WASM в эпоху Web3
Сегодня, если вы хотите использовать какой-либо кошелек Ethereum в мобильном интернете, вам придется скачать мобильный кошелек вроде Status.im из какого-нибудь централизованного App Store и доверять всем сторонам.
Как насчет прогрессивного веб-приложения, которое запускало бы geth (клиент Go Ethereum) с легкой синхронизацией через WebRTC? Оно может использовать Service Worker для обновления своего WASM-кода и работать в фоновом режиме, может быть размещено на IPFS/Dat.
Полезные статьи, ресурсы и материалы по WASM
- WebAssembly – это больше, чем веб
- WebAssembly и Go: взгляд в будущее и комментарии HN
- посты от Mozilla Hacks и Hacker News
- Архитектура WebAssembly для Go
Оригинал: “https://www.freecodecamp.org/news/webassembly-with-golang-is-fun-b243c0e34f02/”