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.

The WebAssembly Revolution Has Begun

622 views

Published on

Jay Phelps talks about WebAssembly (aka wasm) - a new, standardized compilation target for the web, shipping in all modern browsers. He reveals what it is, how we can use it today, and the incredible opportunities it will unlock in the years to come.

Jay Phelps is a Senior Software Engineer at Netflix.

--

QConSF, Nov 15th, 2017. Video to be publically released, early access available to QCon attendees: https://www.infoq.com/presentations/webassembly-wasm-intro

Published in: Software
  • Be the first to comment

The WebAssembly Revolution Has Begun

  1. 1. WebAssembly Jay Phelps | @_jayphelps The Revolutionhas begun
  2. 2. Jay Phelps | @_jayphelps WebAssembly will change the way we think of "web apps"
  3. 3. Senior Software Engineer | @_jayphelps Jay Phelps
  4. 4. Jay Phelps | @_jayphelps So...what is WebAssembly? aka wasm
  5. 5. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  6. 6. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  7. 7. Jay Phelps | @_jayphelps Fast to load and execute
  8. 8. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  9. 9. Jay Phelps | @_jayphelps 0x6a01101010
  10. 10. Jay Phelps | @_jayphelps Intended as a compilation target
  11. 11. int factorial(int n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }
  12. 12. 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
  13. 13. Jay Phelps | @_jayphelps Safe and portable just like JavaScript is
  14. 14. Jay Phelps | @_jayphelps Is it going to kill JavaScript?
  15. 15. Jay Phelps | @_jayphelps Nope!says browser vendors *
  16. 16. Jay Phelps | @_jayphelps *well...maybe...some day...a long time from now (my own opinion)
  17. 17. Jay Phelps | @_jayphelps Will we compile JavaScript to WebAssembly?
  18. 18. Jay Phelps | @_jayphelps JavaScript is an extremely dynamic language
  19. 19. Jay Phelps | @_jayphelps
  20. 20. Jay Phelps | @_jayphelps Compiling JavaScript to WebAssembly would run slower What about a something JavaScript-like?
  21. 21. Jay Phelps | @_jayphelps AssemblyScript, TurboScript, ThinScript, etc
  22. 22. Jay Phelps | @_jayphelps class Coordinates { x: i64; y: i64; z: i64; constructor(x: i64, y: i64, z: i64) { this.x = x; this.y = y; this.z = z; } } export function example() { let position = new Coordinates(10, 20, 30); // later delete position; }
  23. 23. Jay Phelps | @_jayphelps WebAssembly is still missing things for broad adoption
  24. 24. Jay Phelps | @_jayphelps v1 MVP is best suited for languages like C/C++ and Rust
  25. 25. Jay Phelps | @_jayphelps But other languages soon! Things like Java, OCaml, and even brand new ones
  26. 26. Jay Phelps | @_jayphelps type schoolPerson = Teacher | Director | Student(string); let greeting = (stranger) => switch stranger { | Teacher => "Hey professor!" | Director => "Hello director." | Student("Richard") => "Still here Ricky?" | Student(anyOtherName) => "Hey, " ++ anyOtherName ++ "." };
  27. 27. Jay Phelps | @_jayphelps When should I target WebAssembly right now?
  28. 28. Jay Phelps | @_jayphelps Heavily CPU-bound number computations
  29. 29. Jay Phelps | @_jayphelps Games Physics Simulation Encryption Compression Video Decoding Audio Mixing Language Detection
  30. 30. Jay Phelps | @_jayphelps Games Physics Simulation Encryption Compression Video Decoding Audio Mixing Language Detection
  31. 31. Jay Phelps | @_jayphelps
  32. 32. Jay Phelps | @_jayphelpshttps://goo.gl/yvV92X Demo
  33. 33. https://goo.gl/YWMpdp Demo
  34. 34. asm-dom https://goo.gl/XWBeme
  35. 35. Jay Phelps | @_jayphelps Other use cases just around the corner
  36. 36. Jay Phelps | @_jayphelps You'll likely consume compiled WebAssembly libraries even sooner
  37. 37. Jay Phelps | @_jayphelps What was that binary stuff?
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 03 82 80 80 80 0 81 80 80 80 00 0 80 80 00 01 97 8 00 20 00 41 00 4
  43. 43. 03 82 80 80 80 0 81 80 80 80 00 0 80 80 00 01 97 8 00 20 00 41 00 4
  44. 44. Jay Phelps | @_jayphelps Binary can be a little intimidating
  45. 45. Jay Phelps | @_jayphelps Protip: don't worry about it (unless of course, you want to)
  46. 46. Jay Phelps | @_jayphelps Textual representation to the rescue!
  47. 47. 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 )
  48. 48. 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 )
  49. 49. Jay Phelps | @_jayphelps WebAssembly is a stack machine language
  50. 50. Jay Phelps | @_jayphelps stack machine: instructions on a stack
  51. 51. 1 + 2
  52. 52. i32.add 0x6a opcode 01101010 mnemonic
  53. 53. stack i32.const 1 i32.const 2 i32.add
  54. 54. i32.const 1 i32.const 2 i32.add i32.const 1 stack 1
  55. 55. i32.const 1 i32.const 2 i32.add i32.const 2 stack 2 1
  56. 56. i32.const 1 i32.const 2 i32.addi32.add stack 1 2
  57. 57. i32.const 1 i32.const 2 i32.add stack 3 i32.add
  58. 58. Jay Phelps | @_jayphelps call $log i32.const 1 i32.const 2 i32.add
  59. 59. Jay Phelps | @_jayphelps Compilers usually apply optimizations real-world output is often less understandable to humans
  60. 60. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  61. 61. i32.const 3 call $log Jay Phelps | @_jayphelps
  62. 62. Jay Phelps | @_jayphelps Most tooling supports an Abstract Syntax Tree (AST) still compiled and evaluated as a stack machine
  63. 63. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  64. 64. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps
  65. 65. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps s-expressions Yep, looks like Lisp
  66. 66. Jay Phelps | @_jayphelps Source map support is coming
  67. 67. Jay Phelps | @_jayphelps What about memory on the heap?
  68. 68. Jay Phelps | @_jayphelps A linear memory is a contiguous, byte- addressable range of memory
  69. 69. Jay Phelps | @_jayphelps Accessed with instructions like i32.load and i32.store
  70. 70. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10
  71. 71. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10 1 byte
  72. 72. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10
  73. 73. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10 w a s m
  74. 74. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10 w a s m
  75. 75. Jay Phelps | @_jayphelps 0 1 2 3 4 5 6 7 8 9 10 119 97 115 109
  76. 76. Jay Phelps | @_jayphelps How do I get started?
  77. 77. https://mbebenita.github.io/WasmExplorer/
  78. 78. Jay Phelps | @_jayphelps https://github.com/WebAssembly/wabt
  79. 79. Jay Phelps | @_jayphelps https://github.com/WebAssembly/binaryen
  80. 80. Jay Phelps | @_jayphelps
  81. 81. Jay Phelps | @_jayphelps $ emcc main.c -s WASM=1 -o app.html
  82. 82. Jay Phelps | @_jayphelps webassembly.org
  83. 83. Jay Phelps | @_jayphelps Webpack is adding support (!!!) They received a $125,000 grant from MOSS
  84. 84. Jay Phelps | @_jayphelps Imagine a cpp-loader / rust-loader
  85. 85. Jay Phelps | @_jayphelps What's missing?
  86. 86. Jay Phelps | @_jayphelps Direct access to Web APIs You have call into JavaScript, right now
  87. 87. Jay Phelps | @_jayphelps Garbage collection also necessary for better interop with JavaScript and WebIDL
  88. 88. Jay Phelps | @_jayphelps Multi-threading
  89. 89. Jay Phelps | @_jayphelps Browser support?
  90. 90. Jay Phelps | @_jayphelps The revolution is just beginning
  91. 91. Jay Phelps | @_jayphelps
  92. 92. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  93. 93. Jay Phelps | @_jayphelps Efficient, low-level bytecode for the Web
  94. 94. Jay Phelps | @_jayphelps
  95. 95. Jay Phelps | @_jayphelps Questions? @_jayphelps

×