@vladikoff WebAssembly for Front-end Developers 

@vladikoff Vlad Filippov Toronto, Canada 󰎟 vf.io twitter.com/vladikoff github.com/vladikoff 

@vladikoff 

@vladikoff ~ December 2019 

@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 

@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? 

@vladikoff We have an app. But it’s slow*! 

@vladikoff xxHash - an extremely fast non-cryptographic hash algorithm. Implementation in different languages. INPUT: “String” OUTPUT: 38F1791AF7DCE8B5 COMPUTE: XXH.h64(INPUT) 100 000 times 

@vladikoff Okay, I’m going to write some WebAssembly... 

@vladikoff Let’s optimize with WASM! github.com/appcypher/awesome-wasm-langs webassembly.studio 

@vladikoff Replace with a WASM module... Compute... Main Thread Done! 

@vladikoff Demo WASM modules 

@vladikoff 

@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'); 

@vladikoff Demo WASM web workers 

@vladikoff 

@vladikoff Firefox 79 includes support for WebAssembly threads. Check out Gerard Gallant’s article about using these in your projects. 

@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 

@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! 

@vladikoff Vlad Filippov @vladikoff github.com/vladikoff linkedin.com/in/vladikoff vf.io Thank you SmashingConf! 

@vladikoff