Do things faster and better with webassembly

Do things faster and better with webassembly

32e6a76c61f41da3beca909251498c60?s=128

Sendil Kumar N

March 29, 2018
Tweet

Transcript

  1. Do things faster & better with WebAssembly @sendilkumarn

  2. Sendil Kumar • Full stack developer @Xebialabs • Core dev

    team member @JHipster • Team member @webpack • Part of rust-wasm Working Group • Big open source lover & enthusiast
  3. @sendilkumarn You can reach me at

  4. Fullstack devs ?

  5. C / C++ devs ?

  6. Rust devs ?

  7. Faster More control Safety Types Closer to machine

  8. ! JS devs ?

  9. What you do to increase the Performance of your App

    ?
  10. Minify Async & Defer Reduce dom manipulation Profile JS Engine

    based optimisations Immutability Type system Code splitting Service worker
  11. Let us do a performance question

  12. Which has higher performance? function test() { let arr =

    []; arr.push(1); arr.push(2); arr.push(3); } function test() { let arr = new Array(3); arr.push(1); arr.push(2); arr.push(3); }
  13. This has higher performance function test() { let arr =

    []; arr.push(1); arr.push(2); arr.push(3); } function test() { let arr = new Array(3); arr.push(1); arr.push(2); arr.push(3); }
  14. But why ? Packed & Holey Array https://v8project.blogspot.nl/2017/09/elements-kinds-in-v8.html

  15. None
  16. Uncertainties

  17. None
  18. Most of the profiling, needs you to know more about

    the internals of JS engine.
  19. Optional Arguments Packed/Holey Array Monomorphisation Micro- benchmarking Engine based tunings

    Known engine shortcomings Time- consuming
  20. ⚙ Maintainability ⚙

  21. Tradeoff between Uncertainty & Performance

  22. How better will it be to have the consistency &

    speed of native code in browsers?
  23. WebAssembly Binary encoded - Stack machine

  24. In other words, you can compile your native code and

    make them run in your browser.
  25. None
  26. Fast & Efficient

  27. Fast & Efficient Safe

  28. Fast & Efficient Safe Debuggable

  29. Fast & Efficient Safe Debuggable Open web platform

  30. “WebAssembly is not a replacement of JAVASCRIPT” integrating well and

    being symbiotic
  31. How JS works now inside JS Engine

  32. PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Javascript AST

  33. PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler COMPILE 0101010101010

  34. PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler

  35. PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler

  36. PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler

  37. How WASM Works?

  38. DECODE COMPILE EXECUTE 0101010101010 0101010101010

  39. DECODE COMPILE EXECUTE

  40. DECODE COMPILE EXECUTE

  41. Simple Example in Rust

  42. #[no_mangle] pub extern fn add_one(x: i32) -> i32{ x+1 }

    RUST
  43. rustc +nightly \ — —target wasm32-unknown-unknown \ -O test.rs

  44. WASM Raw binary format

  45. WASM MODULE IMPORT TABLE MEMORY GLOBAL EXPORT ELEMENT DATA START

    FUNCTION & CODE
  46. WASM IMPORT EXPORT FUNCTION & CODE (import …) (export …)

    (func …)
  47. WASM MEMORY GLOBAL START (start $start_function) The first function to

    be loaded in the module (global type mutability expr) (memory init-size max-size(opt))
  48. WASM TABLE ELEMENT DATA Data -> linear array of memory

    indexes GC references, raw OS handles, or native pointers Allows module to initialise the elements
  49. (module (type $t0 (func (param i32) (result i32))) (func $add_one

    (export “add_one”) (type $0) (param $p0 i32) (result i32) get_local $p0 i32.const 1 i32.add ) (table $T0 0 anyfunc) (memory $memory (export “memory”) 17) (data (i32.const 4) “\10\00\10\00”)) WAST
  50. (module ) Module

  51. (type $t0 (func (param i32) (result i32) ) ) Type

  52. (func $add_one (export “add_one”) (type $0) (param $p0 i32) (result

    i32) get_local $p0 i32.const 1 i32.add ) Actual function
  53. (table $T0 0 anyfunc) Table

  54. (memory $memory (export “memory”) 17) Memory

  55. (data (i32.const 4) “\10\00\10\00”) ) Data

  56. How to load them?

  57. Using fetch…

  58. Using fetch… fetch('test.wasm').then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(result

    => result.instance.exports.add_one() );
  59. Using compile streaming…

  60. Using compile streaming… WebAssembly.compileStreaming((fetch(‘test.wasm’)) .then(module => WebAssembly.instantiate(module, importObject) ).then(result =>

    result.instance.exports.add_one() );
  61. Using instantiate streaming… ⚠Few browsers yet to support

  62. Using instantiate streaming… WebAssembly.instantiateStreaming( (fetch(‘test.wasm’), importObj) .then(result => result.instance.exports.add_one() );

    ⚠Few browsers yet to support
  63. Streaming compilation speeds up the wasm performance by 10-15 times

    Streaming compilation will be coming to JS…
  64. ESM spec for WASM ⚠Still in very early stages, and

    will be implemented
  65. How to include them in your App? Demo time >>>

  66. Future Garbage Collection DOM Manipulation Bulk memory operations Threads Exception

    handling
  67. Questions?

  68. None
  69. Happy Hacking