Go WebAssembly Tutorial - Building a Calculator

● SUBSCRIBE to see more of my Videos & hit that LIKE button to support the channel!

Hi Everyone, in this tutorial, we are going to be looking at how you can compile Go to WebAssembly and subsequently use that to power your frontend applications with JavaScript.

We'll be building a really simple calculator and exposing a couple of Go based functions that can subsequently be called within our frontend using the onClick attribute.

‎

‎--------------

🎥 Recording Setup

[josephkeller]

Depending on your version of Go, you might have to do some fiddling with the 'server.go' file in order to run this and export the lib.wasm properly. For me, I had to change the main function in 'server.go' to another function name, ("runserver()"), for instance. Then, you'll need to call 'runServer()' in the main.go file, under the main function.


Finally, when compiling the lib.wasm, file you'll need to run ALL of the go files in that directory. You're command line should look like this:
GOARCH=wasm GOOS=js go build -o lib.wasm *.go


Let me know if that works for you all!

[jlhl]

the example don't run on go 1.12, because 1.12 have delete "js.NewCallback" API, and instead of Funccof

[mahansathees]

Hi Elliot
Can you kindly update the flowing function according to go version 1.12.3? because js.NewCallback() had been drop. I couldn’t work around
.
func registerCallbacks() {
 
js.Global().Set("add", js.NewCallback(add))
js.Global().Set("subtract", js.NewCallback(subtract))
}

thanks

[vencelam]

I'd like to know the purpose of this line:
js.Global().Set("output", ...);
What is it doing? You have another println() called under it to output the result.

[Andrew-ukoo]

What theme with arrows in terminal is used?

[alexeygurzhiy]

Thank you very much.

The tutorial is too legacy, but despite it I've managed to make a working project.
You need to update next:

Make a register of callback
func registerCallbacks() {
js.Global().Set("add", js.FuncOf(add))
}

And update your add function with next:
func subtract(this js.Value, i []js.Value) interface{} {
value1 := js.Global().Get("document").Call("getElementById",
value2 := js.Global().Get("document").Call("getElementById",
intVal1, _ := strconv.Atoi(value1)
intVal2, _ := strconv.Atoi(value2)

println(intVal1 - intVal2)
js.Global().Get("document").Call("getElementById", i[2].String()).Set("value", intVal1 - intVal2)
return (intVal1 - intVal2)

[GifCoDigital]

So stupid questions.... the actual function calls are running on the client right? Not the server?

[tommyye]

I checked the js dir there. But the build cmd always printed error.
main.go:5:2: build constraints exclude all Go files in D:\software\GO\src\syscall\js

[davidle]

Can this run on windows 10 home ? I feel there are many errors

[MenkoDany]

Is this hosted anywhere so that I can test it before I try the tutorial? Or any other wasm example written in go?

[touristtam]

Would you see this in prod as opposed to having an API written in Go and a (what ever flavour of the month) JS client ?

[khaioan]

(index):1 Uncaught (in promise) LinkError: WebAssembly Instantiation: Import #5 module="go" error: function import requires a callable. Anyone helps me resolve this error??

[dz_s]

Could you provide source code please? Thx.

[edwardanugent]

of course this doesn't work on windows