Hacker's Guide to WebAssembly

WebAssembly is a new low-level binary compile format that will do a better job at being a compiler target than JavaScript. It’s being called “the future of the web platform” and did you know that its promising features in terms of speed, reusability and safety has brought major browser vendors working together to make it a reality and the MVP is already available in major browsers.

Want to know how WebAssembly work? Why is WebAssembly so fast? How to build web apps using C/C++/Rust? In this talk we’ll look at history, basics, applications and deep dive into the core concepts of WebAssembly with help of live demos and coding.

On line recording: https://www.youtube.com/watch?v=5GnhcqBwqck

Transcript

1. Hacker's guide to WebAssembly
2. Hi, I’m Vigneshwer moz://a TechSpeaker dvigneshwer@gmail.com | @dvigneshwer
3. 1. What is WebAssembly? 2. How Does it Work? 3. Why is WebAssembly so Fast? 4. Where is it being Used? 5. How do I get Started? Agenda:
4. What is WebAssembly?
5. WebAssembly is a new low-level binary compile format for programs on the web
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
7. Javascript wasn’t designed to be Fast! Problems: - Dynamic Nature of Js in Runtime - Code runs slow Parsing Compile & Optimize re-optimize Execute GC Js Engine Profiler/ Monitor Working of a JIT Compiler
9. WebAssembly brings new opportunities in the space of Portability & Performance!
10. How Does it Work?
11. Rust C++ C IR ARM x86 Front-end Back-end Running system programming code on Web!
12. WebAssembly is a General purpose virtual architecture (Machine Language for a conceptual machine)
13. Rust C++ C IR ARM x86 Wasm Running system programming code on Web! clang Rustc Optimizer: LLVM LLVM Wasm Backend Decode Compile & Optimize Execute
15. WebAssembly is an open standard supported by all major browsers.
16. Why is WASM so Fast?
17. Advantages: - Less time to download | Smaller in size & Compact - Decoding is faster than Parsing - Optimized Code | Compiled ahead of time - Better memory mgmt.
18. Where is it being Used?
19. Live Demo
20. Applications: - Games (e.g., Unreal, Unity) - Multimedia (e.g., AV1, FLIF, BPG) - Performance (e.g., KeeWeb, Mega) - Libraries (e.g., OpenCV, Box2D, LibSass) - 64-bit Math (e.g., MAME, SHA512)
21. How do I get Started?
22. Live Demo
23. Reasons to Use WebAssembly: Wasm provides: 1. Great Runtime Performance 2. Code Reusability 3. Portability 4. Enables new designs (WASM + Js)
24. Going to Production? Supporting Older browsers? C/C++ ---> asm.js ---> .Wasm (Binaryen tool) - LLVM bytecode to Js - Compiling Heavy Code
25. 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
26. Wasm Trailheads Great Blogs & Demos: Zen Garden: https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html WebSight: https://www.websightjs.com/index.html Unity Game: http://webassembly.org/demo/ Wasm Explorer: https://mbebenita.github.io/WasmExplorer/ Emscripten: http://kripken.github.io/emscripten-site/ Intro to WASM: https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ Join Wasm IRC & Community Channels: irc://irc.w3.org:6667/#webassembly https://www.w3.org/community/webassembly/ Join Wasm Websites: http://webassembly.org/ 26