Add vugu example

Makefile

@@ -60,6 +60,14 @@ ebiten: clean
 	cp ./ebiten/index.html ./html/index.html
 	cp $$(go env GOROOT)/misc/wasm/wasm_exec.js ./html/wasm_exec.js
 
+.PHONY: vugu
+vugu: clean
+	GO111MODULE=on go get github.com/vugu/vugu/cmd/vugugen
+	vugugen --skip-go-mod --skip-main ./vugu/
+	GOOS=js GOARCH=wasm go build -o ./html/main.wasm ./vugu/
+	cp ./vugu/index.html ./html/
+	cp $$(go env GOROOT)/misc/wasm/wasm_exec.js ./html/wasm_exec.js
+
 test: clean
 	GOOS=js GOARCH=wasm go test -c -o ./html/test.wasm ./test/
 

README.md

@@ -92,3 +92,8 @@ by [Justin Clift](https://github.com/justinclift).
 
 A short demo of using the [Ebiten game engine](https://github.com/hajimehoshi/ebiten)
 to create a WebGL based flappy bird clone. Copied from the Ebiten examples.
+
+### Vugu
+
+An example of a [Vugu](https://www.vugu.org/) application reading the latest
+bitcoin price.

go.mod

@@ -3,6 +3,8 @@ module github.com/johanbrandhorst/wasm-experiments
 go 1.12
 
 require (
-	github.com/hajimehoshi/ebiten v1.9.3 // indirect
+	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0
-	golang.org/x/image v0.0.0-20190618124811-92942e4437e2 // indirect
+	github.com/hajimehoshi/ebiten v1.9.3
+	github.com/vugu/vugu v0.0.0-20190518235128-5a84f26390d1 // indirect
+	golang.org/x/image v0.0.0-20190618124811-92942e4437e2
 )

go.sum

@@ -1,13 +1,21 @@
+github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
+github.com/cespare/xxhash v1.1.0 h1:a6HrQnmkObjyL+Gs60czilIUGqrzKutQD6XZog3p+ko=
+github.com/cespare/xxhash v1.1.0/go.mod h1:XrSqR1VqqWfGrhpAt58auRo0WTKS1nRRg3ghfAqPWnc=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/go-gl/glfw v0.0.0-20181213070059-819e8ce5125f h1:7MsFMbSn8Lcw0blK4+NEOf8DuHoOBDhJsHz04yh13pM=
 github.com/go-gl/glfw v0.0.0-20181213070059-819e8ce5125f/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
+github.com/gofrs/flock v0.7.0 h1:pGFUjl501gafK9HBt1VGL1KCOd/YhIooID+xgyJCf3g=
 github.com/gofrs/flock v0.7.0/go.mod h1:F1TvTiK9OcQqauNUHlbJvyl9Qa1QvF/gOUDKA14jxHU=
 github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g=
 github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0/go.mod h1:E/TSTwGwJL78qG/PmXZO1EjYhfJinVAhrmmHX6Z8B9k=
 github.com/gopherjs/gopherjs v0.0.0-20180628210949-0892b62f0d9f/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gopherjs/gopherjs v0.0.0-20180825215210-0210a2f0f73c h1:16eHWuMGvCjSfgRJKqIzapE78onvvTbdi1rMkU00lZw=
 github.com/gopherjs/gopherjs v0.0.0-20180825215210-0210a2f0f73c/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
 github.com/gopherjs/gopherwasm v0.1.1/go.mod h1:kx4n9a+MzHH0BJJhvlsQ65hqLFXDO/m256AsaDPQ+/4=
 github.com/gopherjs/gopherwasm v1.0.0/go.mod h1:SkZ8z7CWBz5VXbhJel8TxCmAcsQqzgWGR/8nMhyhZSI=
 github.com/gopherjs/gopherwasm v1.1.0 h1:fA2uLoctU5+T3OhOn2vYP0DVT6pxc7xhTlBB1paATqQ=
 github.com/gopherjs/gopherwasm v1.1.0/go.mod h1:SkZ8z7CWBz5VXbhJel8TxCmAcsQqzgWGR/8nMhyhZSI=
+github.com/hajimehoshi/bitmapfont v1.1.1 h1:H1wQ6QXA8kSp+plARsIMCTVb5iOZHq/OP3uyL5NzLuU=
 github.com/hajimehoshi/bitmapfont v1.1.1/go.mod h1:Hamfxgney7tDSmVOSDh2AWzoDH70OaC+P24zc02Gum4=
 github.com/hajimehoshi/ebiten v1.9.3 h1:YijWGMBwH2XA1ZytUQFy33UDHeCSS6d4JZKH1wq38O0=
 github.com/hajimehoshi/ebiten v1.9.3/go.mod h1:XxiJ4Eltvb1KmcD0i6F81eIB1asJhK47y5DC+FPkyso=
@@ -20,9 +28,19 @@ github.com/jfreymuth/oggvorbis v1.0.0 h1:aOpiihGrFLXpsh2osOlEvTcg5/aluzGQeC7m3uY
 github.com/jfreymuth/oggvorbis v1.0.0/go.mod h1:abe6F9QRjuU9l+2jek3gj46lu40N4qlYxh2grqkLEDM=
 github.com/jfreymuth/vorbis v1.0.0 h1:SmDf783s82lIjGZi8EGUUaS7YxPHgRj4ZXW/h7rUi7U=
 github.com/jfreymuth/vorbis v1.0.0/go.mod h1:8zy3lUAm9K/rJJk223RKy6vjCZTWC61NA2QD06bfOE0=
+github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/vugu/vugu v0.0.0-20190518235128-5a84f26390d1 h1:Iowi+7qqrJr/6RmZFIM8g6n6e8TENUNiOxex1xG/NHA=
+github.com/vugu/vugu v0.0.0-20190518235128-5a84f26390d1/go.mod h1:JXaMmpEMpofCzJj8TmSWeLDxAajs4a4wrac5VYwj4A8=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/exp v0.0.0-20180710024300-14dda7b62fcd h1:nLIcFw7GiqKXUS7HiChg6OAYWgASB2H97dZKd1GhDSs=
 golang.org/x/exp v0.0.0-20180710024300-14dda7b62fcd/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/image v0.0.0-20180708004352-c73c2afc3b81/go.mod h1:ux5Hcp/YLpHSI86hEcLt0YII63i6oz57MZXIpbrjZUs=
 golang.org/x/image v0.0.0-20180926015637-991ec62608f3/go.mod h1:ux5Hcp/YLpHSI86hEcLt0YII63i6oz57MZXIpbrjZUs=
@@ -30,10 +48,18 @@ golang.org/x/image v0.0.0-20190118043309-183bebdce1b2/go.mod h1:ux5Hcp/YLpHSI86h
 golang.org/x/image v0.0.0-20190618124811-92942e4437e2 h1:fqF3kMQ0tlBEpnfxavzOrjqW5gokBwllwOABYxETOMA=
 golang.org/x/image v0.0.0-20190618124811-92942e4437e2/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/mobile v0.0.0-20180806140643-507816974b79/go.mod h1:z+o9i4GpDbdi3rU15maQ/Ox0txvL9dWGYEHz965HBQE=
+golang.org/x/mobile v0.0.0-20190127143845-a42111704963 h1:2HSxAhImj2OpXsNjXSqfnv1xtqeCpDjwPB3o1DnQqKM=
 golang.org/x/mobile v0.0.0-20190127143845-a42111704963/go.mod h1:z+o9i4GpDbdi3rU15maQ/Ox0txvL9dWGYEHz965HBQE=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190328230028-74de082e2cca h1:hyA6yiAgbUwuWqtscNvWAI7U1CtlaD1KilQ6iudt1aI=
+golang.org/x/net v0.0.0-20190328230028-74de082e2cca/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20181228144115-9a3f9b0469bb/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190203050204-7ae0202eb74c/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a h1:1BGLXjeY4akVXGgbC9HugT3Jv3hCI0z56oJR5vAMgBU=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/tools v0.0.0-20190202235157-7414d4c1f71c/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20190407030857-0fdf0c73855b/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

vugu/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+    <script src="/wasm_exec.js"></script>
+</head>
+
+<body>
+    <div id="target">
+        <img style="position: absolute; top: 50%; left: 50%;"
+            src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif">
+    </div>
+    <script>
+        var wasmSupported = (typeof WebAssembly === "object");
+        if (wasmSupported) {
+            if (!WebAssembly.instantiateStreaming) { // polyfill
+                WebAssembly.instantiateStreaming = async (resp, importObject) => {
+                    const source = await (await resp).arrayBuffer();
+                    return await WebAssembly.instantiate(source, importObject);
+                };
+            }
+            const go = new Go();
+            WebAssembly.instantiateStreaming(fetch("/main.wasm"), go.importObject).then((result) => {
+                go.run(result.instance);
+            });
+        } else {
+            document.getElementById("target").innerHTML = 'This application requires WebAssembly support.  Please upgrade your browser.';
+        }
+    </script>
+</body>
+
+</html>

vugu/main.go

@@ -0,0 +1,27 @@
+// +build js,wasm
+
+package main
+
+import (
+	"log"
+	"os"
+
+	"github.com/vugu/vugu"
+)
+
+func main() {
+	rootInst, err := vugu.New(&Root{}, nil)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	env := vugu.NewJSEnv("#target", rootInst, vugu.RegisteredComponentTypes())
+	env.DebugWriter = os.Stdout
+
+	for ok := true; ok; ok = env.EventWait() {
+		err = env.Render()
+		if err != nil {
+			log.Fatal(err)
+		}
+	}
+}

vugu/root.go

@@ -0,0 +1,172 @@
+package main
+
+// DO NOT EDIT: This file was generated by vugu. Please regenerate instead of editing or add additional code in a separate file.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vugu"
+
+import "encoding/json"
+import "net/http"
+import "log"
+
+type RootData struct {
+	bpi       bpi
+	isLoading bool
+}
+
+type bpi struct {
+	Time struct {
+		Updated string `json:"updated"`
+	} `json:"time"`
+	BPI map[string]struct {
+		Code      string  `json:"code"`
+		Symbol    string  `json:"symbol"`
+		RateFloat float64 `json:"rate_float"`
+	} `json:"bpi"`
+}
+
+func (data *RootData) HandleClick(event *vugu.DOMEvent) {
+	data.bpi = bpi{}
+
+	go func(ee vugu.EventEnv) {
+		ee.Lock()
+		data.isLoading = true
+		ee.UnlockRender()
+
+		res, err := http.Get("https://api.coindesk.com/v1/bpi/currentprice.json")
+		if err != nil {
+			log.Printf("Error fetch()ing: %v", err)
+			return
+		}
+		defer res.Body.Close()
+
+		var newb bpi
+		err = json.NewDecoder(res.Body).Decode(&newb)
+		if err != nil {
+			log.Printf("Error JSON decoding: %v", err)
+			return
+		}
+
+		ee.Lock()
+		defer ee.UnlockRender()
+		data.bpi = newb
+		data.isLoading = false
+	}(event.EventEnv())
+}
+
+var _ vugu.ComponentType = (*Root)(nil)
+
+func (comp *Root) BuildVDOM(dataI interface{}) (vdom *vugu.VGNode, css *vugu.VGNode, reterr error) {
+	data := dataI.(*RootData)
+	_ = data
+	_ = fmt.Sprint
+	_ = reflect.Value{}
+	event := vugu.DOMEventStub
+	_ = event
+	var n *vugu.VGNode
+	n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "div", DataAtom: vugu.VGAtom(92931), Namespace: "", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "demo-comp"}}}
+	vdom = n
+	{
+		parent := n
+		n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+		parent.AppendChild(n)
+		if data.isLoading {
+			n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "div", DataAtom: vugu.VGAtom(92931), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+			parent.AppendChild(n)
+			{
+				parent := n
+				n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Loading...", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+			}
+		}
+		n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+		parent.AppendChild(n)
+		if len(data.bpi.BPI) > 0 {
+			n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "div", DataAtom: vugu.VGAtom(92931), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+			parent.AppendChild(n)
+			{
+				parent := n
+				n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+				n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "div", DataAtom: vugu.VGAtom(92931), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+				{
+					parent := n
+					n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Updated: ", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+					parent.AppendChild(n)
+					n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "span", DataAtom: vugu.VGAtom(40708), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+					parent.AppendChild(n)
+					n.InnerHTML = fmt.Sprint(data.bpi.Time.Updated)
+				}
+				n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+				n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "ul", DataAtom: vugu.VGAtom(42754), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+				{
+					parent := n
+					n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+					parent.AppendChild(n)
+					for key, value := range data.bpi.BPI {
+						_, _ = key, value
+						n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "li", DataAtom: vugu.VGAtom(45570), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+						parent.AppendChild(n)
+						{
+							parent := n
+							n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+							parent.AppendChild(n)
+							n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "span", DataAtom: vugu.VGAtom(40708), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+							parent.AppendChild(n)
+							n.InnerHTML = fmt.Sprint(key)
+							n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " ", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+							parent.AppendChild(n)
+							n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "span", DataAtom: vugu.VGAtom(40708), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+							parent.AppendChild(n)
+							n.InnerHTML = fmt.Sprint(fmt.Sprint(value.Symbol, value.RateFloat))
+							n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+							parent.AppendChild(n)
+						}
+					}
+					n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+					parent.AppendChild(n)
+				}
+				n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+				parent.AppendChild(n)
+			}
+		}
+		n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+		parent.AppendChild(n)
+		n = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "button", DataAtom: vugu.VGAtom(102662), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+		parent.AppendChild(n)
+		// @click = { data.HandleClick(event) }
+		{
+			var i_ interface{} = data
+			idat_ := reflect.ValueOf(&i_).Elem().InterfaceData()
+			var i2_ interface{} = data.HandleClick
+			i2dat_ := reflect.ValueOf(&i2_).Elem().InterfaceData()
+			n.SetDOMEventHandler("click", vugu.DOMEventHandler{
+				ReceiverAndMethodHash: uint64(idat_[0]) ^ uint64(idat_[1]) ^ uint64(i2dat_[0]) ^ uint64(i2dat_[1]),
+				Method:                reflect.ValueOf(data).MethodByName("HandleClick"),
+				Args:                  []interface{}{event},
+			})
+		}
+		if false {
+			// force compiler to check arguments for type safety
+			data.HandleClick(event)
+		}
+		{
+			parent := n
+			n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Fetch Bitcoin Price Index", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+			parent.AppendChild(n)
+		}
+		n = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n", DataAtom: vugu.VGAtom(0), Namespace: "", Attr: []vugu.VGAttribute(nil)}
+		parent.AppendChild(n)
+	}
+	return
+}
+
+type Root struct {}
+
+func (ct *Root) NewData(props vugu.Props) (interface{}, error) { return &RootData{}, nil }
+
+func init() { vugu.RegisterComponentType("root", &Root{}) }

vugu/root.vugu

@@ -0,0 +1,64 @@
+<div class="demo-comp">
+	<div vg-if='data.isLoading'>Loading...</div>
+	<div vg-if='len(data.bpi.BPI) > 0'>
+		<div>Updated: <span vg-html='data.bpi.Time.Updated'></span></div>
+		<ul>
+			<li vg-for='data.bpi.BPI'>
+				<span vg-html='key'></span> <span vg-html='fmt.Sprint(value.Symbol, value.RateFloat)'></span>
+			</li>
+		</ul>
+	</div>
+	<button @click="data.HandleClick(event)">Fetch Bitcoin Price Index</button>
+</div>
+
+<script type="application/x-go">
+import "encoding/json"
+import "net/http"
+import "log"
+
+type RootData struct {
+	bpi       bpi
+	isLoading bool
+}
+
+type bpi struct {
+	Time struct {
+		Updated string `json:"updated"`
+	} `json:"time"`
+	BPI map[string]struct {
+		Code      string  `json:"code"`
+		Symbol    string  `json:"symbol"`
+		RateFloat float64 `json:"rate_float"`
+	} `json:"bpi"`
+}
+
+func (data *RootData) HandleClick(event *vugu.DOMEvent) {
+	data.bpi = bpi{}
+
+	go func(ee vugu.EventEnv) {
+		ee.Lock()
+		data.isLoading = true
+		ee.UnlockRender()
+
+		res, err := http.Get("https://api.coindesk.com/v1/bpi/currentprice.json")
+		if err != nil {
+			log.Printf("Error fetch()ing: %v", err)
+			return
+		}
+		defer res.Body.Close()
+
+		var newb bpi
+		err = json.NewDecoder(res.Body).Decode(&newb)
+		if err != nil {
+			log.Printf("Error JSON decoding: %v", err)
+			return
+		}
+
+		ee.Lock()
+		defer ee.UnlockRender()
+		data.bpi = newb
+		data.isLoading = false
+	}(event.EventEnv())
+}
+
+</script>