Do things faster and better with webassembly

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