WebAssembly (aka wasm) is a new, standardized compilation target for the web, available in all modern browsers. But since it's so low level it can be difficult to see how it will revolutionize the future generations of React apps and potentially even power React itself. In this talk Jay will reveal what it is, how you can use it today, and the incredible opportunities it will continue to unlock. Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.

1. React,
Powered by
WebAssembly
Jay Phelps | @_jayphelps

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

3. Jay Phelps
Chief Software Architect |

4. Support, Training, Mentorship, and More
https://www.thisdot.co/

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

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 be all around slower

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

23. Jay Phelps | @_jayphelps
But other languages soon!
Things like Java, OCaml, and even new ones

24. Jay Phelps | @_jayphelps
TurboScript

25. 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;
}

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

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

28. Jay Phelps | @_jayphelps
Games

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

30. Jay Phelps | @_jayphelps
Oxidizing Source Maps with Rust and WebAssembly
https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/
5.89 times faster!

31. Jay Phelps | @_jayphelps
d3-wasm-force
https://github.com/ColinEberhardt/d3-wasm-force
const simulation = d3wasm.forceSimulation(graph.nodes, true)
.force('charge', d3wasm.forceManyBody())
.force('center', d3wasm.forceCenter(width / 2, height / 2))
.force('link', d3wasm.forceLink().links(graph.links).id(d => d.id))
.stop();

32. Jay Phelps | @_jayphelps
Other use cases are imminent

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
Tooling will eventually make it a non-issue

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

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
(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
)

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

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

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

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

50. stack

51. item
stack

52. item
stack
push

53. item
stack

54. item
stack

55. item
item
stack

56. item
item
stack

57. item
item
stack

58. item
item
item
stack

59. item
item
item
stack

60. item
item
item
stack

61. item
item
item
stack
pop

62. item
item
item
stack

63. item
item
stack

64. item
stack
item

65. item
stack
item

66. item
stack

67. stack
item

68. stack
item

69. stack

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

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

72. 1 + 2

73. i32.add 0x6a
opcode mnemonics
01101010

74. i32.const 1
i32.const 2
i32.add

75. i32.const 1
i32.const 2
i32.add
i32.const 1

76. i32.const 1
i32.const 2
i32.add
i32.const 2

77. i32.const 1
i32.const 2
i32.addi32.add

78. i32.const 1
i32.const 2
i32.add

79. stack
i32.const 1
i32.const 2
i32.add

80. i32.const 1
i32.const 2
i32.add
i32.const 1
stack
1

81. i32.const 1
i32.const 2
i32.add
i32.const 1
stack
1

82. i32.const 1
i32.const 2
i32.add
i32.const 2
stack
2
1

83. i32.const 1
i32.const 2
i32.add
i32.const 2
stack
2
1

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

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

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

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

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

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

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

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

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

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

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

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

96. (call $log
(i32.add
(i32.const 1)
(i32.const 2)
)
)
Jay Phelps | @_jayphelps
s-expressions

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

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

99. Jay Phelps | @_jayphelps
Direct access to Web APIs

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

101. Jay Phelps | @_jayphelps
Garbage collection

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

103. Jay Phelps | @_jayphelps
Multi-threading

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

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

106. Jay Phelps | @_jayphelps
How is this going to impact React?

107. Jay Phelps | @_jayphelps
React could create a WebAssembly reconciler for Fiber

108. Jay Phelps | @_jayphelps
Fiber

109. Jay Phelps | @_jayphelps
• pause work and come back to it later
Fiber

110. Jay Phelps | @_jayphelps
• pause work and come back to it later
• assign priority to different types of work
Fiber

111. Jay Phelps | @_jayphelps
• pause work and come back to it later
• assign priority to different types of work
• reuse previously completed work
Fiber

112. Jay Phelps | @_jayphelps
• pause work and come back to it later
• assign priority to different types of work
• reuse previously completed work
• abort work if it's no longer needed
Fiber

113. Jay Phelps | @_jayphelps
Lin Clark - A Cartoon Intro to Fiber
https://goo.gl/bXsYhY

114. Jay Phelps | @_jayphelps
Ember’s “Glimmer” VM is being written in Rust
compiled to WebAssembly

115. Jay Phelps | @_jayphelps
React components could run in WebAssembly
e.g. writing them in Reason

116. Jay Phelps | @_jayphelps
let component = ReasonReact.statelessComponent("Page");
let handleClick = (_event, _self) => Js.log("clicked!");
let make = (~message, _children) => {
...component,
render: self =>
<div onClick={self.handle(handleClick)}>
{ReasonReact.stringToElement(message)}
</div>
};

117. Jay Phelps | @_jayphelps
This is possible right now, but not yet ideal
missing direct access to the DOM

118. Jay Phelps | @_jayphelps
React.js?

119. Jay Phelps | @_jayphelps
React.js?

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

121. Jay Phelps | @_jayphelps
webassembly.org

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

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

124. Jay Phelps | @_jayphelps
Webpack is adding support (!!!)

125. Jay Phelps | @_jayphelps
Webpack is adding support (!!!)
They received a $125,000 grant from MOSS

126. Jay Phelps | @_jayphelps
import('./add.wasm').then(module => {
const result = module.add(1, 2);
console.log(result);
});

127. Jay Phelps | @_jayphelps
Imagine an rust-loader / reason-loader

128. Jay Phelps | @_jayphelps
Supported in all modern browsers

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

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

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

132. Jay Phelps | @_jayphelps
Thanks!
@_jayphelps