Русский

Учебник по WebAssembly

WebAssembly - Работа с Go

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

WebAssembly - Working with Go

Что такое WebAssembly?

Прежде чем погружаться в код, давайте поймем, что такое WebAssembly. Представьте, что у вас есть超级 быстрый гоночный автомобиль (это WebAssembly), который может ездить по любому треку (веб-браузерам) с невероятной скоростью. Это способ запускать программы, написанные на языках, таких как Go, C++ или Rust, непосредственно в веб-браузерах, делая веб-приложения быстрее и мощнее.

Why Go с WebAssembly?

Go, наш выбор языка на сегодня, как швейцарский армейский нож в мире программирования. Он прост, эффективен и теперь может работать в веб-браузерах благодаря WebAssembly. Это как дать суперсилы вашим веб-приложениям!

Настройка нашей среды Go

Сначала нам нужно настроить нашу среду Go. Это как подготовка кухни перед началом приготовления вкусного блюда.

  1. Установите Go с официального сайта (https://golang.org/)
  2. Настройте GOPATH (Go будет hướngовать вас через это в процессе установки)
  3. Установите текстовый редактор (я рекомендую Visual Studio Code, но используйте тот, с которым вам��фортно)

Наш первый Go WebAssembly Программа

Давайте начнем с простой программы "Hello, WebAssembly!". Не волнуйтесь, если вы пока не понимаете все - мы разберем это шаг за шагом.

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

Давайте разберем это:

  1. package main: Это говорит Go, что это главный пакет нашей программы.
  2. import: Мы импортируем два пакета - fmt для вывода и syscall/js для взаимодействия с JavaScript.
  3. func main(): Это точка входа нашей программы.
  4. js.Global().Set("greet", js.FuncOf(greet)): Это делает нашу функцию greet доступной для JavaScript.
  5. <-make(chan bool): Это держит нашу программу работающей, ожидая вызовы JavaScript.
  6. func greet: Эта функция принимает имя и обновляет HTML элемент с приветствием.

Компиляция нашей Go программы в WebAssembly

Теперь давайте превратим наш код Go в WebAssembly. Откройте ваш терминал и выполните:

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

Эта команда говорит Go скомпилировать нашу программу для JavaScript (GOOS=js) и WebAssembly (GOARCH=wasm).

Создание HTML страницы для запуска нашего WebAssembly

Нам нужна HTML страница для загрузки и запуска нашего WebAssembly. Вот простая страница:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</body>
</html>

Эта HTML страница:

  1. Создает поле ввода для имени
  2. Имеет кнопку, которая вызывает нашу функцию greet
  3. Загружаетruntime WebAssembly (wasm_exec.js)
  4. Загружает и запускает наш файл WebAssembly (main.wasm)

Запуск нашего WebAssembly приложения

Чтобы запустить это, нам нужен веб-сервер. Вот простая команда Python для запуска:

python -m http.server

Теперь откройте ваш браузер и перейдите на http://localhost:8000. Вы должны увидеть нашу страницу!

Понимание вывода

Когда вы вводите свое имя и нажимаете "Greet", вы увидите персонализированное приветствие. Это наша функция Go, работающая в браузере, благодаря WebAssembly!

Заключение

Поздравления! Вы только что создали свое первое приложение Go WebAssembly. Мы только что поцарапали поверхность, но я надеюсь, что это разжег ваше любопытство для дальнейшего исследования.

Помните, учиться программировать - это как учиться новому языку или инструменту. Это требует практики, терпения и упорства. Но с каждым шагом вы открываете новые возможности и расширяете свой творческий потенциал.

Продолжайте программировать, продолжайте исследовать и, самое главное, получайте удовольствие!

Метод Описание
js.Global() Доступ к глобальному JavaScript объекту
js.FuncOf() Преобразует Go функцию в JavaScript функцию
js.Value Представляет JavaScript значение
Call() Вызывает JavaScript метод
Set() Устанавливает JavaScript свойство
Get() Получает JavaScript свойство
String() Преобразует JavaScript значение в Go строку

Эта таблица резюмирует ключевые методы, которые мы использовали для взаимодействия между Go и JavaScript. По мере продолжения вашего пути в WebAssembly, вы найдете эти методы невероятно полезными!

Credits: Image by storyset

Предыдущий учебник:
WebAssembly - Работа с Rust
Следующий учебник:
WebAssembly - Работа с Node.js