Hacker's guide to
WebAssembly
Vigneshwer Dhinakaran | Mozilla TechSpeaker | @dvigneshwer
SCOTLAND JS 2018
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
WebAssembly?
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
WebAssembly (abbreviated Wasm) is a
binary instruction format for a
stack-based virtual machine
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
C++
.wat Binary
Binary Instruction set!
Slide 8
Slide 8 text
WebAssembly is a new
low-level binary compile format
for programs on the web & more!
Slide 9
Slide 9 text
Rust
C++
C
ARM
x86
Language specific compilers (clang, rustup)
For - n lang , m targets - nxm times!
Slide 10
Slide 10 text
Rust
C++
C IR
ARM
x86
Front-end tools Back-end tools
With help of LLVM toolchain , compilations to n + m times
Slide 11
Slide 11 text
WebAssembly brings new opportunities
in the space of
Portability & Performance!
Slide 12
Slide 12 text
Rust
C++
C IR
ARM
x86
Wasm
Running system programming code on Web!
clang
Rustc
Optimizer:
LLVM
LLVM Wasm
Backend
Decode Compile & Optimize Execute
Slide 13
Slide 13 text
WebAssembly is a
General purpose virtual architecture
(Machine Language for a conceptual machine)
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
WebAssembly is an
open standard supported
by all major browsers.
https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
Slide 16
Slide 16 text
https://caniuse.com/#feat=wasm
Slide 17
Slide 17 text
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!
Slide 18
Slide 18 text
How do I get
Started?
Slide 19
Slide 19 text
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/
Why Rust?
Freedom from Data Race conditions
Strong type system
High level iterators
More control over memory
Welcoming Community
Slide 22
Slide 22 text
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/
Slide 23
Slide 23 text
LIVE DEMO!
https://webassembly.studio/
wasm-bindgen example
Checkout:
● https://mbebenita.github.io/WasmExplorer/
● https://rustwasm.github.io/book/
● https://wasdk.github.io/WasmFiddle/
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
Slide 27
Slide 27 text
Supporting Older browsers?
C/C++ ---> asm.js ---> .Wasm
(Binaryen tool)
- LLVM bytecode to Js
- Compiling Heavy Code
FAQs
Slide 28
Slide 28 text
Applications
&
Success Stories
Slide 29
Slide 29 text
Zen Garden Demo for WebAssembly
https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
Slide 30
Slide 30 text
WebSight | OpenCV wasm and asm.js port
https://github.com/Web-Sight/WebSight
https://hacks.mozilla.org/2017/09/bootcamps-webassembly-and-computer-vision/
Slide 31
Slide 31 text
WebAssembly cut Figma’s load time by 3x
https://blog.figma.com/webassembly-cut-figmas-load-time-by-3x-76f3f2395164
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
AutoCAD Web featured at Google I/O
https://youtu.be/BnYq7JapeDA?t=22m24s
Slide 34
Slide 34 text
& more ..
Slide 35
Slide 35 text
WebAssembly is more than the web!
http://words.steveklabnik.com/webassembly-is-more-than-just-the-web
Nebulet
Reasons to Use WebAssembly:
Wasm provides :-
1. Great Runtime Performance
2. Code Reusability
3. Portability
4. Enables new designs (WASM + Js)
Slide 39
Slide 39 text
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