Go & WebAssembly

1's and 0's:
Go and WebAssembly
GoDays Berlin, 30th January ‘19
Guus van Weelden
Loodse GmbH
@guusvw91

Guus van Weelden
00. Guus van Weelden
guus := Speaker{
Name: "Guus van Weelden",
Positions: {"Developer", "Consultant"},
Employer: "Loodse GmbH",
Age: 27,
Likes: {"Go", "K8s", "American Football"},
Origin: "Hamburg, Germany",
Twitter: "@guusvw91",
}
guus.Talk(“1's and 0's: Go and WebAssembly”)
$ go run guus.go

Today’s (glorious) agenda.
WebAssembly?
Go 1.11
Go & WASM - Past, Present & Future
Demo Time
Metas
Questions?

02
Much slides,
Some live coding,
Cool Memes,
Let’s Go!

WebAssembly?
Why should I care, I’m a
damn backend/ops guy!
WebAssembly?

01
WebAssembly is a binary instruction
format for a stack-based virtual
machine. WASM is designed as a
portable target for compilation of
high-level languages like C/C++/Rust/Go,
enabling deployment on the web for
client and server applications.
WebAssembly
WebAssembly?

WebAssembly is a binary
instruction format...
WebAssembly?

{binary
instruction
format
➔ Less file size
➔ Faster
execution
WebAssembly?

… WASM is designed as a
portable target for
compilation of high-level
languages like Go ...
WebAssembly?

{portable
target
of high-level
languages
➔ Use languages
you already
know
➔ Stuff like
type-safety
WebAssembly?

… enabling deployment on
the web for client and server
applications.
WebAssembly?

{enabling
deployment
on client
and server
apps
➔ Enables for a
shared code
base, so less
deployment
WebAssembly?

WebAssembly’s Values
WebAssembly?
● Efficiency
● Standardization
● Security/Sandboxed
● More Languages

24th of August ‘18
The release of Go1.11

{Go 1.11
● Getting rid of GOPATH
● Getting Modules support
● many changes &
improvements to the
toolchain, runtime, and
libraries
● WebAssembly support
● ...
Go 1.11

We’re getting
native WASM
support! Yeah!
Go 1.11

Go 1.11
● compile to one WebAssembly module
● resulting size is at minimum around 2 MB
● Go programs can call into JavaScript
● new experimental syscall/js package
● new GOOS value "js" and GOARCH value
"wasm"

But wasn’t there
something called
GopherJS?!

Yes.
But it compiles Go
ONLY(!) to JS.

Current Limitations
● No native DOM APIs (yet - OS lib is out there)
● No multithreading (yet)
● Large binary file sizes
● Performance not yet where it should be
● Some core libraries are not supported
○ Parts of the net-package =(
○ ...

import "syscall/js"
package js
Package js gives access to the WebAssembly host
environment when using the js/wasm architecture. Its API
is based on JavaScript semantics.
This package is EXPERIMENTAL. Its current scope is only to
allow tests to run, but not yet to provide a comprehensive
API for users. It is exempt from the Go compatibility
promise.
$ godoc syscall/js | head -n 12

Its API is based on JavaScript semantics.

import "syscall/js"
js.Global(), js.Null(),
js.Undefined(),
js.ValueOf()
Values
Value.Get(), Value.Set(),
Value.Call(), Value.New()
Objects

import "syscall/js"
Value.Invoke()Functions
Value.Bool(), Value.Float(),
Value.Int(), Value.String()
Transformations from JS
Value to Go type

import "syscall/js"
TypedArray, Index(),
SetIndex()
Arrays
NewEventCallback(flags
EventCallbackFlag,
fn func(event Value)) Callback
Callbacks

import "syscall/js"
| Go | JavaScript |
| ---------------------- | ---------------------- |
| js.Value | [its value] |
| js.TypedArray | typed array |
| js.Callback | function |
| nil | null |
| bool | boolean |
| integers and floats | number |
| string | string |
| []interface{} | new array |
| map[string]interface{} | new object |
js.ValueOf()

Sample Code
import (
"log"
"syscall/js"
)
func main() {
var cb js.Callback
cb = js.NewCallback(func(args []js.Value) {
log.Println("button clicked")
})
js.Global().Get("document").Call("getElementById",
"myButton").Call("addEventListener", "click", cb)
}
$ GOARCH=wasm GOOS=js go build ./cmd/wasm

{How to start?
● Writing some Go code
● Writing some HTML code
● Copying js-glue files
● Compile to wasm
● Serve the files

Writing some Go code
package main
import "fmt"
func main() {
fmt.Println("Hello, WebAssembly!")
}

Writing some HTML code
<html>
<head>
<meta charset="utf-8">
<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>
</head>
<body></body>
</html>

$ GOOS=js GOARCH=wasm go build -o
main.wasm
$ cp "$(go env
GOROOT)/misc/wasm/wasm_exec.js" .
$ goexec
'http.ListenAndServe(":8081",
http.FileServer(http.Dir(".")))'
● Copying js-glue
files
● Compile to wasm
● Serve the files

Kelsey Hightower
Praise the demo gods!

Upcoming - Past, Present & Future
● Go WASM frameworks
● Package-level caching
● Native Browser APIs
● Threading, Garbage Collection (?)
● Continual improvements

● github.com/dave/wasmgo
○ CLI to compile Go to WASM & serve it locally or
upload it
● github.com/gopherjs/vecty
○ Vecty is a React-like library for GopherJS ->
currently working on WASM support
● Grpcweb.jbrandhorst.com
○ GopherJS gRPC-Web Client ->
currently working on WASM support

Recommendations
Metas
● Today - joining the PARTY!
● Container Days ‘19
● Support your local Go community

Thanks to...
Metas
● Matthias Loibl (@MetalMatze) - First Go & WASM
hacking
● Jason Murray (@chaosaffe) - Title of the talk
● Markus Zimmermann (@markus_zm) - stole some ideas
& slides from him
● The great team of the GoDays(@godaysio) for organizing
this event

03
Thanks for listening &
attending
enjoy the rest of the
conference.
The end

Go & WebAssembly

Recommended

More Related Content

What's hot (17)

Similar to Go & WebAssembly (20)

Recently uploaded (20)

Go & WebAssembly