Intro to go web assembly

David Chang
DevOps@mithril
初探 Go-WebAssembly

WebAssembly
● A new language for web
● Compiled from other
languages
● Offers maximized, reliable
performance
● Not replacing JS

A new language for web
● A low level language
● standard
● a binary instruction and a
assembly-like format
● Supported by Mozilla, Google,
Microsoft, Apple

WebAssembly Now
● Release 1.0
(Draft, last updated Dec 13,
2018)
● Experimental

Why WebAssembly
What’s wrong with JS?

Web Javascript
● Slow
● Insecure
● Dynamic type vs static type
● Avoid heavy computing in
Front-End
● Easy-writing
● Huge eco-system

Historical Javascript
● ECMAScript
-> by Brendan Eich in late 1995
● Internet Explorer 3
● NodeJS -> 2009
● npm -> 2010

JS is getting faster
● Just In Time compiler of JS
engine
● trace and re-optimize (loop)
● GC
● Built-in functions / Stadard
Library / APIs

But wasm is faster
https://hacks.mozilla.org/2017/02/w
hat-makes-webassembly-fast/
● Wasm is compiled
● No type assertion
● No need to re-optimize
● Much less GC

.go
.wasm
(IR)
Firefox x86
Assembly
spider
monkey
Chart Data Source Info
From WebAssembly to JS engine
https://mbebenita.github.io/WasmExplorer/

Some Examples
“Unleash the power of your web devices”

Wasm vs JS
github.com/shamadee/web-dsp
https://d2jta7o2zej4pf.cloudfront.net/

Epic Epic Zen Garden
Unreal Engine in WebAssembly and WebGL 2.0
https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html

Go-WebAssembly
● go 1.11 (Aug. 2018)
● Experimental feature
https://github.com/golang/go/wiki/W
ebAssembly

1.11 Release Note
Go 1.11 adds an experimental port to WebAssembly (js/wasm).
Go programs compile to one WebAssembly module
Go runtime for goroutine scheduling, garbage collection,
maps, etc.
Go programs can call into JavaScript using the new
experimental syscall/js package.
new GOOS "js" and GOARCH "wasm"

Why Go-WebAssembly
Again, why?

Go-WebAssembly
● Runs existing program / library
in Front-End
● Make golang protable
● Thread Safe
● Back-End to Full-Stack?

<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>

run-%:
GOOS=js GOARCH=wasm
go run -exec="$(shell go env
GOROOT)/misc/wasm/go_js_wasm_exec" ./src/$*
test:
GOOS=js GOARCH=wasm
go test -exec="$(shell go env GOROOT)/misc/wasm/go_js_wasm_exec" ./...
build-%:
GOOS=js GOARCH=wasm
go build -o public/lib.wasm ./src/$*
server:
go run ./src/server -listen :8080 -dir public

.go .wasm JS API
Engine
Chart Data Source Info
From Golang to Web
Compile golang functions to wasm, and runs in JS

package main
import (
"strconv"
"syscall/js"
)
func add(i []js.Value) {
doc := js.Global().Get("document")
value1 := doc.Call("getElementById", "input1").Get("value").String()
int1, _ := strconv.Atoi(value1)
doc.Call("getElementById", "sum").Set("value", int1+int2)
}

// JS
func add() {
var value1 = document.getElementById("input1").value;
vat value2 = document.getElementById("input2").value;
document.getElementById("sum").value = Number(value1) + Number(value2);
}
// Go
func add(i []js.Value) {
doc := js.Global().Get("document")
doc.Call("getElementById", "sum").Set("value", int1+int2)
}

Pacakge syscall/js
● Bumpy when manipulate DOM
● access WebAssembly host
environment using the
js/wasm architecture
● API is based on JavaScript
semantics.
● EXPERIMENTAL

func main() {
c := make(chan struct{}, 0)
println("WASM Go Initialized")
// register functions
registerCallbacks()
<-c
println("Callbacks registered.") // console.log
}
func registerCallbacks() {
js.Global().Set("add", js.NewCallback(add))
js.Global().Set("subtract", js.NewCallback(subtract))
}

Use Go as Modules
● Import Go packages
● Complie to .wasm
● Register functions as JS
callbacks
● Invoke functions in JS
● Leave the DOMs to JS

Benefits from Go-wasm
● Runs existing program / library
in Front-End
● Make golang protable
● Thread Safe
● Join .wasm from other
languages

Go-Wasm Examples
https://justinclift.github.io/wasmGraph1/

GameBoyColor-Wasm
https://github.com/djhworld/gomeboycolor-wasm

Move Back-End Front
Performance no longer a problem. What you want to run in browser?
kubernetes, kubectl, geth...

Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017
https://www.youtube.com/watch?v=HktWin_LPf4
https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/
Dan Callahan: Practical WebAssembly | JSConf Budapest 2017
https://www.youtube.com/watch?v=bac0dGQbUto
Using WebAssembly and Threads (Chrome Dev Summit 2018)
https://www.youtube.com/watch?v=zgOGZgAPUjQ
Watch Lin Clark cartoon if you only have 30 mins!

Intro to go web assembly

More Related Content

What's hot (20)

Similar to Intro to go web assembly (20)

More from Che-Chia Chang (8)

Recently uploaded (20)

Intro to go web assembly

Editor's Notes