State of WebAssembly

State of WebAssembly

32e6a76c61f41da3beca909251498c60?s=128

Sendil Kumar N

February 19, 2020
Tweet

Transcript

  1. @sendilkumarn Hoi Nederland !!!

  2. @sendilkumarn Languages are built for a purpose. Choose & Use

    them wisely…
  3. The state of WebAssembly Sendil Kumar N

  4. @sendilkumarn Sendil Kumar

  5. @sendilkumarn Hacking on WebAssembly

  6. JavaScript is weird @sendilkumarn

  7. [1, 2] + [3, 4] @sendilkumarn

  8. 1, 23, 4 @sendilkumarn [1, 2] + [3, 4]

  9. 1, 23, 4 @sendilkumarn [1, 2].toString() + [3, 4].toString() “1,2”

    + “3, 4”
  10. JavaScript is weird* * - sometimes @sendilkumarn

  11. @sendilkumarn JavaScript Execution

  12. @sendilkumarn Load JavaScript

  13. @sendilkumarn a.js AST 1001010010101101010 Execute Profiler Parse Interpret Compile 100101001010

    Optimise 1010 GC
  14. @sendilkumarn JavaScript Tuning

  15. @sendilkumarn Css Tuning

  16. JavaScript is awesome @sendilkumarn ~80% ~90% https://2019.stateofjs.com/opinions/

  17. @sendilkumarn JavaScript is easy https://octoverse.github.com/ 6 years in row

  18. @sendilkumarn https://2019.stateofjs.com/opinions/ ~59% ~40% JavaScript is evolving

  19. So what is the problem? @sendilkumarn

  20. @sendilkumarn Types Polymorphism Unpredictable Performance Runtime exceptions

  21. @sendilkumarn Types 66% users interested to use TypeScript https://2019.stateofjs.com/javascript-flavors/

  22. @sendilkumarn Predicatble Performance Types Unpredictable Performance Typed

  23. WebAssembly @sendilkumarn

  24. Yet Another Frontend framework?

  25. @sendilkumarn 00 61 73 6D 01 00 00 00 Native

    Code Binary JavaScript Javascript Engine Runtime
  26. @sendilkumarn 00 61 73 6D 01 00 00 00 Native

    Code Binary JavaScript Javascript Engine
  27. WebAssembly is not a language @sendilkumarn

  28. @sendilkumarn func add is called Stack get_local $lhs LHS RHS

    get_local $rhs i32.add SUM Structured stack machine
  29. @sendilkumarn 00 61 73 6D 01 00 00 00 Size

    & Load time efficient
  30. @sendilkumarn What WebAssembly provides?

  31. @sendilkumarn Speed

  32. @sendilkumarn Near Native perf. ~30% faster than JS

  33. @sendilkumarn secure

  34. @sendilkumarn Linear Memory Model

  35. @sendilkumarn Shared Array Buffer

  36. @sendilkumarn Typed

  37. @sendilkumarn i32 i64 f32 f64 00 61 73 6D 01

    00 00 00 WebAssembly Binary JavaScript Javascript Engine Binding JS file
  38. @sendilkumarn Boundary Crossing

  39. @sendilkumarn Not always faster

  40. @sendilkumarn How WASM works?

  41. @sendilkumarn WebAssembly Execution

  42. @sendilkumarn Load WebAssembly

  43. @sendilkumarn Decode Compile Execute 00 61 73 6D 00 61

    73 6D 00 61 73 6D
  44. @sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE

    EXECUTE WebAssembly execution
  45. @sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE

    EXECUTE WebAssembly execution I am faster
  46. @sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE

    EXECUTE WebAssembly execution Optimised already
  47. @sendilkumarn Streaming compilation

  48. What languages can do wasm? @sendilkumarn

  49. C/C++ @sendilkumarn

  50. @sendilkumarn ./emcc -O3 helloworld.c

  51. Why C/C++? @sendilkumarn Tons of options All batteries included Verbose

  52. Rust @sendilkumarn

  53. @sendilkumarn $ wasm-pack build $ cargo install wasm-pack

  54. Why Rust? @sendilkumarn Inbuilt into the compiler All batteries included

    Best tooling support Sometimes bigger binaries
  55. AssemblyScript @sendilkumarn

  56. @sendilkumarn $ asc helloworld.ts -b helloworld.wasm -O3 $ npm i

    --save-dev assemblyscript
  57. Why AssemblyScript? @sendilkumarn Closer to JavaScript community Good tooling support

    / options
  58. Go @sendilkumarn

  59. @sendilkumarn $ GOOS=js GOARCH=wasm go build -o out/main.wasm go/main.go

  60. Why Go? @sendilkumarn Easy & Concise TinyGo is awesome Reflections

    & Proxies everywhere
  61. @sendilkumarn Future

  62. @sendilkumarn Interface types

  63. @sendilkumarn Single Instruction Multiple Data

  64. @sendilkumarn ♻ Garbage Collection

  65. @sendilkumarn WASI WebAssembly System Interface

  66. JavaScript with WebAssembly together makes web even more awesome &

    faster @sendilkumarn
  67. @sendilkumarn Thanks… @sendilkumarn dev.to/sendilkumarn sendilkumarn.com/blog Questions…