Go In Your Browser

30 November 2017

Alexander Döring

Smallpdf.com

Outline

GopherJS
WebAssembly

GopherJS

Transpiles Go code to Javascript
Go standard library support is almost 100%
Go can interact with the DOM
Javascript can call Go
Go can call Javascript
Started by Richard Musiol (@neelance)

How?

serve locally with hot reloading:

gopherjs serve

build:

gopherjs build

Example 1

example1.html:

<html>
    <body>
        <button id="clickme" style="font-size:20pt">Click Me</button>
        <div id="display" style="font-size:20pt"></div>
        <script src="example1.js"></script>
    </body>
</html>

Example 1

example1.go:

package main

import "honnef.co/go/js/dom"

func main() {
    d := dom.GetWindow().Document()

    clickme := d.GetElementByID("clickme").(*dom.HTMLButtonElement)
    display := d.GetElementByID("display").(*dom.HTMLDivElement)

    clickme.AddEventListener("click", false, func(event dom.Event) {
        display.SetInnerHTML("Hello World")
    })
}

Example 1

iframe:

Example 2

Almost the same as example 1.
Only change:

clickme.AddEventListener("click", false, func(event dom.Event) {
    for n := 0; n < 5; n++ {
        go func() {
            n := n
            time.Sleep(time.Duration(rand.Intn(5000)) * time.Millisecond)
            text := display.InnerHTML()
            text += fmt.Sprintf("%d<br>", n)
            display.SetInnerHTML(text)
        }()
    }
})

Example 2

iframe:

Why?

Frontend in Go
Replace processing in the Cloud with processing in the browser
Use almost all Go libraries

Frameworks

Bindings for Angular
Multiple bindings for React
...
GopherJS/Vecty

Example 3

example3.html:

<html>
    <body>
        <script src="example3.js"></script>
    </body>
</html>

Example 3

example3.go:

package main

import (
    "github.com/gopherjs/vecty"
    "github.com/gopherjs/vecty/elem"
    "github.com/gopherjs/vecty/event"
)

func main() {
    vecty.RenderBody(&Page{})
}

type Page struct {
    vecty.Core

    text string
}

...

Example 3

...

func (p *Page) Render() *vecty.HTML {
    return elem.Body(
        vecty.Markup(vecty.Style("font-size", "20pt")),
        elem.Input(
            vecty.Markup(
                event.Input(func(e *vecty.Event) {
                    p.text = e.Target.Get("value").String()
                    p.text += " " + p.text
                    vecty.Rerender(p)
                }),
            ),
        ),
        elem.Break(),
        vecty.Text(p.text),
    )
}