WebAssembly с Go: вывод веб-приложений на новый уровень

Книга WebAssembly с Go: вывод веб-приложений на новый уровень

В сообществе разработчиков участились обсуждения WebAssembly, или WASM. Потенциал этой технологии огромен, для нашего Open Source проекта  —  инфраструктуры Permify, с помощью которой разработчики создают и управляют детализированными разрешениями приложений,  —  она просто бесценна.


Расскажем, почему и как мы интегрировали WASM в нашу интерактивную среду и получили преимущества от использования Golang.


Каков функционал этой среды? Если вкратце, это интерактивный модуль Permify, которым создаются и тестируются модели авторизации.


Содержание статьи:



  1. Краткое описание WASM и преимуществ его применения с Go.

  2. Что способствовало нашему решению интегрировать WASM в Permify?

  3. Реализация WASM, в том числе:



  • быстрая подготовка, реализация WASM с Go;

  • подробная разбивка кода WASM в Permify;

  • фронтенд, этапы внедрения Go WASM в приложение на React.


К концу у вас должно сложиться четкое представление о том, почему и как мы использовали возможности WASM для проекта Permify.


Понятие о WebAssembly


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


1. Возможности WebAssembly


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


Основные преимущества:



  • Благодаря поддержке основных браузеров, Wasm обеспечивается стабильная производительность на различных платформах.

  • Значительно повышается реактивность веб-приложений, так как в Wasm двоичный код выполняется со скоростью нативных.


Мы приняли стратегическое решение включить Golang в фундаментальную основу Open Source проекта Permify, выбор этот обусловлен широким признанием статической типизации, конкурентного выполнения и оптимизации производительности Golang. А когда мы создали интерактивную среду Permify, обратили внимание на WebAssembly как важнейший элемент.


2. Сочетание Go и WebAssembly



  • Характеристики Go: благодаря оптимальной производительности и возможностям конкурентного выполнения Go обзавелся солидной репутацией в сообществе разработчиков.

  • Синергия с WebAssembly: код Go преобразуется в WebAssembly, и разработчики эффективно используют надежную производительность и управление параллелизмом Go прямо в браузере, создавая мощные, эффективные, масштабируемые веб-приложения.


Но объединением Go и WebAssembly мы не ограничимся: определим причины выбора Wasm технологией разработки интерактивной среды Permify и выгоды этого решения.


Почему WebAssembly?


Создав интерактивную среду Permify, мы задались вопросом: «Как продемонстрировать наши возможности, не опутываясь трудностями и проблемами сопровождения традиционных серверных архитектур?» Блестящим ответом стал WebAssembly.


Перейдя на этот двоичный формат инструкций, мы:



  • Работаем с интерактивной средой Permify прямо в браузере, избегая накладных расходов на сопровождение сервера и повторных API-вызовов, упрощая при этом текущее сопровождение по сравнению со старыми, серверными подходами.

  • Достигаем максимальной производительности, по которой приложения Go благодаря WebAssembly сопоставимы с нативными, совершенствуя пользовательское взаимодействие время отклика.


Технические преимущества и обратная связь


Применяя WebAssembly в интерактивной среде Permify, мы получили ощутимые технические преимущества и поддержку сообщества.



  • Быстрое выполнение: избегая взаимодействий с сервером и развертывая WebAssembly в браузере, мы обеспечили ультрамалое время отклика.

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

  • Подтверждение сообщества: позитивная обратная связь и принятие сообществом разработчиков  —  это признание наших технологических решений и реализаций.


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


Реализация WASM с Go


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


1. Преобразование Go в WebAssembly



  • Этапы:



  1. Сначала задаем целевую платформу компиляции WebAssembly в Go:


GOOS=js GOARCH=wasm go build -o main.wasm main.go

2. Затем применяем оптимизации, уменьшая размер файла и повышая производительность:


wasm-opt main.wasm --enable-bulk-memory -Oz -o play.wasm


  • Обработка событий:


Реакция функции Go на нажатие кнопки на веб-странице:


package main



import "syscall/js"



func registerCallbacks() {

js.Global().Set("handleClick", js.FuncOf(handleClick))

}



func handleClick(this js.Value, inputs []js.Value) interface{} {

println("Button clicked!")

return nil

}

И в HTML после загрузки модуля WebAssembly:


<button onclick="window.handleClick()">Click me</button>

2. Интеграция с веб-страницами



  • Инициализация Wasm:


Привязываем скрипт wasm_exec.js, затем инстанцируем модуль Wasm:


<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("play.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>


  • Взаимодействие с DOM:


Доступ к веб-элементам и их изменение принципиально важны. Вот, например, изменение содержимого элемента абзаца из Go:


func updateDOMContent() {
document := js.Global().Get("document")
element := document.Call("getElementById", "myParagraph")
element.Set("innerText", "Updated content from Go!")
}

3. Увеличение эффективности и скорости



  • Горутины Go в браузере:


Вот пример операций выборки данных, выполняемых одновременно без блокировки основного потока:


func fetchData(url string, ch chan string) {

// Имитируем выборку данных.

ch <- "Data from " + url

}



func main() {

ch := make(chan string)

go fetchData("<https://api.example1.com>", ch)

go fetchData("<https://api.example2.com>", ch)



data1 := <-ch

data2 := <-ch

println(data1, data2)

}

Перемещением по Go и WebAssembly демонстрируется мощное объединение параллельной обработки Go с быстрым выполнением WASM на стороне клиента.


Теперь рассмотрим применение этих технологических преимуществ в реальной масштабируемой системе авторизации Permify.


Подробный разбор кода WASM в Permify


Переходим к самой интеграции WebAssembly, изучим ключевые сегменты WASM-кода на Go.


1. Настройка среды Go-WASM


Готовим и указываем код на Go, компилируемый для среды выполнения WebAssembly:


// go:build wasm
// +build wasm

Эти строки  —  указания компилятору Go на то, что следующий код предназначен для среды выполнения WebAssembly, а именно:



  • //go:build wasm  —  ограничение сборки, которым обеспечивается компиляция кода только в цели WASM и согласно современному синтаксису.

  • // +build wasm  —  аналогичное ограничение со старым синтаксисом для совместимости с прошлыми версиями Go.


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


2. Объединение JavaScript и Go с помощью функции «run»


package main



import (

"context"

"encoding/json"

"syscall/js"



"google.golang.org/protobuf/encoding/protojson"



"github.com/Permify/permify/pkg/development"

)



var dev *development.Development



func run() js.Func {

// Функцией «run» возвращается новая функция JavaScript,

// в которую оборачивается функция Go.

return js.FuncOf(func(this js.Value, args []js.Value) interface{} {



// «t» понадобится для хранения демаршалированных данных JSON.

// Тип «interface{}» пустой, значит, может содержать значение любого типа.

var t interface{}



// Демаршалируем JSON из аргумента функции JavaScript «args[0]» в структуру данных Go «map».

// В «args[0].String()» от аргумента JavaScript получается строка JSON,

// преобразуемая затем в байты и демаршалируемая — с выполнением парсинга — в карту «t».

err := json.Unmarshal([]byte(args[0].String()), &t)



// Если при демаршалировании — парсинге — JSON возникает ошибка,

// возвращается массив с сообщением об ошибке «invalid JSON» в JavaScript.

if err != nil {

return js.ValueOf([]interface{}{"invalid JSON"})

}



// Попытка подтвердить, что JSON с выполненным парсингом, то есть «t», — это карта со строковыми ключами.

// На этом этапе демаршалированному JSON обеспечивается ожидаемый тип «map», то есть карта.

input, ok := t.(map[string]interface{})



// Если утверждение ложно — это и означает «ok», —

// возвращается массив с сообщением об ошибке «invalid JSON» в JavaScript.

if !ok {

return js.ValueOf([]interface{}{"invalid JSON"})

}



// Запускаем основную логику приложения с входными данными, над которыми выполнен парсинг.

// Предполагается, что «input» каким-то образом обрабатывается этим «dev.Run» и возвращаются любые ошибки, обнаруженные во время этого процесса.

errors := dev.Run(context.Background(), input)



// Если ошибок нет и длина среза «errors» равна 0,

// в JavaScript возвращается пустой массив. Это означает, что запуск прошел успешно, без ошибок.

if len(errors) == 0 {

return js.ValueOf([]interface{}{})

}



// Если имеются ошибки, каждая ошибка в срезе «errors» маршалируется, преобразуется в строку JSON.

// «vs» — это срез, в котором сохранится каждая из этих ошибок — строк JSON.

vs := make([]interface{}, 0, len(errors))



// Перебираем каждую ошибку в срезе «errors».

for _, r := range errors {

// Преобразуем ошибку «r» в строку JSON и сохраняем ее в «result».

// Если во время этого маршалирования возникает ошибка, в JavaScript возвращается массив с тем сообщением об ошибке.

result, err := json.Marshal(r)

if err != nil {

return js.ValueOf([]interface{}{err.Error()})

}

// Добавляем ошибку — строку JSON в срез «vs».

vs = append(vs, string(result))

}



// Возвращаем в JavaScript срез «vs» со всеми ошибками — строками JSON.

return js.ValueOf(vs)

})

}

В Permify функция run  —  краеугольный камень, ею выполняется важнейшая операция объединения входных данных JavaScript и возможностей обработки на Go, организуется обмен данными в реальном времени в формате JSON, чем обеспечивается плавный и мгновенный доступ к основному функционалу Permify через интерфейс браузера.


Подробнее о run:



  • Обмен данными JSON: преобразованием входных данных JavaScript в используемый на Go формат этой функцией демаршалируется JSON  —  с передачей данных между JS и Go  —  и благодаря надежным возможностям обработки Go обеспечивается беспроблемное манипулирование входными данными браузера.

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

  • Контекстная обработка: с помощью dev.Run функцией в определенном контексте обрабатываются входные данные, над которыми выполнен парсинг. Чтобы обеспечить стабильный контроль данных и обратную связь с пользователем, при обработке потенциальных ошибок осуществляется управление логикой приложения.

  • Двунаправленный обмен данными: поскольку ошибки маршалируются обратно в формат JSON и возвращаются в JavaScript, функцией обеспечивается двунаправленный поток данных с сохранением обеих сред в синхронизированной гармонии.


Таким образом, благодаря четкому управлению данными, обработке ошибок и гибкому двунаправленному каналу обмена данных, run является важным мостом, связывающим JavaScript и Go для бесперебойного функционирования Permify в реальном времени через интерфейс браузера.


Такое упрощение взаимодействия позволяет не только повысить удовлетворенность пользователей, но и применить в среде Permify соответствующие сильные стороны JavaScript и Go.


3. Выполнение и инициализация «main»


// Продолжаем рассмотренный выше код...



func main() {

// Инстанцируем канал «ch» без буфера, это точка синхронизации для горутины.

ch := make(chan struct{}, 0)



// Создаем новый экземпляр «Container» из пакета «development» и присваиваем его глобальной переменной «dev».

dev = development.NewContainer()



// Присоединяем определенную ранее функцию «run» к глобальному объекту JavaScript,

// делая ее вызываемой из среды JavaScript.

js.Global().Set("run", run())



// Чтобы остановить горутину «main» и предотвратить завершение программы, используем выражение приема канала.

<-ch

}


  1. ch := make(chan struct{}, 0): для координации активности горутин  —  параллельных потоков на Go  —  создается канал синхронизации.

  2. dev = development.NewContainer(): из пакета разработки инициализируется новый экземпляр контейнера и присваивается переменной dev.

  3. js.Global().Set("run", run()): функция run предоставляется глобальному контексту JavaScript для вызова функций Go.

  4. <-ch: горутина main на неопределенное время останавливается, обеспечивая, что модуль Go WebAssembly остается активным в среде JavaScript.


В итоге кодом устанавливается среда Go, запускаемая в WebAssembly с конкретной функциональностью, то есть функцией run, на стороне JavaScript, и сохраняется активной и доступной для вызовов функций из JavaScript.


Встраивание кода Go в модуль WASM


Прежде чем переходить к функционалу Permify, важно разобрать этапы преобразования кода Go в модуль WASM, подготовив его для выполнения в браузере.


Полная кодовая база Go доступна в репозитории GitHub.


1. Компиляция в WASM


Запускаем преобразование приложения Go в бинарный код WASM:


GOOS=js GOARCH=wasm go build -o permify.wasm main.go

Этой командой компилятором Go создается двоичный файл .wasm для сред JavaScript, с источником main.go.


permify.wasm  —  это результат, краткое описание возможностей Go, подготовленное для веб-развертывания.


2. WASM Exec JS


Наряду с бинарным кодом WASM в экосистеме Go имеется незаменимая часть wasm_exec.js. Она важна для инициализации и упрощения модуля WASM в настройке браузера. Этот необходимый скрипт обычно находится внутри установки Go в misc/wasm.


Чтобы долго не искать, мы разместили wasm_exec.js прямо здесь:cp «$(go env GOROOT)/misc/wasm/wasm_exec.js» .


С этими файлами  —  двоичным WASM и JavaScript  —  мы готовы к объединению с фронтендом.


Этапы внедрения Go WASM в приложение React


1. Настройка структуры приложения React


Сначала разберемся со структурой каталогов. В ней код, связанный с WebAssembly, четко отделен от остального приложения, а самое главное происходит в папке loadWasm:


loadWasm/
│
├── index.tsx // Основной компонент React для интегрирования WASM.
├── wasm_exec.js // Этим скриптом Go объединяются WASM и JS.
└── wasmTypes.d.ts // Объявления типов TypeScript для WebAssembly.

Полная структура и специфика каждого файла доступны здесь.


2. Установка объявлений типов


Внутри wasmTypes.d.ts создаются глобальные объявления типов, которые распространяются на интерфейс Window для признания новых методов из WebAssembly:


declare global {
export interface Window {
Go: any;
run: (shape: string) => any[];
}
}
export {};

Так обеспечивается распознавание в TypeScript конструктора Go и метода run при вызове в глобальном объекте window.


3. Подготовка загрузчика WebAssembly


В index.tsx выполняются важные задачи:



  • Импорт зависимостей: сначала импортируются необходимые объявления JS и TypeScript:


import "./wasm_exec.js";
import "./wasmTypes.d.ts";


  • Инициализация WebAssembly: весь процесс осуществляется асинхронной функцией loadWasm:


async function loadWasm(): Promise<void> {
const goWasm = new window.Go();
const result = await WebAssembly.instantiateStreaming(
fetch("play.wasm"),
goWasm.importObject
);
goWasm.run(result.instance);
}

Здесь среда Go WASM инициализируется с помощью new window.Go(). В WebAssembly.instantiateStreaming модуль WASM извлекается, компилируется, и создается экземпляр. А активируется модуль WASM в goWasm.run.



  • Компонент React с пользовательским интерфейсом загрузчика: компонентом LoadWasm применяется хук useEffect для асинхронной загрузки WebAssembly при монтировании компонента:


export const LoadWasm: React.FC<React.PropsWithChildren<{}>> = (props) => {

const [isLoading, setIsLoading] = React.useState(true);



useEffect(() => {

loadWasm().then(() => {

setIsLoading(false);

});

}, []);



if (isLoading) {

return (

<div className="wasm-loader-background h-screen">

<div className="center-of-screen">

<SVG src={toAbsoluteUrl("/media/svg/rocket.svg")} />

</div>

</div>

);

} else {

return <React.Fragment>{props.children}</React.Fragment>;

}

};

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


4. Вызов функций WebAssembly


Метод Go WASM run вызывается так:


function Run(shape) {
return new Promise((resolve) => {
let res = window.run(shape);
resolve(res);
});
}

По сути, эта функция  —  мост, по которому фронтенд React взаимодействует с логикой бэкенда Go, инкапсулированной в WASM.


5. Реализация кнопки запуска в React


Кнопка, при нажатии которой запускается функция WebAssembly, интегрируется так:


1. Создание компонента кнопки


Сначала создаем простой компонент React с кнопкой:


import React from "react";



type RunButtonProps = {

shape: string;

onResult: (result: any[]) => void;

};



function RunButton({ shape, onResult }: RunButtonProps) {

const handleClick = async () => {

let result = await Run(shape);

onResult(result);

};



return <button onClick={handleClick}>Run WebAssembly</button>;

}

В этом коде компонентом RunButton принимается два свойства:



  • shape: аргумент формы для передачи в функцию WebAssembly run.

  • onResult: функция обратного вызова, получающая результат функции WebAssembly и обновляющая состояние или отображающая результат в пользовательском интерфейсе.


2. Интеграция кнопки в основной компонент


Теперь интегрируем RunButton:


import React, { useState } from "react";

import RunButton from "./path_to_RunButton_component"; // Заменяем на фактический путь



function App() {

const [result, setResult] = useState<any[]>([]);



// Определяем содержимое «shape»

const shapeContent = {

schema: `|-

entity user {}



entity account {

relation owner @user

relation following @user

relation follower @user



attribute public boolean

action view = (owner or follower) or public

}



entity post {

relation account @account



attribute restricted boolean



action view = account.view



action comment = account.following not restricted

action like = account.following not restricted

}`,

relationships: [

"account:1#owner@user:kevin",

"account:2#owner@user:george",

"account:1#following@user:george",

"account:2#follower@user:kevin",

"post:1#account@account:1",

"post:2#account@account:2",

],

attributes: [

"account:1$public|boolean:true",

"account:2$public|boolean:false",

"post:1$restricted|boolean:false",

"post:2$restricted|boolean:true",

],

scenarios: [

{

name: "Account Viewing Permissions",

description:

"Evaluate account viewing permissions for 'kevin' and 'george'.",

checks: [

{

entity: "account:1",

subject: "user:kevin",

assertions: {

view: true,

},

},

],

},

],

};



return (

<div>

<RunButton shape={JSON.stringify(shapeContent)} onResult={setResult} />

<div>

Results:

<ul>

{result.map((item, index) => (

<li key={index}>{item}</li>

))}

</ul>

</div>

</div>

);

}

В этом примере App  —  это компонент с кнопкой RunButton. Когда кнопка нажимается, результат функции WebAssembly отображается в списке под кнопкой.


Заключение


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


В итоге получили интерактивную платформу play.permify.co  —  не только пример, но и маяк, высвечивающий конкретные, мощные возможности, достигаемые сочетанием этих технологических областей.



256   0  
полезное

Comments

    Ничего не найдено.
Click here to cancel reply.