Webassembly: Running Go code in the browser.

Iván Corrales Solera
ITNEXT
Published in
6 min readApr 29, 2022

Webassembly (WASM) is one of the most disruptive technologies at this moment. WASM enables us to run programs in the browser that was written in programming languages not supported by the own browser. We can do it because some programming languages can be compiled into WASM and WASM is supported by all the browsers.

For instance, we can write Rust or Go code and execute it as we do with Javascript.

Image sourcehttps://tecnologiandroid.com/que-es-webassembly-wasm/

The most common uses of WASM are:

  • Images optimization compression.
  • Harvest old code that was written in the past and bring it into the modern web world.
  • Encryption.
  • Game development.

WASM vs Javascript

Performance

The main difference with Javascript (JS) is that JS is a dynamic language. It means that the process to execute a piece of JS on a browser looks like the below:

  1. The browser pulls down the JS from the server
  2. It starts parsing all the JS
  3. It converts the downloaded JS code into abstract syntax trees.
  4. It does a sort of compilation into bytecode.

On the other hand, WASM is a static language and the code that is executed has been compiled in advance so we just need to pull down the WASM

Interoperability

The usage of WAS becomes very interoperable. We can write code in both JS and WAS and then we can make calls between pieces of code written in a different language.

WAS code can call JS functions and vice-versa, JS code can call WAS functions.

Learning by doing

In this tutorial, we will learn to compile Go code to WASM and execute it in the browser.

We will learn to implement a JSON Beautifier Online service. This service will be implemented in Go and It will be executed in the Browser. (It sounds great, doesn’t it?)

Trying to implement the full problem from scratch could be hard to follow it. Thus, we will go step by step through different examples before doing the final solution.

Prerequisites

  • Let’s clone the code
> git clone git@github.com:ivancorrales/wasm-tutorial-go.git
> cd wasm-tutorial-go

The only Software that you need to have installed on your computer is Docker Don’t worry If you don’t have the Go compiler in your system, we will take advantage of Docker.

The code

Code organization for this tutorial

The tutorial is composed of 7 steps. That’s the reason why you will find 7 HTML files at the root of the repository (sample[N].html, N=1…7) and 7 subfolders under wasm. The folders under wasm contain the Go code that will be compiled to WASM.

At the root of the repository, you will find a styles.css (commons CSS styles used in the different samples), load_wasm.js (this file is used to import the files compiled to wasm format) and, main.go which is a program used to serve static content (the HTML pages).

We will use the multistage Dockerfile at the root of the repository to build and run the samples. Although we’re not going to explain how this Docker works, feel free to reach me If you have any questions or suggestions.

STEP 0 — Launch the server

Execute the below commands to create the docker image and make it run. This will launch a static server on port 3000. If this port is busy, you just need to update the mapped port in the Makefile

> make build
> make run

STEP 1 — Sending messages to the output console

This is the most basic scenario. We will write a message in Go that will be sent to the output console in the browser.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample1/main.go

This code is compiled into a WASM file and loaded from the HTML page as It’s shown below. The way that we import the WASM file will be exactly the same for all the samples.

Visit the URL http://127.0.0.1:3000/sample1.html to check the sample 1

Webassembly tutorial- Sample 1

If we open the Dev Tools in the browser we will see the message “Hello my friend” that was printed in the main.go file.

Webassembly tutorial- Sample 1 , Dev Tools

STEP 2— Modifying the HTML

In this step, we will learn to modify the content of the page from Go. What we‘ll do is to add text to the page dynamically.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample2.html

In this case, we have an empty H2 element, whose content will be populated from the Go code.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample2/main.go

Visit the URL http://127.0.0.1:3000/sample2.html to check the sample 2

Webassembly tutorial- Sample 2

STEP 3— Appending HTML elements

In the previous step, we learned to modify the value of an HTML element. In this one, we will learn to create a new element.

Instead of populating the value for the element H”, we will create the element from the Go code.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample3.html
https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample3/main.go

Visit the URL http://127.0.0.1:3000/sample3.html to check the sample 3

Webassembly tutorial- Sample 3

STEP 4— Modifying the classes of an HTML element

We will learn to change the class of an HTML element. We do both removing and adding new classes to the HTML element. This step will update the class of an H3 element every 2 seconds.

We will replace the class of the element with the id simpleText

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample4.html

The class of the H2 will be changed every 2 seconds from .green to .pink and vice-versa.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample4/main.go

Visit the URL http://127.0.0.1:3000/sample4.html to check the sample 4

STEP 5— Modifying properties of the HTML elements

This step could look similar to the previous one, but they’re completely different each other. In this step will be interacting with the properties of the HTML elements. Concretely, we will modifying the style property of an H2. We will update the display value from block to none and vice-versa. This will make that the text, in the H2 element, blinks.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample5.html
https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample5/main.go

Visit the URL http://127.0.0.1:3000/sample5.html to check the sample 5

STEP 6 — Reading the HTML content from Go

We will learn to read the content of the text of an H2 element, then we will convert the text to uppercase and finally we will display the converted text in the page.

The text in the HTML element with id description will be uppercased and displayed in element with id descriptionUppercase.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample6.html

The code in Go is not rocket science as you can see below

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/wasm/sample6/main.go

Visit the URL http://127.0.0.1:3000/sample6.html to check the sample 6

STEP 7— Final step

We already have all the required knowledges to write, in Go, our own JSON Beautifier Online service.and make it run in the browser.

Our page will contain two textarea fields, one with the input text and the second one will display the text in a pretty mode. We will play with the HTML events onblur and onfocus to apply some styles to the input textarea field.

https://github.com/ivancorrales/wasm-tutorial-go/blob/main/sample7.html
  • Line 11: This is the way to open an alert from Go.
  • Line 45: We will display the error in the Dev Tools of the browser.
  • Lines 57–58: The first value in function Set will be name used to register our Global function.

Visit the URL http://127.0.0.1:3000/sample7.html to play with our JSON Beautifier online service.

I hope you enjoyed the tutorial as much as I did writing it!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in ITNEXT

ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.

No responses yet

What are your thoughts?