Go WebAssembly Tutorial - Building a Calculator

Рет қаралды 72,444

6 жыл бұрын

👨‍💻 For the price of a ☕ every month, sign up and gain access to a growing list of premium courses on my site - tutorialedge.net/pricing/ 👩‍💻
● 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.
text tutorial: tutorialedge.net/golang/go-we...
WebAssembly Wiki: github.com/golang/go/wiki/Web...
wasm_exec.js: wget github.com/golang/go/blob/mas...
‎
‎● My Twitter ► ⁦‪ / elliot_f
‎● My Website ► tutorialedge.net
‎--------------
🎥 Recording Setup
Microphone - amzn.to/3hvASys
Mic Boom - amzn.to/3o0cW8Q
Mouse - amzn.to/2WZMoZs
Monitor 1 - amzn.to/38IUlYy
Monitor 2 - amzn.to/3rBTZf7
Mount - amzn.to/3o3185V
USB-C Hub - amzn.to/3o2xRbw

Пікірлер: 55

@Tutorialedge 6 жыл бұрын

The Source Code for this entire project can be found here: github.com/TutorialEdge/Go/tree/master/go-webassembly-tutorial

@sntshkmr60 5 жыл бұрын

Dead link.

@shakerlakes 3 жыл бұрын

Broken link. The correct one seems to be: github.com/elliotforbes/go-webassembly-framework

@josephkeller2521 4 жыл бұрын

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!

@naltun4702 6 жыл бұрын

Congrats on the Awesome Go shoutout!

@carloslfu 5 жыл бұрын

Great, thanks!

@zedwong2486 2 жыл бұрын

Thank you so much!

@ATOM1671976 4 жыл бұрын

Nice!

@mahansathees 5 жыл бұрын

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

@serdcemsvami 5 жыл бұрын

Goolobal 😀

@jlhl6487 5 жыл бұрын

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

@emilywilliams6403 4 жыл бұрын

even when I change to funcOf i'm getting some weird errors :/

@En0xer 4 жыл бұрын

@@emilywilliams6403 Change the signature of the function you want to register using FuncOf 1. Add a parameter of type js.Value 2. The function must return an empty interface (I think this will change in the future) From: func add(i []js.Value) { ...... } To: func add(this js.Value, i []js.Value) interface{} { ...... return 'something'} Hope it helps!

@leozebul 3 жыл бұрын

Interesting

@Andrew-uk4oo 6 жыл бұрын

What theme with arrows in terminal is used?

@bquinn1992 5 жыл бұрын

Oh my zsh default theme, 'robbyrussell'

@LucasRodrigues-vw7uz 3 жыл бұрын

Woooooooow

@vencelam8287 5 жыл бұрын

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.

@gtclaan 5 жыл бұрын

I agree, the js.Global().Set("output", ...) line is useless. What this line does is it sets the value of the Javascript variable 'output'. But he doesn't use the 'output' variable anywhere in this tutorial, so its only confusing. I liked the rest of the tutorial though. Thanks for making it.

@emilywilliams6403 4 жыл бұрын

glad I'm not the only one going crazy at this part. I'm getting lots of errors too I think more than one thing might be outdated.

@MenkoDany 6 жыл бұрын

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

@Tutorialedge 6 жыл бұрын

Here's the repo for this particular tutorial - github.com/TutorialEdge/Go/tree/master/go-webassembly-tutorial

@dz_s 6 жыл бұрын

@@Tutorialedge would be great if you pin it. Thx

@MenkoDany 6 жыл бұрын

I found the repo, I was asking if I could try it in the browser first

@user-bu2xf9iq2v 3 жыл бұрын

wow

@dr.briaro 2 жыл бұрын

I cant fint the split temp terminal.

@tommyye5140 6 жыл бұрын

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

@Tutorialedge 6 жыл бұрын

This was something that I too encountered when upgrading to Go v1.11. Ensure your GOPATH and GOROOT are both pointed to your new Go 1.11 installation and that when you are performing the build, it is using the appropriate GOARCH and GOOS settings. Give this a shot and let me know how you get on :)

@GifCoDigital 5 жыл бұрын

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

@Tutorialedge 5 жыл бұрын

It's not a stupid question at all, these functions are indeed executed within the client and not the server.

@GifCoDigital 5 жыл бұрын

Thanks! Im just getting started with Go, what would be a more practical use case for this where plain old JS wouldnt cut it? Would it mainly be multi threaded tasks?

@user-cq7db9ij1o 4 жыл бұрын

@@GifCoDigital Use cases are very very limited. If you want nano-second performance like some 3D games or some image editing application. etc Not for 99% of web apps i guess.

@dead4youlots 6 жыл бұрын

What ide/texteditor is this?

@robertoortega6182 6 жыл бұрын

visual studio code

@Tutorialedge 6 жыл бұрын

It's visual studio code! :)

@touristtam 6 жыл бұрын

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 ?

@Tutorialedge 6 жыл бұрын

It's still an experimental port for now, but when it becomes more mature I can definitely envision new frameworks coming out that are built purely in Go. I can see these simplifiying the way we do things within our web apps and providing us a lot more flexibility and freedom.

@MakisMaropoulos 5 жыл бұрын

Iris web framework has already an example on its repository for webassemply + javascript + iris backend API, you may want to take a look at github.com/kataras/iris/tree/master/_examples

@davidle5711 3 жыл бұрын

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

@maniturox8700 4 жыл бұрын

i need help regarding .WASM file??

@khaioan2766 5 жыл бұрын

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

@napoleonsantana5309 5 жыл бұрын

same issue

@napoleonsantana5309 5 жыл бұрын

Found a solution, dont use the wasm_exec.js in the description. Its repo has been changed. Just use the one in his project. github.com/golang/go/edit/master/misc/wasm/wasm_exec.js It worked for me.

@dz_s 6 жыл бұрын

Could you provide source code please? Thx.

@Tutorialedge 6 жыл бұрын

github.com/TutorialEdge/Go/tree/master/go-webassembly-tutorial - here you go! :D

@user-cq7db9ij1o 4 жыл бұрын

@@Tutorialedge Thats not working. also Go 1.12 nothing works. I think still way ahead.

6 жыл бұрын

correct link : tutorialedge.net/golang/go-webassembly-tutorial/

@Tutorialedge 6 жыл бұрын

Good catch! I've updated the link :) Thanks for your help!

@edwardanugent 5 жыл бұрын

of course this doesn't work on windows

@vladmartian 5 жыл бұрын

But it does. Compile the server.go with GOARCH=amd64 and GOOS=windows and run the server. After that change the envs GOARCH=wasm GOOS=js and compile the main.go to main.wasm. Be shure to change the name of the wasm file in the index.html

@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", i[0].String()).Get("value").String() value2 := js.Global().Get("document").Call("getElementById", i[1].String()).Get("value").String() 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)