Going Full-stack with GopherJS

1. Full-Stack Go with GopherJS
Poga
KKTIX

2. Let's talk about JavaScript
JavaScript is becoming a platform
X compiles to JavaScript, X = almost anything
Trend: asm.js, WebAssembly... not designed to be written by human

3. Full-Stack Go

4. Why
Learn once, Write everywhere
Better tooling compares to JavaScript: gofmt, gooracle, gorename...
Easy concurrency: channels and goroutines instead of callback.

5. GopherJS
compiles Go into JavaScript
sourcemap
compatibility is really good. support channels and goroutines
can compile itself!
GopherJS Playground(http://gopherjs.github.io/playground/)
Example: https://github.com/shurcooL/Go-Package-Store(https://github.com/shurcooL/Go-Package-Store)

6. Goroutine
JavaScript is Single-threaded
GopherJS provides a goroutine scheduler

7. Examples

8. Hello World
with stdlibs you already know
import"fmt"
funcmain(){
fmt.Println("helloworld")
}

9. Export Function
funcmain(){
js.Global.Set("pet",map[string]interface{}{
"New":New,
})
}
typePetstruct{
namestring
}
funcNew(namestring)*js.Object{
returnjs.MakeWrapper(&Pet{name})
}
func(p*Pet)Name()string{
returnp.name
}
func(p*Pet)SetName(namestring){
p.name=name
}

10. Callback
funcmain(){
js.Global.Call("requestAnimationFrame",raf)
}
funcraf(tfloat64){
js.Global.Call("requestAnimationFrame",raf)
dt:=(t-last)/1000
goanimate(dt)
last=t
}

11. Performance
DEMO

12. Bindings
DOM: honnef.co/go/js/dom(honnef.co/go/js/dom)
jQuery: github.com/gopherjs/jquery(github.com/gopherjs/jquery)
JS console: honnef.co/go/js/console(honnef.co/go/js/console)
WebGL: github.com/gopherjs/webgl(github.com/gopherjs/webgl)
WebSocket: github.com/gopherjs/websocket(github.com/gopherjs/websocket)
XHR: honnef.co/go/js/xhr(honnef.co/go/js/xhr)

13. Gotcha

14. Import Carefully
No dead code elimiation yet
hello world with fmt
//753kb
import"fmt"
funcmain(){
fmt.Println("helloworld")
}
hello world with JS API
//64kb
import"github.com/gopherjs/gopherjs/js"
funcmain(){
js.Global.Get("console").Call("log","helloworld")
}

15. Blocking
Callbacks should never be blocking
//thiswillproduceanerror
js.Global.Get("myButton").Call("addEventListener","click",func(){
someBlockingFunction()
})
Wrap it into a goroutine to fix it
//thisworks!
js.Global.Get("myButton").Call("addEventListener","click",func(){
gofunc(){
someBlockingFunction()
}()
})

16. Bad Architecture

17. Good Architecture
OP = Custom Byte Code
Design as whatever you like
{"op":"move","target":"player","params":{"x":100,"y":100}}
<xml><enterprise><op>move</op><target>player</target></enterprise></xml>
Text-based protocol: Cross-platform, Easy to debug, Easy to parse

18. Different Render Target
Same OP, VM translate it into different API

19. Different Platform
Same OP, VM implemented in different language
The Go part never changes

20. Recap

21. Recap
Write your core logic in Go: Cross-platform, even in browser
Provide text-based protocol for "Write once, run anywhere"

22. Thank you
Poga
KKTIX
@devpoga(http://twitter.com/devpoga)