Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React, Powered by WebAssembly

2,766 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

React, Powered by WebAssembly

  1. 1. React, Powered by WebAssembly Jay Phelps | @_jayphelps
  2. 2. Jay Phelps | @_jayphelps WebAssembly will change the way we think of "web apps"
  3. 3. Jay Phelps Chief Software Architect |
  4. 4. Support, Training, Mentorship, and More https://www.thisdot.co/
  5. 5. So...what is WebAssembly? aka wasm Jay Phelps | @_jayphelps
  6. 6. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  7. 7. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  8. 8. Jay Phelps | @_jayphelps Fast to load and execute
  9. 9. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  10. 10. Jay Phelps | @_jayphelps 0x6a01101010
  11. 11. Jay Phelps | @_jayphelps Intended (mostly) as a compilation target
  12. 12. int factorial(int n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }
  13. 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. 14. Jay Phelps | @_jayphelps Safe and portable just like JavaScript
  15. 15. Jay Phelps | @_jayphelps “shortcut to your JavaScript engine's optimizer” Ben Smith, Chrome team
  16. 16. Jay Phelps | @_jayphelps Is it going to kill JavaScript?
  17. 17. Jay Phelps | @_jayphelps Nope!says browser vendors *
  18. 18. Jay Phelps | @_jayphelps *well...maybe...some day...a really long time from now (my own opinion)
  19. 19. Jay Phelps | @_jayphelps Will we compile JavaScript to WebAssembly?
  20. 20. Jay Phelps | @_jayphelps JavaScript is an extremely dynamic language
  21. 21. Jay Phelps | @_jayphelps Compiling JavaScript to WebAssembly would be all around slower
  22. 22. Jay Phelps | @_jayphelps v1 MVP is best suited for languages like C/C++ and Rust
  23. 23. Jay Phelps | @_jayphelps But other languages soon! Things like Java, OCaml, and even new ones
  24. 24. Jay Phelps | @_jayphelps TurboScript
  25. 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. 26. Jay Phelps | @_jayphelps When should I target WebAssembly?
  27. 27. Jay Phelps | @_jayphelps Heavily CPU-bound number computations
  28. 28. Jay Phelps | @_jayphelps Games
  29. 29. Jay Phelps | @_jayphelps You'll likely consume compiled WebAssembly binaries even sooner
  30. 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. 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. 32. Jay Phelps | @_jayphelps Other use cases are imminent
  33. 33. Jay Phelps | @_jayphelps What was that binary stuff?
  34. 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. 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. 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. 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. 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. 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. 40. Jay Phelps | @_jayphelps Binary can be a little intimidating
  41. 41. Jay Phelps | @_jayphelps Protip: don't worry about it (unless of course, you want to)
  42. 42. Jay Phelps | @_jayphelps Tooling will eventually make it a non-issue
  43. 43. Jay Phelps | @_jayphelps Textual representation to the rescue!
  44. 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. 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. 46. Jay Phelps | @_jayphelps Let's learn the fundamentals
  47. 47. Jay Phelps | @_jayphelps WebAssembly is a stack machine language
  48. 48. Jay Phelps | @_jayphelps ...what's a stack machine?
  49. 49. Jay Phelps | @_jayphelps a data structure with two operations: push and pop Stack
  50. 50. stack
  51. 51. item stack
  52. 52. item stack push
  53. 53. item stack
  54. 54. item stack
  55. 55. item item stack
  56. 56. item item stack
  57. 57. item item stack
  58. 58. item item item stack
  59. 59. item item item stack
  60. 60. item item item stack
  61. 61. item item item stack pop
  62. 62. item item item stack
  63. 63. item item stack
  64. 64. item stack item
  65. 65. item stack item
  66. 66. item stack
  67. 67. stack item
  68. 68. stack item
  69. 69. stack
  70. 70. Jay Phelps | @_jayphelps last in, first out order (LIFO)
  71. 71. Jay Phelps | @_jayphelps stack machine: instructions on a stack
  72. 72. 1 + 2
  73. 73. i32.add 0x6a opcode mnemonics 01101010
  74. 74. i32.const 1 i32.const 2 i32.add
  75. 75. i32.const 1 i32.const 2 i32.add i32.const 1
  76. 76. i32.const 1 i32.const 2 i32.add i32.const 2
  77. 77. i32.const 1 i32.const 2 i32.addi32.add
  78. 78. i32.const 1 i32.const 2 i32.add
  79. 79. stack i32.const 1 i32.const 2 i32.add
  80. 80. i32.const 1 i32.const 2 i32.add i32.const 1 stack 1
  81. 81. i32.const 1 i32.const 2 i32.add i32.const 1 stack 1
  82. 82. i32.const 1 i32.const 2 i32.add i32.const 2 stack 2 1
  83. 83. i32.const 1 i32.const 2 i32.add i32.const 2 stack 2 1
  84. 84. i32.const 1 i32.const 2 i32.addi32.add stack 1 2
  85. 85. i32.const 1 i32.const 2 i32.addi32.add stack 1 2
  86. 86. i32.const 1 i32.const 2 i32.addi32.add stack 3
  87. 87. i32.const 1 i32.const 2 i32.addi32.add stack 3
  88. 88. i32.const 1 i32.const 2 i32.add Jay Phelps | @_jayphelps
  89. 89. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  90. 90. Jay Phelps | @_jayphelps Compilers usually apply optimizations real-world output is often less understandable to humans
  91. 91. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  92. 92. i32.const 3 call $log Jay Phelps | @_jayphelps
  93. 93. Jay Phelps | @_jayphelps Most tooling supports an Abstract Syntax Tree (AST) still compiled and evaluated as a stack machine
  94. 94. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  95. 95. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps
  96. 96. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps s-expressions
  97. 97. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps s-expressions Yep, looks like Lisp
  98. 98. Jay Phelps | @_jayphelps What's missing?
  99. 99. Jay Phelps | @_jayphelps Direct access to Web APIs
  100. 100. Jay Phelps | @_jayphelps Direct access to Web APIs You have call into JavaScript, right now
  101. 101. Jay Phelps | @_jayphelps Garbage collection
  102. 102. Jay Phelps | @_jayphelps Garbage collection necessary for better interop with JavaScript and WebIDL
  103. 103. Jay Phelps | @_jayphelps Multi-threading
  104. 104. Jay Phelps | @_jayphelps Multi-threading Sounds likely we'll get very close to "real" threads
  105. 105. Jay Phelps | @_jayphelps There's more, but advancing very quickly!
  106. 106. Jay Phelps | @_jayphelps How is this going to impact React?
  107. 107. Jay Phelps | @_jayphelps React could create a WebAssembly reconciler for Fiber
  108. 108. Jay Phelps | @_jayphelps Fiber
  109. 109. Jay Phelps | @_jayphelps • pause work and come back to it later Fiber
  110. 110. Jay Phelps | @_jayphelps • pause work and come back to it later • assign priority to different types of work Fiber
  111. 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. 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. 113. Jay Phelps | @_jayphelps Lin Clark - A Cartoon Intro to Fiber https://goo.gl/bXsYhY
  114. 114. Jay Phelps | @_jayphelps Ember’s “Glimmer” VM is being written in Rust compiled to WebAssembly
  115. 115. Jay Phelps | @_jayphelps React components could run in WebAssembly e.g. writing them in Reason
  116. 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. 117. Jay Phelps | @_jayphelps This is possible right now, but not yet ideal missing direct access to the DOM
  118. 118. Jay Phelps | @_jayphelps React.js?
  119. 119. Jay Phelps | @_jayphelps React.js?
  120. 120. Jay Phelps | @_jayphelps How do I get started now?
  121. 121. Jay Phelps | @_jayphelps webassembly.org
  122. 122. Jay Phelps | @_jayphelps https://mbebenita.github.io/WasmExplorer/
  123. 123. Jay Phelps | @_jayphelps emcc main.c -s WASM=1 -o app.html
  124. 124. Jay Phelps | @_jayphelps Webpack is adding support (!!!)
  125. 125. Jay Phelps | @_jayphelps Webpack is adding support (!!!) They received a $125,000 grant from MOSS
  126. 126. Jay Phelps | @_jayphelps import('./add.wasm').then(module => { const result = module.add(1, 2); console.log(result); });
  127. 127. Jay Phelps | @_jayphelps Imagine an rust-loader / reason-loader
  128. 128. Jay Phelps | @_jayphelps Supported in all modern browsers
  129. 129. Jay Phelps | @_jayphelps The revolution is just beginning
  130. 130. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  131. 131. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  132. 132. Jay Phelps | @_jayphelps Thanks! @_jayphelps

×