What is WebAssembly?

Resource

Edge Academy

Topic

Edge Compute

Definition

WebAssembly is an open standard for running binary programs in browsers with near-native performance.

Overview

For a while, JavaScript was the only web programming language after it was introduced by Netscape in 1995. In the following years, many alternatives were proposed, but none succeeded. The alternatives were either proprietary products, had little cross-platform support, or required browser plugins. So, despite its shortcomings, JavaScript persisted and became one of the most popular computer languages in the world.

WebAssembly has been successful where others have failed. Instead of trying to replace JavaScript, WebAssembly works alongside it. WebAssembly, also known as Wasm, first appeared in 2017 and is the result of an unprecedented collaboration between W3C, Google, Apple, Mozilla, and Microsoft. As a result, it has built-in support in all major browsers for all platforms—no plugins required.

The Wasm standard defines an executable binary format, a corresponding textual assembly language, and the interfaces to interact with the host system. Since it’s a well-defined format, any language can have Wasm as a compilation target. Consequently, there are now around 40 high-level programming languages that support WebAssembly, including C and C++, Python, Go, Rust, Java, and PHP.

Wasm is not a new language, but a portable, pre-compiled, cross-platform binary instruction set for a virtual machine that runs in the browser. The Wasm format has been designed for the Web and its features include: small size, little overhead, near-native speed, and on-the-fly validation and safety. Furthermore, it is streamable and parallelizable.

How WebAssembly Works

Wasm programs are deployed in two stages. First, a Wasm module is generated from the source code:

  1. Write the application in your preferred language.
  2. Create a pre-compiled Wasm module.
  3. Distribute the module—ideally, using a CDN for low latency.

Once the Wasm module is built, it can be run anywhere with a few lines of JavaScript glue:

  1. Load the Wasm module.
  2. Create an instance of the module.
  3. Call the instance’s functions.

Compilation

You can write a Wasm module in any language that supports it or in the text assembly directly. For instance, take this C file called answer.c:

int answer() {
 return 42;
}

To generate a standalone .wasm module, you can use emscripten. Emscripten is a C and C++ compiler that generates JavaScript files and WebAssembly binaries:

emcc answer.c -O2 -s SIDE_MODULE=1 -o answer.wasm

The result of the compilation is a file called answer.wasm. This file can now be loaded in a browser, as a server component.

For the most part, emscripten’s emcc can be used as a drop-in replacement for GNU’s gcc. Therefore, it can compile any portable C or C++ library and bring it to the Web.

Running in the browser

To run a Wasm module in the browser, the .wasm file must be loaded, instantiated, and invoked. You can choose among the multiple loading methods described in the JavaScript API.

For example, this script loads answer.wasm in the browser and shows the output (the number “42”) in an alert box:

fetch('answer.wasm').then(response =>
 response.arrayBuffer())
 .then(bytes =>
 WebAssembly.instantiate(bytes))
 .then(result =>
 alert(result.instance.exports.answer()));

Running outside the browser

The primary motivation behind WebAssembly was to enable developers to run advanced applications in browsers. Nevertheless, nothing prevents you from running Wasm modules on servers.

For instance, you can run answer.wasm in Node.JS with just a few lines of code:

const fs = require('fs');
const run = async () => {
 const buffer = fs.readFileSync("./answer.wasm");
 const result = await WebAssembly.instantiate(buffer);
 console.log(result.instance.exports.answer());
};
run();

Examples of WebAssembly

WebAssembly programs can go where no JavaScript has gone before, namely media edition, image recognition, transcoding, VR and high-end games, emulation, or desktop-tier applications.

More use cases include:

Note: Check out this GitHub repo to experiment with Wasm and StackPath’s serverless edge product.

WebAssembly has been successfully deployed in the real world, too:

  • eBay implemented a universal barcode scanner.
  • Google Earth can run in any browser now, thanks to WebAssembly.
  • The Unity and the Unreal game engines have been ported to WebAssembly. You can even run the Unreal Epic Zen Garden demo.
  • The Doom 3 engine has also been ported to WebAssembly. You can play the demo online.
  • Alternatively, you can create custom games in the browser with Construct3.

Key Takeaways

  • With around 40 languages that can compile to WebAssembly, developers can finally use their favorite language on the Web.
  • WebAssembly does not replace JavaScript; in fact, some JavaScript code is required to load WebAssembly modules.
  • WebAssembly runs in all major browsers and in all platforms. Developers can reasonably assume WebAssembly support is anywhere JavaScript is available.
  • WebAssembly can also run in servers.

Related