WebAssembly (WASM) allows code written in languages like C/C++ to run natively in web browsers. WASM code compiles to a binary format that runs with similar performance to native machine code. It provides a compilation target for languages other than JavaScript to run on the web. WASM code runs in a secure sandbox and provides consistent, predictable performance across browsers. It enables code reuse between native and web environments.

1. WebAssembly brings
the Web to a new era
Boyan Mihaylov
@bmihaylov

2. WebAssembly (WASM) is compiler
target for programs on the Web
@bmihaylov

3. function add(a, b) {
return a + b;
}
@bmihaylov

4. @bmihaylov

5. @bmihaylov
weak typing, implicit conversion
…not really consistent
string – string = number ?
“+” is for concatenation
“+ +” is for addition ?

6. @bmihaylov

7. JavaScript performance over the years
1995 2008 2017
Browser wars:
the introduction of JIT
?
Node.js
@bmihaylov

8. Reusing code on the Web
@bmihaylov

9. What doesWebAssembly bring?
@bmihaylov

10. WebAssembly runs in a memory-safe
sandboxed environment
@bmihaylov

11. @bmihaylov
VM
JavaScript WebAssembly
GC Compiler …
APIs
Rendering DOM + CSSOM
WebGL
WebSockets
WebAudio IndexedDB
ServiceWorkers …
Resource
<script> HTML, CSS, SVG, …
Audio
Storage
Network
Graphics
…
Sandbox, Same-origin policy, …

12. WebAssembly provides consistent,
predictable performance
@bmihaylov

13. @bmihaylov
Parse
Compile
+
optimize
Re-
optimize
Execute GC
Decode
Compile
+
optimize
Execute

14. WebAssembly enables code reusability
between native andWeb
@bmihaylov

15. Joint venture
@bmihaylov

16. Where is WebAssembly useful?
@bmihaylov
Gaming industry
Unreal, Unity
Multimedia
AV1, FLIF, BPG
Libraries
OpenCV, Box2D, LibSass
Platform simulation / emulation
DOSBox, MAME, QEMU

17. Demo: Tanks
http://webassembly.org/demo/Tanks/
@bmihaylov

18. Demo: Video editor
https://github.com/shamadee/web-dsp
@bmihaylov

19. How to produceWebAssembly?
@bmihaylov
.c
C/C++ code
.wasm .html
WASM module HTML page Browser
compilation
loading with
JavaScript execution

20. @bmihaylov
Open Source LLVM to JavaScript compiler

21. emcc index.c –s WASM=1 –o index.js
@bmihaylov

22. How compilers work
@bmihaylov
Source
program
Intermediate
Representation (IR)
Assembly or
machine code
Frontend Backend
Static analysis
Semantic analysis
Code generation
Code optimization

23. How Emscripten works
@bmihaylov
.c / .cpp LLVM IR .js
clang
Fastcomp
(LLVM Backend)

24. asm.js is an extraordinarily optimizable,
low-level subset of JavaScript
@bmihaylov

25. asm.js
@bmihaylov
function () {
“use asm”;
function add(a, b) {
a = a | 0;
b = b | 0;
return a + b | 0;
}
return { add: add };
}

26. asm.js performance
@bmihaylov http://kripken.github.io/mloc_emscripten_talk/#/28

27. WebAssembly = asm.js done right
@bmihaylov

28. From asm.js to WebAssembly
@bmihaylov
.c / .cpp LLVM IR asm.js
clang Fastcomp
WASM
?

29. Binaryen is a compiler and toolchain
infrastructure library for WebAssembly
rhymes withTargaryen (GoT)
@bmihaylov

30. From asm.js to WebAssembly
@bmihaylov
.c / .cpp LLVM IR asm.js
clang Fastcomp
WASM
asm2wasm

31. New WebAssembly Backend (unstable)
@bmihaylov
.c / .cpp LLVM IR .wasm
clang
LLVMWASM
Backend

32. DEMO: From C toWebAssembly
@bmihaylov

33. The distributable, loadable, and
executable unit of code in
WebAssembly is called a module.
@bmihaylov https://github.com/WebAssembly/design/blob/master/Modules.md

34. LoadingWebAssembly
@bmihaylov
.wasm
ArrayBuffer
WASM
module
WASM
instance
fetch
WebAssembly.compile
WebAssembly.instantiate

35. WebAssembly modules are clonable
@bmihaylov
.wasm
ArrayBuffer
WASM
module
WASM
instance
IndexedDB
store / load

36. (Future) integration with ES6 modules
@bmihaylov
<script type=“module”>
import * as app from ‘app.wasm’;
console.log(app.add(2, 3));
</script>

37. DEMO: WebAssembly  JavaScript
@bmihaylov

38. 10 00 0F 20 01 7F 03 80 7F 01
0F 80 80 00 01 0F 80 80 80 00
01 97 46 6C 0B 00 10 00 0F 20
01 7F 03 80 7F 01 0F 80 80 80
00 01 97 46 6C 0B 10 00 0F 20
01 7F 03 80 7F 01 0F 80 80 00
46 6C 0B 10 10 00 0F 20 01 7F
03 80 7F 46 6C 0B 10 10 00 0F
@bmihaylov
Binary can be a bit overwhelming

39. Textual representation
@bmihaylov
int add(int a, int b) {
return a + b;
}
(module
(export “add” (func $add))
(func $add (param $0 i32) (param $1 i32) (result i32)
(i32.add
(get_local $1)
(get_local $0)
)
)
)
.c
.wast

40. @bmihaylov
WebAssembly Explorer
https://mbebenita.github.io/WasmExplorer/

41. @bmihaylov http://caniuse.com/#search=WebAssembly

42. What’s next?
@bmihaylov

43. Direct access toWebAPIs
today everything goes through JavaScript
@bmihaylov

44. Integration with browser’s
garbage collection
for better interop with JavaScript & WebAPIs
@bmihaylov

45. Multi-threading
low-level buildings blocks for shared memory
between threads, atomics and futexes
@bmihaylov

46. @bmihaylov
“We think Swift should be
everywhere and used by everyone.”
Craig Federighi
Apple’sWWDC 2015
https://media.wired.com/photos/593758ff5321273fc0f945e5/master/w_2666,c_limit/AppleEventTA-539935348.jpg

47. @bmihaylov

48. @bmihaylov
“WebAssembly fills in the gaps that would
be awkward to fill with JavaScript.”
Eric Elliott
https://jeremybutterfield.files.wordpress.com/2014/12/conclusion.jpg

49. @bmihaylov

50. WebAssembly makes the Web
just a compiler target away
Boyan Mihaylov / @bmihaylov / boyan.in