Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Codemotion Rome 2018
0 likes722 views
The document discusses the advantages of WebAssembly (WASM) over traditional JavaScript, emphasizing its performance, safety, and compatibility as a means to run native code in browsers. It compares various programming techniques, profiling methods, and the internal workings of JavaScript versus WebAssembly. Additionally, it highlights future improvements and features for WASM, such as streaming compilation and potential integration with JavaScript.
![Which has higher
performance?
function test() {
let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
}
function test() {
let arr = [];
arr[0] = 1;
arr[2] = 3;
arr[1] = 2;
}](https://image.slidesharecdn.com/sendilkumar-dothingsfasterandbetterwithwebassembly-180706144112/85/Do-things-faster-and-better-with-WebAssembly-Sendil-Kumar-Nellaiyapen-Codemotion-Rome-2018-16-320.jpg)
![Which has higher
performance?
function test() {
let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
}
function test() {
let arr = [];
arr[0] = 1;
arr[2] = 3;
arr[1] = 2;
}](https://image.slidesharecdn.com/sendilkumar-dothingsfasterandbetterwithwebassembly-180706144112/85/Do-things-faster-and-better-with-WebAssembly-Sendil-Kumar-Nellaiyapen-Codemotion-Rome-2018-17-320.jpg)
![Which has higher
performance?
let arr = new Array(3);let arr = [];](https://image.slidesharecdn.com/sendilkumar-dothingsfasterandbetterwithwebassembly-180706144112/85/Do-things-faster-and-better-with-WebAssembly-Sendil-Kumar-Nellaiyapen-Codemotion-Rome-2018-18-320.jpg)
![Which has higher
performance?
let arr = []; let arr = new Array(3);](https://image.slidesharecdn.com/sendilkumar-dothingsfasterandbetterwithwebassembly-180706144112/85/Do-things-faster-and-better-with-WebAssembly-Sendil-Kumar-Nellaiyapen-Codemotion-Rome-2018-19-320.jpg)
![#[no_mangle]
pub extern fn add_one(x: i32) -> i32{
x+1
}
RUST](https://image.slidesharecdn.com/sendilkumar-dothingsfasterandbetterwithwebassembly-180706144112/85/Do-things-faster-and-better-with-WebAssembly-Sendil-Kumar-Nellaiyapen-Codemotion-Rome-2018-47-320.jpg)
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Codemotion Rome 2018
- 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
- 4. @sendilkumarn You can reach me at
- 5. C / C++ devs ?
- 6. Rust devs ?
- 7. What does Rust / C++ offer?
- 9. JS devs ?
- 10. Fullstack JS devs ?
- 11. What does JS offer?
- 12. Try to be faster Easier to read Easier to writeTypes? Far from machine
- 13. What you do to increase the Performance of your App ?
- 14. Minify Async & Defer Reduce dom manipulation Profile JS Engine based optimisations Immutability Type system Code splitting Service worker
- 15. Let us do a performance question
- 16. Which has higher performance? function test() { let arr = []; arr[0] = 1; arr[1] = 2; arr[2] = 3; } function test() { let arr = []; arr[0] = 1; arr[2] = 3; arr[1] = 2; }
- 17. Which has higher performance? function test() { let arr = []; arr[0] = 1; arr[1] = 2; arr[2] = 3; } function test() { let arr = []; arr[0] = 1; arr[2] = 3; arr[1] = 2; }
- 18. Which has higher performance? let arr = new Array(3);let arr = [];
- 19. Which has higher performance? let arr = []; let arr = new Array(3);
- 20. But why 😱? Packed & Holey Array https://v8project.blogspot.nl/2017/09/elements-kinds-in-v8.html
- 22. Uncertainties😕🤔
- 23. Most of the profiling, needs you to know more about the internals of JS engine.
- 25. Uncertainty in performance & results
- 27. How better will it be to have the consistency & speed of native code in browsers?
- 28. WebAssembly Binary encoded - Stack machine
- 29. In other words, you can compile your native code and make them run in your browser.
- 31. 🚀 Fast & Efficient
- 32. 🚀 Fast & Efficient 🔐 Safe
- 33. 🚀 Fast & Efficient 🔐 Safe 🧐 Debuggable
- 34. 🚀 Fast & Efficient 🔐 Safe 🧐 Debuggable 🕸 Open web platform
- 35. “WebAssembly is not a replacement of JAVASCRIPT” integrating well and being symbiotic
- 36. How JS works now inside JS Engine
- 42. How WASM Works?
- 47. #[no_mangle] pub extern fn add_one(x: i32) -> i32{ x+1 } RUST
- 48. rustc +nightly — —target wasm32-unknown-unknown -O test.rs
- 51. Let us see what is inside Module
- 52. WASM IMPORT EXPORT FUNCTION & CODE (import …) (export …) (func …) Anything that you want to import inside WASM Anything that you want to export outside WASM Actual Binary code to execute
- 53. WASM MEMORY GLOBAL START (start $start_function) first function to get loaded & run in the module (global type mutability expr) (memory init-size max-size(opt))
- 54. WASM TABLE ELEMENT DATA Data -> linear array of memory indexes GC references, raw OS handles, or native pointers Allows module to initialise the elements
- 55. (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) “10001000”)) WAST
- 56. (module ) Module
- 57. (type $t0 (func (param i32) (result i32) ) ) Type
- 58. (func $add_one (export “add_one”) (type $0) (param $p0 i32) (result i32) get_local $p0 i32.const 1 i32.add ) Actual function
- 59. (table $T0 0 anyfunc) Table
- 62. How to load them?
- 63. Using fetch…
- 65. Using instantiate streaming… ⚠Few browsers yet to support
- 66. Streaming compilation speeds up the wasm performance by 10-15 times Streaming compilation will be coming to JS… 🎉 🎉 🎉 🎉 🎉 🎉
- 67. ESM spec for WASM ⚠Still in very early stages, and will be implemented
- 68. Demo Time ⏱
- 69. Future 🎠 🦄 Garbage Collection 🦄 DOM Manipulation 🦄 Bulk memory operations 🦄 Threads 🦄 Exception handling
- 70. Questions?
- 71. Happy Hacking 😎