dotJS 2019 - Into WebAssembly

Transcript

1. @vladikoff | Paris 2019 Into WebAssembly Add WASM to your existing projects!
2. @vladikoff | Paris 2019 Vlad Filippov Toronto, Canada 󰎟 vf.io twitter.com/vladiko ff github.com/vladikoff
3. @vladikoff | Paris 2019 You probably already heard about WebAssembly... • A new low-level bytecode format for the Web • Stack-based virtual machine, produces *.wasm modules • User for: ◦ Calculations and computational tasks ◦ Importing low-level components from other languages ◦ Audio, Image and Video processing ◦ Game development ◦ Bitcoin mining $$$$ • Integrates well with the Web Developer workflow https://www.tu-braunschweig.de/Medien-DB/ias/pubs/2019-dimva.pdf
4. @vladikoff | Paris 2019 Meanwhile this morning...
5. @vladikoff | Paris 2019 WebAssembly is already here!
6. @vladikoff | Paris 2019 We have an app in production. But it’s slow*! The Problem
7. @vladikoff | Paris 2019 xxHash - an extremely fast non-cryptographic hash algorithm. Implementation in different languages. INPUT: “String” OUTPUT: 38F1791AF7DCE8B5 COMPUTE: XXH.h64(INPUT) 100 000 times
8. @vladikoff | Paris 2019 Let’s optimize with WASM! The Solution webassembly.studio
9. @vladikoff | Paris 2019 Replace with a WASM module... Compute... Main Thread Done!
10. @vladikoff | Paris 2019 Demo WASM modules
11. @vladikoff | Paris 2019
12. @vladikoff | Paris 2019 Compute... Web Worker Main Thread createWasmWebWorker('parser.wasm').then(parser => { const result = parser.input(data); }); Done! Use web workers with WebAssembly... new Worker('worker.js');
13. @vladikoff | Paris 2019 Demo WASM web workers
14. @vladikoff | Paris 2019
15. @vladikoff | Paris 2019 WASM Future Beyond the Browser
16. @vladikoff | Paris 2019 bytecodealliance.org WASM beyond the browser... • Using WebAssembly System Interfaces (WASI) to go run WASM beyond the browser. • New software security model, useful for C++ and Rust, etc. • WebAssembly speed to runtimes in Python, node.js, etc. open source community dedicated to creating secure new software foundations through WebAssembly Python node.js .NET
17. @vladikoff | Paris 2019 “nanoprocess” security model goal Python node.js process sandboxed: memory network access sandboxed: memory file system access sandboxed: memory
18. @vladikoff | Paris 2019 Demo WebAssembly System Interfaces
19. @vladikoff | Paris 2019
20. @vladikoff | Paris 2019 In conclusion... • Use WebAssembly wisely - benchmark, optimize inputs, workers! • WebAssembly might not always be a solution! • Keep an eye on WASM module size and your WebPack output • Research different WASM runtimes • Go beyond the Web Browser and get excited for the future with WebAssembly!
21. @vladikoff | Paris 2019 Vlad Filippov twitter.com/vladiko ff github.com/vladikoff linkedin.com/in/vladikoff Merci beaucoup dotJS!