Skip to content
An experiment with WebAssembly + Go on how to build it into a normal web dev pipeline
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
.gitignore
License.md
README.md
azure-pipelines.yml
package-lock.json
package.json
tsconfig.json
webpack.config.js

README.md

Australian Tech Events

Build Status

This is the source code for the Australian Tech Events website, a web UI over the top of the Readify DevEvents markdown files.

I build this mainly as an exercise in learning how to use Go and WebAssembly, and how they can fit into a modern web developer toolchain.

At the end of the day this is a React.js application, written in TypeScript, using webpack to compile and bundle the code.

The Code

The code lives in the src folder, with both the TypeScript and Go code all within there. To illustrate the nature of using Go with WebAssembly there is also a Go application that lives in src/markdown-tools/app, that loads up the core of the Go codebase (markdown-tools.go) and executes a request against a markdown file.

Running locally

To run it locally you'll need to have the following installed:

  1. Node.js (I've tested v10.15.x)
  2. Go 1.12.*

Next install the 2 Go modules that are required, the first is the Markdown engine, the 2nd is the Go WASM bridge that webpack uses (this needs to be installed with Go in WASM mode):

$> go get github.com/gomarkdown/markdown
$> GOOS=js GOARCH=wasm go get github.com/aaronpowell/webpack-golang-wasm-async-loader/gobridge

Finally you can install the node modules and start the webpack-dev-server:

$> npm install
$> npm start

How it works

The application works by compiling the Go part of the application to a WebAssembly binary that is then exposed by a JavaScript bridge (more info can be found on my blog for how this works). The React application then communicates via this bridge to the WebAssembly component.

WebAssembly is responsible for:

  1. Parsing the markdown
  2. Generating a new object model from the markdown
  3. Returning the new object model to JavaScript
    • Due to the nature of WebAssembly this is done using JSON, not as 'plain old JavaScript objects'

The web application is responsible for:

  1. Making a fetch request to download the markdown
  2. Binding the object model from WebAssembly to a React UI

The pipeline looks like this:

fetch -> WebAssembly -> React.js

You can’t perform that action at this time.