Presented at Jazoon, April 28th, 2017 A revolution is about to begin. WebAssembly (aka wasm) is shipping in all modern browsers, but since it’s (intentionally) very low level, it can be difficult to understand how it will be critical to future web applications–and definitely not just games and C++! In this talk, Jay will demystify stack assembly languages like WebAssembly, even if you have zero experience with assembly and linear memory.

1. WebAssembly
Demystified
Jay Phelps | @_jayphelps

2. Jay Phelps | @_jayphelps
We're on the brink of a revolution

3. Jay Phelps | @_jayphelps
WebAssembly will change the way
we think of "web apps"

4. Senior Software Engineer |
@_jayphelps
Jay Phelps

5. Jay Phelps | @_jayphelps
So...what is WebAssembly? aka wasm

6. Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web

7. Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web

8. Jay Phelps | @_jayphelps
Fast to load and execute

9. Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web

10. Jay Phelps | @_jayphelps
0x6a01101010

11. Jay Phelps | @_jayphelps
Intended (mostly) as a compilation target

12. int factorial(int n) {
if (n == 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}

13. int factorial(int n) {
if (n == 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
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 06 81 80 80 80 00 00 0A
9D 80 80 80 00 01 97 80 80
80 00 00 20 00 41 00 46 04
40 41 01 0F 0B 20 00 41 01
6B 10 00 20 00 6C 0B

14. Jay Phelps | @_jayphelps
Safe and portable
just like JavaScript

15. Jay Phelps | @_jayphelps
“shortcut to your JavaScript engine's optimizer”
Ben Smith, Chrome team

16. Jay Phelps | @_jayphelps
Is it going to kill JavaScript?

17. Jay Phelps | @_jayphelps
Nope!says browser vendors
*

18. Jay Phelps | @_jayphelps
*well...maybe...some day...a really long time from now
(my own opinion)

19. Jay Phelps | @_jayphelps
Will we compile JavaScript to WebAssembly?

20. Jay Phelps | @_jayphelps
JavaScript is an extremely dynamic language

21. Jay Phelps | @_jayphelps
Compiling JavaScript to WebAssembly would
almost certainly run slower

22. Jay Phelps | @_jayphelps
WebAssembly is still missing things

23. Jay Phelps | @_jayphelps
v1 MVP is best suited for languages like
C/C++ and Rust

24. Jay Phelps | @_jayphelps
But other languages soon!

25. Jay Phelps | @_jayphelps
TurboScript

26. Jay Phelps | @_jayphelps
class Coordinates {
x: float32;
y: float32;
z: float32;
constructor(x: float32, y: float32, z: float32): Vect3 {
this.x = x;
this.y = y;
this.z = z;
}
}
export function example() {
let position = new Coordinates(x, y, z);
// later
delete position;
}

27. Jay Phelps | @_jayphelps
When should I target WebAssembly?

28. Jay Phelps | @_jayphelps
Heavily CPU-bound number computations

29. Jay Phelps | @_jayphelps
Games

30. https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html

31. Jay Phelps | @_jayphelps
Other use cases coming sooner than you might think!

32. Jay Phelps | @_jayphelps
You'll likely consume compiled
WebAssembly binaries even sooner

33. Jay Phelps | @_jayphelps
What was that binary stuff?

34. int factorial(int n) {
if (n == 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
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 06 81 80 80 80 00 00 0A
9D 80 80 80 00 01 97 80 80
80 00 00 20 00 41 00 46 04
40 41 01 0F 0B 20 00 41 01
6B 10 00 20 00 6C 0B

35. 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 06 81 80 80 80 00 00 0A
9D 80 80 80 00 01 97 80 80
80 00 00 20 00 41 00 46 04
40 41 01 0F 0B 20 00 41 01
6B 10 00 20 00 6C 0B

36. 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 06 81 80 80 80 00 00 0A
9D 80 80 80 00 01 97 80 80
80 00 00 20 00 41 00 46 04
40 41 01 0F 0B 20 00 41 01
6B 10 00 20 00 6C 0B

37. 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 06 81 80 80 80 00 00 0A
9D 80 80 80 00 01 97 80 80
80 00 00 20 00 41 00 46 04
40 41 01 0F 0B 20 00 41 01
6B 10 00 20 00 6C 0B

38. 03 82 80 80 80 0
81 80 80 80 00 0
80 80 00 01 97 8
00 20 00 41 00 4

39. 03 82 80 80 80 0
81 80 80 80 00 0
80 80 00 01 97 8
00 20 00 41 00 4

40. Jay Phelps | @_jayphelps
Binary can be "a little" intimidating

41. Jay Phelps | @_jayphelps
Protip: don't worry about it
(unless of course, you want to)

42. Jay Phelps | @_jayphelps
Textual representation to the rescue!

43. Jay Phelps | @_jayphelps
(func $factorial (param $n i32) (result i32)
get_local $n
i32.const 0
i32.eq
if $if0
i32.const 1
return
end $if0
get_local $n
i32.const 1
i32.sub
call $factorial
get_local $n
i32.mul
)

44. Jay Phelps | @_jayphelps
(func $factorial (param $n i32) (result i32)
get_local $n
i32.const 0
i32.eq
if $if0
i32.const 1
return
end $if0
get_local $n
i32.const 1
i32.sub
call $factorial
get_local $n
i32.mul
)

45. Jay Phelps | @_jayphelps
Let's learn the fundamentals

46. Jay Phelps | @_jayphelps
WebAssembly is a stack machine language

47. Jay Phelps | @_jayphelps
...what's a stack machine?

48. Jay Phelps | @_jayphelps
a data structure with two operations:
push and pop
Stack

49. item
stack
push

50. item
item
stack

51. item
item
item
stack

52. item
item
item
stack
pop

53. item
stack
item

54. stack
item

55. Jay Phelps | @_jayphelps
last in, first out order (LIFO)

56. Jay Phelps | @_jayphelps
stack machine: instructions on a stack

57. 1 + 2

58. i32.add 0x6a
opcode mnemonics
01101010

59. i32.const 1
i32.const 2
i32.add

60. i32.const 1
i32.const 2
i32.add
i32.const 1

61. i32.const 1
i32.const 2
i32.add
i32.const 2

62. i32.const 1
i32.const 2
i32.addi32.add

63. stack
i32.const 1
i32.const 2
i32.add

64. i32.const 1
i32.const 2
i32.add
i32.const 1
stack
1

65. i32.const 1
i32.const 2
i32.add
i32.const 2
stack
2
1

66. i32.const 1
i32.const 2
i32.addi32.add
stack
1
2

67. i32.const 1
i32.const 2
i32.addi32.add
stack
3

68. i32.const 1
i32.const 2
i32.add
Jay Phelps | @_jayphelps

69. i32.const 1
i32.const 2
i32.add
call $log
Jay Phelps | @_jayphelps

70. Jay Phelps | @_jayphelps
Compilers usually apply optimizations
real-world output is often less understandable to humans

71. i32.const 1
i32.const 2
i32.add
call $log
Jay Phelps | @_jayphelps

72. i32.const 3
call $log
Jay Phelps | @_jayphelps

73. Jay Phelps | @_jayphelps
Most tooling supports an Abstract Syntax Tree (AST)
still compiled and evaluated as a stack machine

74. i32.const 1
i32.const 2
i32.add
call $log
Jay Phelps | @_jayphelps

75. (call $log
(i32.add
(i32.const 1)
(i32.const 2)
)
)
Jay Phelps | @_jayphelps

76. (call $log
(i32.add
(i32.const 1)
(i32.const 2)
)
)
Jay Phelps | @_jayphelps
s-expressions
Yep, looks like Lisp

77. Jay Phelps | @_jayphelps
Source map support is likely coming, eventually.

78. Jay Phelps | @_jayphelps
How do I get started?

79. Jay Phelps | @_jayphelps

80. Jay Phelps | @_jayphelps
https://mbebenita.github.io/WasmExplorer/

81. Jay Phelps | @_jayphelps
webassembly.org

82. Jay Phelps | @_jayphelps
emcc main.c -s WASM=1 -o app.html

83. Jay Phelps | @_jayphelps
Firefox / Chrome support since March

84. Jay Phelps | @_jayphelps
Webpack is planning to add support (!!!)

85. Jay Phelps | @_jayphelps
Imagine a cpp-loader / rust-loader

86. Jay Phelps | @_jayphelps
What's missing?

87. Jay Phelps | @_jayphelps
Direct access to Web APIs
You have call into JavaScript, right now

88. Jay Phelps | @_jayphelps
Garbage collection
necessary for better interop with JavaScript and WebIDL

89. Jay Phelps | @_jayphelps
Multi-threading
Sounds likely we'll get very close to "real" threads

90. Jay Phelps | @_jayphelps
There's more, but advancing very quickly!

91. Jay Phelps | @_jayphelps
The revolution is just beginning

92. Jay Phelps | @_jayphelps
Join the discussions!
https://github.com/WebAssembly/design

93. Jay Phelps | @_jayphelps
Thanks!
@_jayphelps