This document provides a brief history of WebAssembly, including its origins in asm.js and progression through various compiler tools to the current WebAssembly standard. It discusses early implementations using asm.js for structured control flow and linear memory with isolated stacks. It also summarizes key compiler and tooling projects that have contributed to WebAssembly, such as Emscripten, Binaryen, Cranelift, Rust and WebAssembly, Pyodide, and WebAssembly Studio.

1. WebAssembly Tools & Applications
Michael Bebenita - mbebenita@mozilla.com

2. A brief history of WebAssembly
c = a + b
Boolean
Number
String
Object
Boolean
Number
String
Object
Boolean
Number
String
Object

3. A brief history of WebAssembly
c = a + b
Boolean
Number
String
Object
Boolean
Number
String
Object
Boolean
Number
String
Object

4. A brief history of WebAssembly
c = (a | 0) + (b | 0)
Number
(Double)
Number
(Int32)
Number
(Int32)

5. A brief history of WebAssembly
c = ((a | 0) + (b | 0)) | 0
Number
(Int32)
Number
(Int32)
Number
(Int32)

6. A brief history of WebAssembly
function add(a, b) {
a = a | 0
b = b | 0
return a + b | 0
}
int add(int a, int b) {
return a + b
} LLVM > Emscripten
C/C++ JavaScript

7. A brief history of WebAssembly
function add(a, b) {
a = a | 0
b = b | 0
return a + b | 0
}
JS Engine
sub rsp, 8
mov ecx, esi
mov eax, ecx
add eax, edi
add rsp, 8
ret
x86 AssemblyJavaScript

8. A brief history of WebAssembly
“use asm”
function add(a, b) {
a = a | 0
b = b | 0
return a + b | 0
}
JavaScript (asm.js)

9. A brief history of WebAssembly
(func $add
(type $t1)
(param $p0 i32)
(param $p1 i32)
(result i32)
get_local $p1
get_local $p0
i32.add
)
int add(int a, int b) {
return a + b
}
C/C++ WebAssembly
LLVM > Emscripten > Binaryen

10. A brief history of WebAssembly
• asm.js
• Structured Control Flow
• Linear Memory w/ Isolated Stack
• WebAssembly
• Compact Binary Encoding
• New DataTypes & Operators (f32, i64, ..)

11. Emscripten
Primary toolchain for compiling C/C++
to WebAssembly
Compiler (+ Libraries)

12. Binaryen (.js)
Compiler infrastructure and toolchain library for
WebAssembly, in C++
• Shrink LLVM code, ~15%
• Shrink & optimize all other code, ~50%
• Produce reasonable Wasm code, let Binaryen take care of the details for
you.

13. Cranelift
(Formerly Cretonne)
A low-level retargetable code generator, w/ a
WebAssembly Frontend
• WebAssembly engine in Firefox
• Embeddable
• Backend for Rust’s debug builds

14. Rust + WebAssembly
• wasm-bindgen
• wasm-pack
• twiggy

15. Pyodide
The Python scientific stack, compiled to
WebAssembly.

16. https://WebAssembly.Studio

17. Try Before you Buy

20. Downloadable Codecs / Analysis Tools

21. Client Side Signal Processing / ML

22. Thank You