Did you ever want to port that cool game you built to the browser? Or have your 3D design app work there as well? It's already possible now, but it will get even better in the future! We have asm.js as a subset of JavaScript, optimized for use cases like games, compression or image editing. Now WebAssembly promises to take this one step further by reducing storage size and decoding time, while providing the same safe sandboxed environment with near-native performance. It takes your native code, no matter if C or Rust, and turns that into something that runs blazingly fast in your browser.

1. WebAssembly for the rest of us
Mozilla Dev Roadshow, Düsseldorf
Jan-Erik Rediger — @badboy_ | 2017-05-14

2. Amsterdam 16 - 17 May
2017
{ WebAssembly for the rest of us
Jan-Erik Rediger — @badboy_

3. Zen Garden
(WebAssembly Demo)

4. Jan-Erik Rediger
@badboy_
Organizer
Work / Tech Speaker

7. What is WebAssembly?
Binary executable format for the web
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b

8. What is WebAssembly?
General purpose virtual architecture
get_local $0
i32.const 2
i32.add
i32.const 42
i32.eq
return

9. What is WebAssembly?
Compiler target
Compiler

10. What is WebAssembly?
Open standard

12. What is WebAssembly not?

13. What is WebAssembly not?
Replacement for JavaScript

14. What is WebAssembly not?
Replacement for JavaScript
Programming Language

15. What is WebAssembly not?
Replacement for JavaScript
Programming Language
A good target for every dynamic language

16. Why WebAssembly?

17. 1995

18. 2008

19. 2013: asm.js
Research project

20. Type Annotations in JavaScript
function add(x, y) {
return (x + y);
}

21. Type Annotations in JavaScript
function add(x, y) {
* x = x|0; // <- parameter type annotation
y = y|0;
* return (x + y) | 0;
} // ^- return type annotation

22. Linear memory access
from "Introduction to WebAssembly" by Rasmus Andersson

23. Linear memory access
size_t strlen(char *ptr) {
char *curr = ptr;
while (*curr != 0) {
curr++;
}
return (curr - ptr);
}

24. Linear memory access
function strlen(ptr) {
ptr = ptr|0;
var curr = 0;
curr = ptr;
while (HEAP8[curr]|0 != 0) {
curr = (curr + 1)|0;
}
return (curr - ptr)|0;
}

25. Linear memory access
function strlen(ptr) {
ptr = ptr|0;
var curr = 0;
curr = ptr;
* while (HEAP8[curr]|0 != 0) {
curr = (curr + 1)|0;
}
return (curr - ptr)|0;
}

26. Why not use asm.js?

27. Pros:
"It's just JavaScript"
It's fast
Why not use asm.js?

28. Pros:
"It's just JavaScript"
It's fast
Cons:
Informal spec
No speed guarantuees
Hard to extend
No 64-bit integers
Why not use asm.js?

29. Why WebAssembly?

30. Why WebAssembly?
Smaller than asm.js

31. Why WebAssembly?
Smaller than asm.js
Faster parsing

32. Why WebAssembly?
Smaller than asm.js
Faster parsing
Freedom to extend

33. Why WebAssembly?
Smaller than asm.js
Faster parsing
Freedom to extend
Formal specification

34. Use cases
Game Engines {
Multimedia
Performance
Libraries
64-bit math
Tanks Demo
Zen Garden

35. Use cases
Game Engines
Multimedia {
Performance
Libraries
64-bit math
Image/Video editing
Image recognition
Live video augmentation
CAD applications

36. Use cases
Game Engines
Multimedia
Performance {
Libraries
64-bit math
Password store
Encryption
Compression
Platform simulation

37. Use cases
Game Engines
Multimedia
Performance
Libraries {
64-bit math
OpenCV
Box2D
LibSass
DICOM (Medical Image File
Format)

38. Use cases
Game Engines
Multimedia
Performance
Libraries
64-bit math {
MAME
SHA512
Physic calculations

39. How to use it
Use the compiler!
Compiler

40. open source LLVM-based compiler from C and C++* to JavaScript
* and Rust

41. open source LLVM-based compiler from C and C++* to asm.js
* and Rust

42. open source LLVM-based compiler from C and C++* to WebAssembly
* and Rust

43. Some C code
int half(int x)
{
return x / 2;
}

44. Compile it
clang -O3
-c half.c -o half.o

45. Compile it
emcc -O3
-s WASM=1 -s SIDE_MODULE=1
half.c -o half.wasm

46. Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

47. Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

48. Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

49. Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

50. Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 02 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

51. Wast (text representation)
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "half" (func $half))
(func $half (param $0 i32) (result i32)
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

52. Wast (text representation)
(module
* (table 0 anyfunc)
* (memory $0 1)
* (export "memory" (memory $0))
* (export "half" (func $half))
(func $half (param $0 i32) (result i32)
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

53. Wast (text representation)
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
* (export "half" (func $half))
(func $half (param $0 i32) (result i32)
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

54. Wast (text representation)
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "half" (func $half))
(func $half (param $0 i32) (result i32)
* (i32.div_s
* (get_local $0)
* (i32.const 2)
)
)
)

55. JavaScript API
fetch('half.wasm')
.then(data => data.arrayBuffer())
.then(buf => WebAssembly.compile(buf))
.then(mod => WebAssembly.instantiate(mod))
.then(ins => alert(ins.exports.half(128)))
Run code

56. Available in Rust!
rustup target add wasm32-unknown-emscripten
cargo build --target wasm32-unknown-emscripten
Check out hellorust.com/wasm

57. More tooling: WasmExplorer

58. More tooling: Wasm Fiddle

59. WebAssembly's future

60. WebAssembly's future
Threads

61. WebAssembly's future
Threads
SIMD

62. WebAssembly's future
Threads
SIMD
Feature-testing

63. WebAssembly's future
Threads
SIMD
Feature-testing
GC/DOM/Web API integration

65. { If you're a Native developer,
the Web is just a compiler
target away.
by @callahad

66. { If you're a Web developer,
you can leverage the
enormous world of native
libraries.
by @callahad

67. { Both worlds have to learn
from each other to make the
most of this.
by @callahad

68. Want to know more?
Want to help?
webassembly.org

69. Want to play around using Rust?
hellorust.com/wasm

70. Amsterdam 16 - 17 May
2017
{ Thank you!
Jan-Erik Rediger — @badboy_

71. Sources & Credit
Code File: Pham Thi Dieu Linh, The Noun Project, CC BY 3.0
Gears: Gregor Cresnar, The Noun Project, CC BY 3.0
Linear Memory: Introduction to WebAssembly
Last quotes: @callahad