Go In Your Browser

30 November 2017

Alexander Döring

Smallpdf.com

Outline

GopherJS

How?

gopherjs serve
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?

Frameworks

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),
    )
}

Example 3

iframe:

Size Matters

gopherjs build -m

Example 4

WebAssembly (wasm)

Go Issue #18892

Go Issue #18892

wasm wip

working

wasm wip

to-do

Recap

Smallpdf Is Hiring

Thank you

Alexander Döring

Smallpdf.com