WebAssembly (also called WASM) is a new low-level binary format for the web. It’s not a programming language you are going to write, but instead other higher level languages (C, Rust, C++) are compiled to WebAssembly to run in the browser.

It’s designed to be fast, memory-safe, and open.

WebAssembly is the second language ever to be understandable by Web Browsers, after JavaScript’s introduction in the 90’s.

Browser and Node.js support

WebAssembly is a standard developed by the W3C WebAssembly Working Group. All modern browsers (Chrome, Firefox, Safari, Edge, mobile browsers) and Node.js support it.

Node.js supports WebAssembly since version 8, so you can build parts of a Node.js application in any language other than JavaScript.

WebAssembly does not replace JavaScript

WebAssembly is not meant to replace JavaScript. It’s a way to port programs written in other languages to the browser, to power parts of applications that are either better created in those languages, or pre-existing.

JavaScript and WebAssembly code interoperate to provide great user experiences on the Web.

You can use the flexibility and ease of use of JavaScript and complement it with the power and performance of WebAssembly.

Safety

WebAssembly code runs in a sandboxed environment, with the same security policy that JavaScript has. The browser ensures same-origin and permissions policies.

For more details, see Memory in WebAssembly and the Security docs of webassembly.org.

Performance

WebAssembly was designed for speed. It’s a compiled language, meaning programs are transformed to binaries before being executed.

It can reach performance that closely matches natively compiled languages like C.

Compared to JavaScript, which is a dynamic and interpreted programming language, WebAssembly is always going to beat JavaScript performance, because when executing JavaScript the browser must interpret the instructions and perform optimization on the fly.

Who is using WebAssembly?

Many companies are already using WebAssembly to make their products better on the Web.

A great example is Figma, a design application. The app is built using React, but the main part (the graphics editor) is a C++ application compiled to WebAssembly, rendered in a Canvas using WebGL.

AutoCAD released its popular design product running inside a Web App, using WebAssembly to render its complex editor (migrated from the desktop client codebase).

How can you use WebAssembly?

C and C++ applications can be ported to WebAssembly using Emscripten, a toolchain that compiles your code to two files:

• a .wasm file (the actual WASM code)
• a .js file (the glue that allows JavaScript to run the WASM)

Emscripten does a lot of work for you, like converting OpenGL calls to WebGL, providing bindings for the DOM API and other browser APIs, and providing filesystem utilities.

Rust code can be directly compiled to WebAssembly as its output target. See the Rust to WASM guide.

The future of WebAssembly

WebAssembly officially supports languages like C, Rust, C++ but many more are coming. Support for garbage collected languages is evolving.

Work is ongoing to:

• Make WebAssembly a more first-class citizen in the browser
• Allow WebAssembly to call DOM, Web Workers or other browser APIs directly
• Enable JavaScript code to load WebAssembly modules through ES Modules

Installing Emscripten

Install Emscripten by cloning the emsdk GitHub repo:

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Compile a C program to WebAssembly

Here’s a simple “Hello World” C program:

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

Compile it with Emscripten to run in the browser:

emcc test.c -s WASM=1 -o test.html

Emscripten gives you an HTML page that wraps the WebAssembly program, ready to run. Open it from a web server (not the local filesystem):

npx http-server

Call a WebAssembly function from JavaScript

Include the emscripten headers and define a function:

#include <stdio.h>
#include <emscripten/emscripten.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {
  printf("Hello!\n");
  return 8;
}

EMSCRIPTEN_KEEPALIVE prevents the function from being stripped if not called from main().

Compile with:

emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

This keeps the ccall and cwrap functions on the Module object. In the browser console:

Module.ccall('hello', 'number', null, null)
// Prints "Hello!" and returns 8

The 4 parameters are: C function name, return type, types of arguments (array), and arguments (array).

If your function accepted 2 strings:

Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

The types you can use are null, string, number, array, boolean.

You can also create a JavaScript wrapper with Module.cwrap:

const hello = Module.cwrap('hello', 'number', null, null)
hello() // Call it multiple times

See the official docs for ccall and cwrap.

Lessons in this unit:

0:	Introduction
1:	Deno
2:	▶︎ WebAssembly