From Emscripten to WebAssembly: A Decade of Bringing C++ to the Browser

The best time to create a programming language was ten years ago, and the second best is now.

From Emscripten to asm.js to WebAssembly, the journey spans roughly a decade.

Emscripten

In 2010, after a failed startup, Dr. Alon Zakai joined Mozilla and began developing Emscripten to compile C++ games to JavaScript, working evenings and weekends.

He demonstrated that simple C++ functions could be compiled to JavaScript:

<code>// C++ version add function
int add(int a, int b) {
    return a + b;
}</code>

<code>// JavaScript version add function
function add(a, b) {
  return a + b;
}</code>

However, differences such as integer division required careful handling, e.g., using

Math.floor

in JavaScript.

<code>// C++ version divide function
int divide(int a, int b) {
  return a / b;
}</code>

<code>// JavaScript version divide function
function divide(a, b) {
  return Math.floor(a / b);
}</code>

In 2011 Emscripten was officially released, using LLVM to compile C++ to bytecode and then to JavaScript, enabling C++ games to run in browsers.

Notable demos included compiling Python and SQLite to JavaScript.

asm.js

To improve performance, developers introduced asm.js, a typed subset of JavaScript generated by Emscripten. Example code uses bitwise OR to coerce values to 32‑bit integers:

<code>function add(x, y) {
  a = x | 0; // x as integer
  b = y | 0; // y as integer
  return a + b | 0; // result as integer
}</code>

Bitwise OR can convert floating‑point numbers to integers:

<code>var x = 3.5 | 0; // x becomes 3
console.log(x);
</code>

asm.js was widely adopted; in 2013 Epic compiled the Unreal Engine (≈1 million lines of C++) to asm.js, running smoothly in browsers.

Further optimizations by engine engineers raised asm.js performance to 50‑70 % of native code.

WebAssembly

asm.js’s limitations led to the development of WebAssembly, a binary format designed for high performance. In 2015 four major browsers (Firefox, Chrome, Safari, Edge) agreed to collaborate on WebAssembly, and by 2017 all supported it.

In 2019 the W3C standardized WebAssembly as the fourth web language.

Using the latest Emscripten (2.0.24), C++ code can be compiled to WebAssembly:

<code>git clone https://github.com/emscripten-core/emsdk.git
./emsdk install 2.0.24
./emsdk activate 2.0.24
source ./emsdk_env.sh
emcc -v
</code>

Example generated WebAssembly function:

<code>(func $_Z3adddd (type $t4) (param $p0 f64) (param $p1 f64) (result f64)
  ...
  f64.add
  return)
</code>

Benchmarks show WebAssembly is on average 33.7 % faster than asm.js and reduces file size by 62.5 %.

Real‑World Applications

Notable deployments include:

AutoCAD compiled to WebAssembly (2018), enabling desktop‑grade performance in browsers.

Google Earth (2019) and Google Meet (2020) using WebAssembly with SIMD for real‑time video processing.

These examples demonstrate WebAssembly’s ability to run CPU‑intensive workloads such as graphics, audio, video, machine learning, AR/VR, and games.

While WebAssembly is not a perfect solution—startup time can increase and it still relies on JavaScript for loading—it proves that compiling typed languages to a web‑compatible target is feasible and valuable.

Future directions may involve defining an intermediate representation (IR) and a dedicated virtual machine to bypass JavaScript altogether.

In conclusion, WebAssembly represents a revolutionary step for the web, unlocking high‑performance possibilities for a wide range of applications.