Oak - The Go WebAssembly Framework
With the advent of Go supporting WebAssembly, I thought I'd take a crack at building a really simple Go based WebAssembly framework that allows you to build simple frontend applications in Go, without having to dive too deep into the bushes.
Goals
- Easier frontend application development using Go
Tutorial
A tutorial describing Oak is avaiable here:
https://tutorialedge.net/golang/writing-frontend-web-framework-webassembly-go/
CLI
If you want to easily run the example in this project, I suggest you try out the new Oak CLI which attempts to simplify the task of writing WebAssembly applications in Go.
$ make build-cli
$ cd examples/blog
$ ./oak start
Starting Server
2019/01/06 12:00:37 listening on ":8080"...
Simple Example
Let's take a look at how this framework could be used in a very simple example. We'll be create a really simple app that features on function, mycoolfunc(). We'll kick off our Oak framework within our main() function and then we'll register our coolfunc() function.
package main
import (
"syscall/js"
"github.com/elliotforbes/oak"
)
func mycoolfunc(i []js.Value) {
println("My Awesome Function")
}
func main() {
oak.Start()
oak.RegisterFunction("coolfunc", mycoolfunc)
// keeps our app running
done := make(chan struct{}, 0)
<-done
}
We can then call our coolfunc() function from our index.html like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Go wasm</title>
<script src="./static/wasm_exec.js"></script>
<script src="./static/entrypoint.js"></script>
</head>
<body>
<h2>Super Simple Example</h2>
<button class="btn btn-primary btn-block" onClick="coolfunc();" id="subtractButton">My Cool Func</button>
</body>
</html>
Components
package components
import (
"syscall/js"
"github.com/elliotforbes/oak"
)
type AboutComponent struct{}
var About AboutComponent
func init() {
oak.RegisterFunction("coolFunc", CoolFunc)
}
func CoolFunc(i []js.Value) {
println("does stuff")
}
func (a AboutComponent) Render() string {
return `<div>
<h2>About Component Actually Works</h2>
<button onClick="coolFunc();">Cool Func</button>
</div>`
}
Routing
package main
import (
"github.com/elliotforbes/oak"
"github.com/elliotforbes/oak/router"
"github.com/elliotforbes/oak/examples/blog/components"
)
func main() {
// Starts the Oak framework
oak.Start()
// Starts our Router
router.NewRouter()
router.RegisterRoute("about", aboutComponent)
// keeps our app running
done := make(chan struct{}, 0)
<-done
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<link rel="stylesheet" href="./static/bootstrap.css">
<link rel="stylesheet" href="./static/style.css">
<script src="./static/wasm_exec.js"></script>
<script src="./static/entrypoint.js"></script>
</head>
<body>
<div class="container">
<h1>A Simple Blog</h1>
<div id="view"></div>
<button onClick="Link('home')">Home</button>
<button onClick="Link('about')">About</button>
</div>
</body>
</html>