SmashingConf 2020

Transcript

1. @vladikoff WebAssembly for Front-end Developers
2. @vladikoff Vlad Filippov Toronto, Canada 󰎟 vf.io twitter.com/vladikoff github.com/vladikoff
3. @vladikoff
4. @vladikoff ~ December 2019
5. @vladikoff You probably already heard about WebAssembly... • WebAssembly a.k.a WASM low-level bytecode format for the Web • Supported by the popular browsers • Stack-based virtual machine, produces *.wasm modules “New Kid on the Web: A Study on the Prevalence of WebAssembly in the Wild” https://www.sec.cs.tu-bs.de/pubs/2019a-dimva.pdf
6. @vladikoff Image processing, Barcode Scanner, Data visualization (muze, Perspective), cryptography, computer vision Figma, Text Editors & IDEs, 3D graphics, cross-environment tools Libraries - computation improvements - speeding up existing projects - image, audio & video processing - sharing code with node.js and other languages - import low-level components Custom Code Developer Tools Not so front-end’y Yew (Rust), Iced (Rust), Blazor (C#), Qt (C++), Vugu (Go) Frameworks - game development, SDKs - simulation software - crypto mining $$$$ - embedding languages - browser extensions - cloud functions & workers - the unknown! Front-end day-to-day work How do we use WebAssembly?
7. @vladikoff We have an app. But it’s slow*!
8. @vladikoff xxHash - an extremely fast non-cryptographic hash algorithm. Implementation in different languages. INPUT: “String” OUTPUT: 38F1791AF7DCE8B5 COMPUTE: XXH.h64(INPUT) 100 000 times
9. @vladikoff Okay, I’m going to write some WebAssembly...
10. @vladikoff Let’s optimize with WASM! github.com/appcypher/awesome-wasm-langs webassembly.studio
11. @vladikoff Replace with a WASM module... Compute... Main Thread Done!
12. @vladikoff Demo WASM modules
13. @vladikoff
14. @vladikoff 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');
15. @vladikoff Demo WASM web workers
16. @vladikoff
17. @vladikoff Firefox 79 includes support for WebAssembly threads. Check out Gerard Gallant’s article about using these in your projects.
18. @vladikoff 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
19. @vladikoff • 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 • Check out the WASM case studies: AI/ML, eBay, fastq.bio, Figma, AutoCAD • Follow the development of WebAssembly at hacks.mozilla.org!
20. @vladikoff Vlad Filippov @vladikoff github.com/vladikoff linkedin.com/in/vladikoff vf.io Thank you SmashingConf!
21. @vladikoff