Do things faster and better with webassembly

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
16. Uncertainties
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.
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?
69. Happy Hacking