Go: WebAssembly (WASM)

[Olej]

Куда больше чем GUI на Go (хотя, может, я к нему ещё вернусь) меня занимает WebAssembly (WASM) ... в частности, применительно к программированию кода на Go ... хотя, может, и C/C++ или ещё что-то.
Хотя бы просто потому, что как-то упустил из виду вовремя...

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

[Olej]

Введение в WebAssembly (WASM)

Feb 12, 2022

Хотя бы просто потому, что как-то упустил из виду вовремя...

Ничего удивительного, потому что через 12 дней началась война ...

WebAssembly был анонсирован в 2015 году. Первой демонстрацией стала реализация игры Unity Angry Bots в Firefox, Google Chrome и Microsoft Edge. Спустя всего 4 года после анонса WebAssembly был признан официальным веб-стандартом и четвертым веб-языком после HTML, CSS и JavaScript, а на сегодняшний день его поддерживают 94% браузеров.

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

Это просто новый язык программирования, как C и C++?
Нет, это не язык программирования. Это технология, которая преобразует код, написанный на каком-либо языке программирования, в машинный код, понятный браузеру.

[Olej]

занимает WebAssembly (WASM) ... в частности, применительно к программированию кода на Go

WebAssembly на Golang с нуля

02.10.2021

WebAssembly (WASM) появился в марте 2017 года. Это открытый стандарт (технология) для компилирования приложения в переносимом двоичном коде и выполнения его в веб-браузере.

Тут у авторов относительно времени создания явное расхождение...

WASM  —  не ассемблер, а текстовое представление двоичного байт-кода. Но предназначен он не только для браузеров: в них имеется встроенная виртуальная машина для выполнения WebAssembly.

К этой публикации я ещё вернусь вскоре...

[Olej]

WebAssembly: что и как

14 ноя 2019 в 02:00

Вообще я бэкенд программист, но меня заинтересовала эта технология, она позволяет использовать мои знания бэкенда на фронте.

Проблема
Начнём с проблемы, которая решается этой (относительно новой) технологией. Проблема эта — быстро исполнять код в браузере. Быстро — это значит, «быстрее чем JavaScript», в идеале настолько быстро, насколько позволяет имеющийся у нас процессор.
Кроме того, исторически, вокруг этой проблемы постепенно возникли важные дополнительные требования:
- Zero configuration — это должно быть решение «из коробки», ничего кроме браузера.
- Безопасно — новая технология не должна создавать новых угроз, у нас и так есть чем заняться по части безопасности.
- Кросс-платформенно — браузеры работают на всех основных процессорах, включая мобильные платформы.
- Удобно для разработчиков — то есть для нас с вами.

[Olej]

Проект Go-app : https://github.com/maxence-charriere/go-app

Go-app is a package for building progressive web apps (PWA) with the Go programming language (Golang) and WebAssembly (Wasm).

И его документация: https://go-app.dev/getting-started

Getting Started
You are about to learn how to get started with this package by building and running an app that displays Hello World.

[Olej]

К этой публикации я ещё вернусь вскоре...

А теперь нужно всё это переварить...
В принципе, здесь пошагово прописано создание элементарного приложения WASM и его выполнение...
Но, в конце концов, вычитав это всё ... даётся автором скрипт создания этого простейшего проекта - если кто захочет со мной вместе поупражняться... :
Загрузка и создание...

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/ex.com$ wget -qO - https://bit.ly/3lVlO1i | bash /dev/stdin example.com
Create WebAssembly app ...
go: creating new go.mod: module example.com
1/4 - Copy 'wasm_exec.js' - this will be the js-adapter itself for our app - to communicate throw JS to 'wasm' app.
2/4 - Create and compile 'wasm'.
3/4 - Create html templates
3/4 - Create go server - to handle our application.
4/4 - Create Makefile.

+--------------------+
| AVAILABLE COMMANDS |
+--------------------+

make run       only start application server.
make run-now   start application server and open it in web-browser.

RUN IT:
cd example.com && make run-now

---------------------------------------------------------------------------------------

Этим скриптом скачивается и выполняется скрипт ... но его любопытно и посмотреть:

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ wget -qO - https://bit.ly/3lVlO1i > example.sh

Переименование только потому что мне так удобнее, во избежание накладок:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/ex.com$ mv example.com example.www.com

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ tree example.www.com 
example.www.com
├── app
│   └── main.go
├── favicon.ico
├── go.mod
├── index.html
├── main.wasm
├── Makefile
├── server.go
└── wasm_exec.js

1 directory, 8 files

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.www.com$ go version
go version go1.21.3 linux/amd64

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.www.com$ cat go.mod
module example.com

go 1.21.3

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ cd example.www.com 

Запуск:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.www.com$ make run
/usr/bin/go run  server.go
2024/02/06 01:12:11 Run server on :8080 ...

В FireEox в "Инструменты" -> "Инструменты браузера" -> "Инструменты web-разработчика" -> "Консоль":

Снимок экрана от 2024-02-06 01-14-45.png (79.33 КБ) 202 просмотра

Пока это впечатляет слабо, но это работает

[Olej]

его любопытно и посмотреть

А посмотревши убедиться, что с авторским примером проще разбираться так:
1). скачать сам скрипт example.sh как показано выше...
2). запускать его в произвольном месте с параметром - произвольное имя каталога примера:

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ pwd
/home/olej/2024/WebAssembly

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ bash example.sh example.wash
Create WebAssembly app ...
go: creating new go.mod: module example.wash
1/4 - Copy 'wasm_exec.js' - this will be the js-adapter itself for our app - to communicate throw JS to 'wasm' app.
2/4 - Create and compile 'wasm'.
3/4 - Create html templates
3/4 - Create go server - to handle our application.
4/4 - Create Makefile.

+--------------------+
| AVAILABLE COMMANDS |
+--------------------+

make run       only start application server.
make run-now   start application server and open it in web-browser.

RUN IT: 
cd example.wash && make run-now

3). и получить готоый каталон примера, вместо того, чтобы создавать это вручную:

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ tree example.wash
example.wash
├── app
│   └── main.go
├── favicon.ico
├── go.mod
├── index.html
├── main.wasm
├── Makefile
├── server.go
└── wasm_exec.js

1 directory, 8 files

[Olej]

скачивается и выполняется скрипт

Компиляция Go-кода в WASM байт-код делается стандартным GoLang компилятором (как в этом примере, так и во множестве других) так:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ time GOOS=js GOARCH=wasm go build -o main.wasm main.go

real	0m0,081s
user	0m0,196s
sys	0m0,084s

Переопределяя переменные окружения GoLang (не путать с переменными окружения Linux - env !), дефаултные значения которых:

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ go env GOOS
linux

Код: Выделить всё

olej@R420:~/2024/WebAssembly$ go env GOARCH
amd64

В результате чего получаем:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ ls -l main.wasm
-rwxrwxr-x 1 olej olej 2060230 фев  6 09:54 main.wasm

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ file main.wasm
main.wasm: WebAssembly (wasm) binary module version 0x1 (MVP)

[Olej]

Компиляция Go-кода в WASM байт-код

Для сравнения... точно тот же код мы можем собрать в нативное консольное (CLI) приложение, для выполнения в терминале:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ time go build -o main main.go

real	0m0,296s
user	0m0,386s
sys	0m0,209s

А это он же - для выполнения в браузерах:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ time GOOS=js GOARCH=wasm go build -o main.wasm main.go

real	0m0,214s
user	0m0,296s
sys	0m0,153s

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ ls -l main*
-rwxrwxr-x 1 olej olej 1802101 фев  6 10:04 main
-rw-rw-r-- 1 olej olej     128 фев  6 00:25 main.go
-rwxrwxr-x 1 olej olej 2060230 фев  6 10:04 main.wasm

Размер .wasm даже на 15% поболее, чем статически собранного CLI приложения.
И лишний раз убеждаемся, что это тот же CLI код:

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ ./main
Привет WASM!

[Olej]

Компиляция Go-кода в WASM байт-код

Но компиляцию того же Go-кода в WASM байт-код мы можем сделать и другим компилятором TinyGo (см. тему Go: TinyGo)

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ time tinygo build -o main.wasm -target wasm main.go

real	0m8,627s
user	0m19,794s
sys	1m25,137s

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ ls -l main.wasm
-rwxrwxr-x 1 olej olej 415522 фев  6 09:55 main.wasm

Код: Выделить всё

olej@R420:~/2024/WebAssembly/example.com/app$ file main.wasm
main.wasm: WebAssembly (wasm) binary module version 0x1 (MVP)

Что мы имеем в итоге (сравнения):
- TinyGo собирает раз в 100 дольше ...
- ... но и WASM байт-код создаёт в 5 раз короче
- "короче" вовсе не значит "лучше" ... просто он компактнее для малых аппаратных архитектур
- (что характерно и если TinyGo создавать CLI приложение для терминала, см. Go: TinyGo)