Go WebAssembly My Experiment

I am using Go as my development language for last 2 years and I am always curious to write some frontend using Go. But it was no luck for a while until go 1.11.1 released with experimental WebAssembly port. So, I had my small experiments with it.

I developed two experimental applications:

https://rajnikant12345.github.io/resume/

https://rajnikant12345.github.io/wasmapp/

What?

The app wasmapp, is fetching data from REST API https://jsonplaceholder.typicode.com/users and plotting the robots using this data and there is a search box which is searching robots within App. This app is developed using Go and WebAssembly and it works on desktop for now. Go need to optimize some initial memory issues to make it work on mobile phone browser.

Why ?

I wanted to learn some frontend technology like react or angular, but was not able to get myself convinced, because I lost the control of my code and giving it to framework. So, I was in search of a way do it my way. Go and WASM method it quiet immature but, I feel it is future and it’s worth investing some time and energy.

How ?

Enough talk, let’s do it now, I will be explaining how I approached my wasmapp, then you can easily figure out my resume app.

Prerequisite

  1. I was using GO 1.11.3, but anything above 1.11.1 must work.
  2. A code editor and that’s it.

I have used, some HTML and some CSS, for web page and styling, but the HTML code is written inside my go files as plain text string or dom objects.

I have used https://tachyons.io/ as my CSS Toolkit.

HTML Code explanation

index.html This is only HTML code we will see.

in this file we are fetching “main.wasm” and calling go.run(result.instance), this is making sense in wasm_exec.js file. wasm_exec.js can be found in GOROOT/misc/wasm directory. This file actually acts like a glue between webassembly and javascript, just try to read it you will understand.

In current web assembly, we cannot access DOM objects, but By using wasm_exec.js and GO syscall/js in our GO code, package we can access and manipulate DOM objects. We will see example of how I am doing this.

I have developed a small wrapper to facilitate my DOM manipulation, there are wrappers available, but sometimes I love doing it my way.

I am using this engine, to manipulate and render dom, I am trying to it like react does it, but I am doing this in GO.


GO Application Code

I have created this app like component inside component style and each, I did create components like, scroll bar , card list , card, app. So hierarchy is like

The top most component is or Application or App, then it has two subcomponents Search Box and A Scroll bar.

Scroll bar has a card list inside and card list has cards.

When someone types in search box, cards no consisting the text in their name will disappear. As shown in giff above.

Search box has action associated with it, and everything including action and components is written in Go.


Let’s Have A Look into code

Have a look at code comments and it will clear most of the things.

main.go

We will keep on blocking channel c, because we don’t want out assembly to exit as we are handling events and want our application alive till we close browser.

========================================

app/app.go

========================================

app/robos.go

========================================

app/scroll.go

========================================

app/cardlist.go

========================================

app/card.go

Now the search box, and an active component of this app.

app/searchbox.go

This concludes my first wasm application experiment, what I achieved is,

  1. Fetching JSON data from web.
  2. Manipulating application components on the go.
  3. All this is achieved using, GO, WebAssembly and syscall/js.
  4. Created my own DOM wrapper.

Hope Go and WebAssembly will improve with time, so we can develop or full stack in one language.

Thanks for reading…