WASM is a portable compilation target for the web. This presentation shows the main features of WebAssembly.

1. WebAssembly
A portable compilation target for the
web

2. Compiling
X
Transpiling

3. Compiling: What?
General term for taking source code written in one language and transforming
into another language
1. C/C++ to x86 machine code
2. Java to JVM Bytecode

4. Transpiling: What?
Specific term for taking source code written in one language and transforming
into another language that has a similar level of abstraction
1. Java to Javascript
2. JVM Bytecode to x86 machine code

5. Assembly

6. Assembly: What?
Assembly (or assembler) language (abbreviated asm), is any low-level
programming language in which there is a very strong correspondence between
the program's statements (mnemonic) and the architecture's machine code
instructions (opcodes).

7. MOV AL, 0x61 ; Load register AL with 97 (61 hex)
Assembly: What?
Assembly Language for x86 (Mnemonic and operands):
0xB0 0x61 ; Load register AL with 97 (61 hex)
Machine code (Opcode Operand)
Assembler Disassembler
StrongCorrespondence
StrongCorrespondence
MOV AL <=> 0xB0

8. LLVM
https://lowlevelbits.org/bitcode-demystified/

9. 1. C / C++
2. Rust
3. Go
4.
5.
6.
7.
Compilation Targets
1. x86
2. x86-64
3. ARM
4. MIPS
5. PowerPC
High-Level
Languages Machine Code
Common
Targets

10. 1. C / C++
2. Rust
3. Go
4. Java
5. C#
6. Kotlin
7. Javascript
Compilation Targets
1. JVM Bytecode
2. MS CIL
3. LLVM-IR
(BitCode)
4. ASM.JS
5. WASM
High-Level
Languages
Low-Level
Languages
More Targets

11. 1. JVM Bytecode
2.
3.
4.
5.
JVM Bytecode 1.
2. x86-64
3.
4.
5.
Low-Level
Languages
Machine Code
● JVM
Desktop Virtual
Machines
Graal Substrate

12. 1.
2. MS CIL
3.
4.
5.
MS CIL
Low-Level
Languages
1.
2.
3.
4. MS CLR
Desktop Virtual
Machines

13. 1.
2.
3. LLVM-IR
(BitCode)
4.
5.
LLVM BitCode 1. x86
2. x86-64
3. ARM
4. MIPS
5. PowerPC
Low-Level
Languages
Machine Code
● Graal Sulong
Desktop Virtual
Machines
● asm.js
● WASM
Virtual
Machine Code

14. 1.
2.
3.
4. ASM.JS
5.
ASM.JS
Low-Level
Languages
1. SpiderMonkey
2. V8
3.
4.
Virtual Machines

15. WebAssembly: What?
WebAssembly (abbreviated wasm)
● A stack-based virtual machine architecture (no registers).

16. WebAssembly: What?
WebAssembly (abbreviated wasm)
● A stack-based virtual machine architecture (no registers).
● In a way, the next evolution of asm.js and PNaCl

17. WebAssembly X asm.js
asm.js (text) Wasm (bytes)
(x+y)|0 => i32.add
f()|0 => call
HEAP32[i>>2]|0 => i32.load

18. WebAssembly: What?
WebAssembly (abbreviated wasm)
● A stack-based virtual machine architecture (no registers).
● In a way, the next evolution of asm.js and PNaCl
● An easy, portable compilation target of high-level languages like
C/C++/Rust, enabling deployment on the web for client and server
applications.

19. WebAssembly: What?
WebAssembly (abbreviated wasm)
● A stack-based virtual machine architecture (no registers).
● In a way, the next evolution of asm.js and PNaCl
● An easy, portable compilation target of high-level languages like
C/C++/Rust, enabling deployment on the web for client and server
applications.
● A set of 1-byte opcodes encoded in a size- and load-time-efficient binary
format and corresponding mnemonics

20. WebAssembly: What?
WebAssembly (abbreviated wasm)
● A stack-based virtual machine architecture (no registers).
● In a way, the next evolution of asm.js and PNaCl
● An easy, portable compilation target of high-level languages like
C/C++/Rust, enabling deployment on the web for client and server
applications.
● A set of 1-byte opcodes encoded in a size- and load-time-efficient binary
format and corresponding mnemonics
● Able to provide predictable performance (difficult for languages w/ GC and
really difficult with dynamically-typed languages)

21. WebAssembly: Features
● Transpiling to native machine code is super fast
● No runtime library
● Can call and use exported functions and linear memory from JS
● Can export functions and linear memory to JS
● No GC for now. Single linear memory space (a byte array).
That’s why Go compiled to WASM is bigger than C/C++ and Rust (needs to
also compile its own garbage collector to WASM, just like Kotlin and Java).
● Runs inside a sandboxed environment, so it's inherently more secure than
running a C source code compiled to x86 or ARM architectures

22. WebAssembly: Uses
● Avoid plugins like Flash, Java Applets (deprecation, friction, security)
● Avoid rewriting large code bases in C/C++/etc - Just compile it
● Port high-performance C/C++ libs to be called by JS
● Ship audio/video codecs for rare formats
● Audio / Video / Image editing / processing
(https://github.com/agnivade/shimmer)
● 3D editing (AutoCAD: https://web.autocad.com/ - 36.8 MB)
● 3D Games (Tanks! w/ Unity3D: https://webassembly.org/demo/Tanks/)

23. 1.
2.
3.
4.
5. WASM
WASM: Where to run?
Low-Level
Languages 1. Browsers
2. Desktop
3. Smart Contract VM
Virtual Machines
1. EOS
2. Parity
Substrate
3. Dfinity
4. TrueBit
Blockchain

24. Text format (.wat)
● Encodes a WASM module with
all its contained definitions in a
way that is equivalent to the
binary format.
● Uses S-Expressions
C++ Binary Text
int factorial(int n) {
if (n == 0)
return 1;
else
return n * factorial(n-1);
}
20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b
get_local 0
i64.const 0
i64.eq
if i64
i64.const 1
else
get_local 0
get_local 0
i64.const 1
i64.sub
call 0
i64.mul
end

25. Text format (.wat)
The shortes possible WASM module:
Text
(module)

26. Text format (.wat)
The shortes possible WASM module:
Binary
0000000: 0061 736d ; WASM_BINARY_MAGIC
0000004: 0100 0000 ; WASM_BINARY_VERSION

27. C Example
C
// demo.c
DLL_EXPORT
int add(int lhs, int rhs) {
return lhs + rhs;
}
#define DLL_EXPORT __attribute__
((visibility ("default")))

28. C Example
Compile to WASM:
clang -mwasm demo.c -o
demo.wasm
C
// demo.c
DLL_EXPORT
int add(int lhs, int rhs) {
return lhs + rhs;
}
#define DLL_EXPORT __attribute__
((visibility ("default")))

29. Loading and
calling
fetch('demo.wasm').then(response =>
Wasm.compile(response.body.getReader())
).then(instance => {
alert("1 + 2 = " + instance.exports.add( 1, 2));
});

30. C Example
WAT
(module
(func $add (param $lhs i32) (param $rhs
i32) (result i32)
(i32.add (get_local $lhs) (get_local
$rhs))
)
(export "add" $add)
)

31. Go Example
● Go 1.11 (2018-08-24)
added an
experimental port to
WebAssembly.
Go
package main
import "fmt"
func main() {
fmt.Println("Hello, WebAssembly!")
}
$ GOOS=js GOARCH=wasm go build -o main.wasm

32. Go Example
index.html
<html>
<head>
<meta charset="utf-8">
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"),
go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body></body>
</html>
$ GOOS=js GOARCH=wasm go build -o
main.wasm
$ cp "$(go env
GOROOT)/misc/wasm/wasm_exec.js" .
$ goexec 'http.ListenAndServe(":8080",
http.FileServer(http.Dir(".")))'

33. Go + LLVM
https://go.googlesource.com/gollvm/

34. Links
1. https://github.com/mbasso/awesome-wasm
2. https://chinagdg.org/2018/08/liftoff-a-new-baseline-compiler-for-webasse
mbly-in-v8/
3. https://github.com/golang/go/wiki/WebAssembly

35. Thanks!
Contact me:
Elifarley Cruz
elifarley@gmail.com
http://about.me/elifarley