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.

WebAssembly Demystified

977 views

Published on

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.

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WebAssembly Demystified

  1. 1. WebAssembly Demystified Jay Phelps | @_jayphelps
  2. 2. Jay Phelps | @_jayphelps We're on the brink of a revolution
  3. 3. Jay Phelps | @_jayphelps WebAssembly will change the way we think of "web apps"
  4. 4. Senior Software Engineer | @_jayphelps Jay Phelps
  5. 5. Jay Phelps | @_jayphelps So...what is WebAssembly? aka wasm
  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 almost certainly run slower
  22. 22. Jay Phelps | @_jayphelps WebAssembly is still missing things
  23. 23. Jay Phelps | @_jayphelps v1 MVP is best suited for languages like C/C++ and Rust
  24. 24. Jay Phelps | @_jayphelps But other languages soon!
  25. 25. Jay Phelps | @_jayphelps TurboScript
  26. 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. 27. Jay Phelps | @_jayphelps When should I target WebAssembly?
  28. 28. Jay Phelps | @_jayphelps Heavily CPU-bound number computations
  29. 29. Jay Phelps | @_jayphelps Games
  30. 30. https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html
  31. 31. Jay Phelps | @_jayphelps Other use cases coming sooner than you might think!
  32. 32. Jay Phelps | @_jayphelps You'll likely consume compiled WebAssembly binaries even sooner
  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 Textual representation to the rescue!
  43. 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. 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 Let's learn the fundamentals
  46. 46. Jay Phelps | @_jayphelps WebAssembly is a stack machine language
  47. 47. Jay Phelps | @_jayphelps ...what's a stack machine?
  48. 48. Jay Phelps | @_jayphelps a data structure with two operations: push and pop Stack
  49. 49. item stack push
  50. 50. item item stack
  51. 51. item item item stack
  52. 52. item item item stack pop
  53. 53. item stack item
  54. 54. stack item
  55. 55. Jay Phelps | @_jayphelps last in, first out order (LIFO)
  56. 56. Jay Phelps | @_jayphelps stack machine: instructions on a stack
  57. 57. 1 + 2
  58. 58. i32.add 0x6a opcode mnemonics 01101010
  59. 59. i32.const 1 i32.const 2 i32.add
  60. 60. i32.const 1 i32.const 2 i32.add i32.const 1
  61. 61. i32.const 1 i32.const 2 i32.add i32.const 2
  62. 62. i32.const 1 i32.const 2 i32.addi32.add
  63. 63. stack i32.const 1 i32.const 2 i32.add
  64. 64. i32.const 1 i32.const 2 i32.add i32.const 1 stack 1
  65. 65. i32.const 1 i32.const 2 i32.add i32.const 2 stack 2 1
  66. 66. i32.const 1 i32.const 2 i32.addi32.add stack 1 2
  67. 67. i32.const 1 i32.const 2 i32.addi32.add stack 3
  68. 68. i32.const 1 i32.const 2 i32.add Jay Phelps | @_jayphelps
  69. 69. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  70. 70. Jay Phelps | @_jayphelps Compilers usually apply optimizations real-world output is often less understandable to humans
  71. 71. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  72. 72. i32.const 3 call $log Jay Phelps | @_jayphelps
  73. 73. Jay Phelps | @_jayphelps Most tooling supports an Abstract Syntax Tree (AST) still compiled and evaluated as a stack machine
  74. 74. i32.const 1 i32.const 2 i32.add call $log Jay Phelps | @_jayphelps
  75. 75. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps
  76. 76. (call $log (i32.add (i32.const 1) (i32.const 2) ) ) Jay Phelps | @_jayphelps s-expressions Yep, looks like Lisp
  77. 77. Jay Phelps | @_jayphelps Source map support is likely coming, eventually.
  78. 78. Jay Phelps | @_jayphelps How do I get started?
  79. 79. Jay Phelps | @_jayphelps
  80. 80. Jay Phelps | @_jayphelps https://mbebenita.github.io/WasmExplorer/
  81. 81. Jay Phelps | @_jayphelps webassembly.org
  82. 82. Jay Phelps | @_jayphelps emcc main.c -s WASM=1 -o app.html
  83. 83. Jay Phelps | @_jayphelps Firefox / Chrome support since March
  84. 84. Jay Phelps | @_jayphelps Webpack is planning to add support (!!!)
  85. 85. Jay Phelps | @_jayphelps Imagine a cpp-loader / rust-loader
  86. 86. Jay Phelps | @_jayphelps What's missing?
  87. 87. Jay Phelps | @_jayphelps Direct access to Web APIs You have call into JavaScript, right now
  88. 88. Jay Phelps | @_jayphelps Garbage collection necessary for better interop with JavaScript and WebIDL
  89. 89. Jay Phelps | @_jayphelps Multi-threading Sounds likely we'll get very close to "real" threads
  90. 90. Jay Phelps | @_jayphelps There's more, but advancing very quickly!
  91. 91. Jay Phelps | @_jayphelps The revolution is just beginning
  92. 92. Jay Phelps | @_jayphelps Join the discussions! https://github.com/WebAssembly/design
  93. 93. Jay Phelps | @_jayphelps Thanks! @_jayphelps

×