Scotland JS 2018 - Hacker's guide to Web Assembly

Starting from the basics, this talk will walk you through what web assembly is, and then why it’s fast.

Transcript

1. Hacker's guide to WebAssembly Vigneshwer Dhinakaran | Mozilla TechSpeaker | @dvigneshwer SCOTLAND JS 2018
3. WebAssembly?
4. History! • Java Applets • ActiveX • NaCl • asm.js - Separate VM - No DOM integration - Limited to a sandbox env. - Optimizable, low-level subset of JavaScript WASM is a direct successor of asm.js
5. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine
6. Running Code on the Web! (Performing Complex Operations) Js C/ C++/ Rust .. - WebAssembly brings other programming languages than Js to the Web! - Bringing Native performance to Web JS Engines (JIT Compiler) Wasm Modules
7. C++ .wat Binary Binary Instruction set!
8. WebAssembly is a new low-level binary compile format for programs on the web & more!
9. Rust C++ C ARM x86 Language specific compilers (clang, rustup) For - n lang , m targets - nxm times!
10. Rust C++ C IR ARM x86 Front-end tools Back-end tools With help of LLVM toolchain , compilations to n + m times
11. WebAssembly brings new opportunities in the space of Portability & Performance!
12. Rust C++ C IR ARM x86 Wasm Running system programming code on Web! clang Rustc Optimizer: LLVM LLVM Wasm Backend Decode Compile & Optimize Execute
13. WebAssembly is a General purpose virtual architecture (Machine Language for a conceptual machine)
15. WebAssembly is an open standard supported by all major browsers. https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
16. https://caniuse.com/#feat=wasm
17. Why is webassembly so fast? 1. Less time to download | Smaller in size & Compact 2. Optimized Code | Compiled ahead of time 3. Executes at native speed by taking advantage of common hardware capabilities 4. Better memory mgmt!
18. How do I get Started?
19. Going to Production! Making WebAssembly better for Rust & for all languages https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/
20. Tooling Ecosystem .wasm .wat rustup WABT Js - Wasm Glue code
21. Why Rust? Freedom from Data Race conditions Strong type system High level iterators More control over memory Welcoming Community
22. wasm-bindgen Facilitating high-level interactions between wasm modules and JavaScript https://github.com/rustwasm/wasm-bindgen Steps: 1. Import JavaScript things into Rust and export Rust things to JavaScript 2. Use exported Rust things from JavaScript! https://hacks.mozilla.org/2018/04/javascript-to-rust-and-back-agai n-a-wasm-bindgen-tale/
23. LIVE DEMO! https://webassembly.studio/ wasm-bindgen example Checkout: • https://mbebenita.github.io/WasmExplorer/ • https://rustwasm.github.io/book/ • https://wasdk.github.io/WasmFiddle/
24. wasm-pack https://hacks.mozilla.org/2018/04/hello-wasm-pack/
25. wasm-pack
26. What does wasm32-unknown-unknown mean? - {architecture}-{vendor}-{system} - Cross compiling Rust programs for different machines FAQs What does cdylib stand for? - cdylib stands for exporting a C interface from a Rust dynamic library
27. Supporting Older browsers? C/C++ ---> asm.js ---> .Wasm (Binaryen tool) - LLVM bytecode to Js - Compiling Heavy Code FAQs
28. Applications & Success Stories
29. Zen Garden Demo for WebAssembly https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
30. WebSight | OpenCV wasm and asm.js port https://github.com/Web-Sight/WebSight https://hacks.mozilla.org/2017/09/bootcamps-webassembly-and-computer-vision/
31. WebAssembly cut Figma’s load time by 3x https://blog.figma.com/webassembly-cut-figmas-load-time-by-3x-76f3f2395164
32. Yew Yew is a modern Rust framework inspired by Elm and ReactJS for creating multi-threaded frontend apps with WebAssembly https://github.com/DenisKolodin/yew https://www.youtube.com/watch?v=qszZTwG0nZs
33. AutoCAD Web featured at Google I/O https://youtu.be/BnYq7JapeDA?t=22m24s
34. & more ..
35. WebAssembly is more than the web! http://words.steveklabnik.com/webassembly-is-more-than-just-the-web Nebulet
36. Applications: 1. Games (e.g., Unreal, Unity) 2. Multimedia (e.g., AV1, FLIF, BPG) 3. Performance (e.g., KeeWeb, Mega) 4. Libraries (e.g., OpenCV, Box2D, LibSass) 5. 64-bit Math (e.g., MAME, SHA512)
37. Summary
38. Reasons to Use WebAssembly: Wasm provides :- 1. Great Runtime Performance 2. Code Reusability 3. Portability 4. Enables new designs (WASM + Js)
39. What is WebAssembly, again? A compiler target for the Web: 1. Low-level, binary format for programs 2. Open standard with cross-browser support 3. Direct successor of asm.js 4. General purpose virtual architecture
40. Thanks! @dvigneshwer dvigneshwer@gmail.com https://tinyurl.com/scotlandjs18