Библиотека GopherJS в Golang

Привет, Хабр!

GopherJS позволяет переводить Go-код в JavaScript — он предоставляет полноценную совместимость с большинством пакетов стандартной библиотеки Go. Также Gopher поддерживает горутины и каналы!

В статье в общих деталях рассмотрим эту замечательную библиотеку.

Установим:

go get -u github.com/gopherjs/gopherjs

Основы работы

gopherjs build — с этой командой можно компилировать Go-код в JavaScript. Она аналогична команде go build, но вместо создания исполняемого файла Go она генерирует файл .js. Например:

package main  import "github.com/gopherjs/gopherjs/js"  func main() {     js.Global.Get("document").Call("write", "Привет, Хабр!") }

Для компиляции этого файла в JavaScript:

gopherjs build main.go

Это создаст файл main.js, который можно подключить к HTML-странице.

gopherjs install аналогична gopherjs build, но вместо сохранения файла JavaScript в текущем каталоге, она устанавливает его в $GOPATH/bin или $GOBIN.

syscall/js позволяет Go-коду взаимодействовать с JavaScript объектами и функциями в браузере.

Допустим, хочется изменить содержимое элемента на веб-странице. Сначала нужно получить доступ к этому элементу:

package main  import (     "syscall/js" )  func main() {     // получение доступа к элементу DOM     document := js.Global().Get("document")     header := document.Call("getElementById", "header")      // изменение текста элемента     header.Set("innerHTML", "Новый заголовок") }

Код на Go скомпилируется с GopherJS и изменит содержимое элемента с идентификатором header на «Новый заголовок»:

Можно обрабатывать события DOM, используя функции обратного вызова:

package main  import (     "syscall/js" )  func main() {     document := js.Global().Get("document")     button := document.Call("getElementById", "myButton")          clickFunc := js.FuncOf(func(this js.Value, args []js.Value) interface{} {         js.Global().Get("console").Call("log", "Кнопка нажата!")         return nil     })          button.Call("addEventListener", "click", clickFunc)     defer clickFunc.Release() // очистка памяти }

В примере обработчик события добавляется к кнопке, и при каждом нажатии кнопки в консоль будет выводиться сообщение «Кнопка нажата!».

Можно создать простую анимацию с помощью GopherJS, где к примеру, элемент будет двигаться по горизонтали вправо и влево на страничке:

package main  import (     "syscall/js"     "math"     "time" )  func main() {     window := js.Global()     document := window.Get("document")     body := document.Get("body")      // создаем элемент div и добавляем его в тело документа     div := document.Call("createElement", "div")     div.Set("innerHTML", "Анимированный блок")     div.Get("style").Set("position", "absolute")     div.Get("style").Set("top", "40px")     div.Get("style").Set("width", "100px")     div.Get("style").Set("height", "100px")     div.Get("style").Set("backgroundColor", "red")     body.Call("appendChild", div)      startTime := time.Now()      // функция для обновления позиции элемента     var updatePosition js.Func     updatePosition = js.FuncOf(func(this js.Value, args []js.Value) interface{} {         // вычисляем прошедшее время         elapsed := time.Since(startTime).Seconds()          // вычисляем новую позицию, используя функцию синуса для создания движения влево и вправо         left := 150 + 100*math.Sin(elapsed)          // обновляем позицию элемента         div.Get("style").Set("left", js.ValueOf(left).String()+"px")          // запрашиваем следующий кадр анимации         window.Call("requestAnimationFrame", updatePosition)         return nil     })      // запускаем анимацию     window.Call("requestAnimationFrame", updatePosition)     defer updatePosition.Release() // Освобождаем ресурсы }

Интеграция с React или Angular

Основная идея в такой интеграции будет состоять в том, чтобы написать код на Go, который GopherJS скомпилирует в JS, способный взаимодействовать с React или Angular. Рассмотрим, как это можно сделать на примере React.

Для этого будем юзать пакетmyitcv.io/react:

package main  import (     "github.com/gopherjs/gopherjs/js"     "myitcv.io/react" )  type HelloMessage struct {     react.ComponentDef }  func (h *HelloMessage) Render() *js.Object {     return react.JSX("div", nil, "Hello ", h.Props().Get("name")) }  func main() {     js.Global.Set("HelloMessage", react.CreateFactory(new(HelloMessage))) }

В HTML файле можно использовать этот компонент, как обычный React-компонент после того, как код скомпилирован GopherJS:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>React with GopherJS</title> </head> <body>     <div id="app"></div>     <script src="your_compiled_gopherjs_script.js"></script>     <script>         ReactDOM.render(             React.createElement(HelloMessage, {name: "World"}),             document.getElementById('app')         );     </script> </body> </html>

Далее компилируем код с помощью GopherJS видим результат.

Насчет горутин и каналов

Горутины в GopherJS работают аналогично их работе в Go, с ними можно выполнять функции асинхронно:

package main  import ( "github.com/gopherjs/gopherjs/js" "time" )  func printNumbers() { for i := 1; i <= 5; i++ { js.Global.Get("console").Call("log", i) time.Sleep(time.Millisecond * 300) } }  func main() { go printNumbers()  for i := 6; i <= 10; i++ { js.Global.Get("console").Call("log", i) time.Sleep(time.Millisecond * 300) } }

Функция printNumbers запустится как горутина.

Каналы в GopherJS используются для синхронизации и обмена данными между горутинами:

package main  import ( "github.com/gopherjs/gopherjs/js" )  func sendToChannel(ch chan int) { for i := 1; i <= 5; i++ { ch <- i js.Global.Call("setTimeout", js.MakeFunc(func(this js.Value, args []js.Value) interface{} { return nil }), 300) } close(ch) }  func main() { ch := make(chan int)  go sendToChannel(ch)  for value := range ch { js.Global.Get("console").Call("log", value) } }

Функция sendToChannel отправляет числа от 1 до 5 в канал, а основная функция main читает эти значения. Закрытие канала после отправки всех значений гарантирует, что цикл в main завершится после получения всех данных.

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

package main  import ( "github.com/gopherjs/gopherjs/js" "sync" )  func performTask(id int, wg *sync.WaitGroup) { defer wg.Done() js.Global.Get("console").Call("log", "Task", id, "started") js.Global.Call("setTimeout", js.MakeFunc(func(this js.Value, args []js.Value) interface{} { js.Global.Get("console").Call("log", "Task", id, "completed") return nil }), 1000*id) }  func main() { var wg sync.WaitGroup wg.Add(3) for i := 1; i <= 3; i++ { go performTask(i, &wg) } wg.Wait() js.Global.Get("console").Call("log", "All tasks completed") }

Тесты

Можно использовать QUnit вместе с GopherJS QUnit bindings. После написания тестов можно автоматизировать их выполнение с помощью Agouti, она позволяет автоматом открывать браузер, переходить на нужную страницу с тестами и анализировать результаты.

Пример:

package main  import ( "github.com/sclevine/agouti" "log" )  func main() { driver := agouti.ChromeDriver() if err := driver.Start(); err != nil { log.Fatalf("Failed to start driver: %v", err) } page, err := driver.NewPage() if err != nil { log.Fatalf("Failed to open page: %v", err) }  if err := page.Navigate("http://localhost:10000"); err != nil { log.Fatalf("Failed to navigate: %v", err) }  // проверяем элементы на странице, используя Agouti методы passed, err := page.Find("#test-result").Text() if err != nil { log.Fatalf("Failed to find test results: %v", err) }  log.Println("Test passed:", passed) }

Для модульного тестирования GopherJS кода, можно юзать дефолтный пакет testing в Go. Пишем тесты так же, как и для обычных Go приложений, но запускаем их через GopherJS:

package main  import "testing"  func TestExample(t *testing.T) { expected := "Hello, GopherJS" result := MyFunction() if result != expected { t.Errorf("Test failed, expected '%s', got '%s'", expected, result) } }

Затем этот тест можно запустить с помощью команды gopherjs test.

Подробней с библиотекой можно ознакомиться здесь.

---

В рамках курса OTUS «Golang Developer. Professional» пройдут открытые уроки, присоединяйтесь:

• 16 мая: Классические ошибки при собеседовании на позицию middle+ Go-разработчика. Записаться

• 23 мая: Изучаем методы трассировки программ: метрики. Записаться