How to compile code in the browser with WebAssembly

Browsers have become powerful beasts. First used to share research papers at CERN, the browser can now run Google Earth, play Unity 3D games, and even design buildings in AutoCAD.

Go Wasm https://go-wasm.johnstarich.com

Write code with Go Wasm

Go Wasm makes it possible to both write and run Go programs using the actual Go compiler. In other words: Write code, go build, then run the program. This is quite different from familiar sites like Go Playground because the code actually runs in the browser — even after you disconnect from the internet.

Go Wasm runs offline, too
File redirects and connecting outputs to inputs with pipes in Go Wasm’s shell
File redirects and connecting outputs to inputs with pipes in Go Wasm’s shell

How it works

Go Wasm is composed of three core programs: The “operating system,” the editor, and one or more shells. All three of these are sandwiched together with the browser, where the operating system is a translator to access virtual files and processes.

“Operating system”

Operating systems run programs on all kinds of different hardware. They present programs with a facade of resources to interact with, but they usually don’t allow direct access. If a program opens a file and writes some data, then the OS returns a file handle and dutifully writes the data to a hardware disk. These kinds of important actions are often called system calls, or “syscalls.”

Sequence diagram of opening a file

Virtual file system

A short aside on the virtual file system, since it was especially difficult to get right. A modern-day file system (FS) includes loads of edge-cases and features. File permissions, native pipes, and file locks are all required to work perfectly for go build to run without hitting a fatal error. Ugh.

Editor

The editor fills a more conventional web app role. It sets up the web page with code editor tabs, controls, a build console, and terminal tabs.

The code editor and shell, combined inside the IDE
The code editor and shell, combined inside the IDE

Shell

The shells inside each terminal tab are an interactive way to run go commands or any other Wasm program on the file system. There were a few shells written in Go out there, but none that I tried actually compiled to Wasm and worked out of the box. Luckily, the shell was a fun learning process all its own. I had to learn all about terminal escape codes to support command-line input editing, then get fancy with process file redirects and environment variables.

Halloween’s this week — I just couldn’t resist. :)

What lies ahead

WebAssembly certainly has its ups and downs right now, but it also has huge potential just waiting to be realized.

Software engineer, hiker. Works on the IBM Cloud Kubernetes Service. Opinions are my own. johnstarich.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store