Writing your first WebAssembly Project

Published in

AppsFlyer Engineering

6 min readMay 8, 2019

One of the really great aspects of being an engineer at AppsFlyer is that you are given the freedom to explore new technologies all the time — even if they aren’t directly related to your work today, or currently a part of the tech stack being used. That’s how I came upon WebAssembly, and decided I really wanted to explore it and learn more.

So just in case you’ve never heard of WebAssembly, let’s briefly touch on:

Ok, — what is it?
What do I need to run it?
And eventually — How can I run it in the browser?

So you’ve heard about WebAssembly and you are excited, because everybody is talking about it, and saying it’s basically the future of the web. Except, aside from reading a few blog posts and some documentation , you don’t really know what it actually is, you don’t know how to run it on your machine, and you especially don’t know how to run it in your browser.

Don’t judge a SaaS platform by its cover. Our frontend team goes deep with some of the latest system designs. >>See our open roles

For me it was the same, so I started reading and trying to set up my environment to make it work, and trying to understand it better.

First, I have to say, at least for me — I didn’t really find a simple enough step by step guide to get there easily. That’s why I decided to write this post, and I will try my best to do just that, so you can get started with WebAssembly and learn about the excellent benefits it provides.

I will guide you through some basic concepts such as setting up your environment, so that when you finish reading this post you will have enough basic knowledge to know what WebAssembly is, and have a basic setup with a simple running example.

For this post, I‘ve chose to use the Rust programming language, to run our example, but keep in mind that this was my choice and there is no restriction in using another language that supports compiling to WASM.

Photo by focusblurred on flickr

If you can’t explain it simply, you don’t understand it well enough. ~Albert Einstein

What is WebAssembly ?

WebAssembly (WASM, WA) is a web standard that defines a binary format with a corresponding assembly-like text format for executable code in web pages. You can read more about this here.

Assembly code refers to code that is written by humans, where the assembly code is converted into executable machine code by a utility program referred to as an assembler. The conversion process is referred to as assembly, or assembling the source code.

What WebAssembly enables you to do is to take things like C/C++, Rust, Go or any other supported code and compile it into what is called a WebAssembly module. You can load that into your web application and call it from JavaScript.

WebAssembly has a textual format that’s easy to read (.wat), but binary representation is what you actually deliver to the browser (.wasm).

You can start writing code in WAT format:

Although, I don’t think you want to start writing code like this, when you can write something more readable. See the example below using Rust to deliver the same code, with the same functionality, creating a simple program with a function:

Another important aspect is support, WebAssembly is supported by all major browsers.

So, why DO we need WebAssembly?

It doesn’t matter how much we love JavaScript, there are actions where JS is less strong, and this is where WebAssembly steps in. One of the main goals of WebAssembly is to provide better portability, speed, and flexibility.

Speed — Binaries are much smaller than text files (JavaScript files) and because of their size, are faster to download.
Portability — With WebAssembly we have only one compilation step, no need to take care of different operating systems, because your app will be running in the browser.
Flexibility — Until now in order to write web apps you had to use JavaScript. With WebAssembly you can choose Java, or Rust and many other supported languages.

Remember WebAssembly is not a replacement for JavaScript, it’s a new partner to work alongside with it.

Ok, so how do you use WebAssembly?

Now comes the part everybody has been waiting for, how to write/compile and run WebAssembly.

There are a few options to achieve this:

Without any setup, meaning you can use online tools to write and compile your code.
Setup your environment, here you have a few options depending on which language you want to use. I’ve mentioned a few, but remember that there are more.

Here is the list of languages that support compiling to WASM.

LLVM — Can be set up to work with different languages
Emscripten — C/C++
rustc — Rust

Option 1 (No Setup required)

1. Open webassembly.studio

2. What we have here:

main.rs

This provides a simple file written in ‘Rust’, where the code exports a public function that gets one number for input and returns the result of adding `1` to the passed input
no_mangle extern “C”- functions are used to export them as public from the crate(rust module) for the purpose of linking with other libraries
This code will be compiled to a ‘wasm’ file, that is the actual file that will be loaded in the browser

main.js

This is an additional simple file written in ‘JS’, where the code fetches a compiled file ‘wasm’ type
The loaded response file is converted to ‘arrayBuffer’ and then initializes a WebAssembly object using ‘WebAssembly.instantiate’, in this object we have the exported functions ‘instance.exports.myFunc’

main.html

An ‘HTML’ file that loads the ‘JS’ file
In order to run it, click on the ‘Build’ and then the ‘Run’ buttons respectively

Option 2 (Setup required)

This example provides multiple ways to run the example on your local environment, as well as languages to choose from. Again I’ve chosen Rust (and you can find an excellent guide here for Rust Setup), but feel free to choose your favorite language for the job.

In my case I used the option to setup with Docker.

To get started, you need a ‘Rust’ file, I used in this example:

Once its compiled you need an HTML file like this: