Web Assembly
2/1/18
and why you should care
Web Assembly
What is Web Assembly?
WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.
...it is a new, low-level, assembly-like language that runs efficiently on the existing web platform and is backward-compatible with its precursor, asm.js.
https://research.mozilla.org/webassembly/
http://webassembly.org/
We can start writing Web Applications in other Languages and have Native Browser Support!
Size efficient
gzipped binary format to be about 20-30% smaller than the corresponding gzipped asm.js
http://webassembly.org/docs/rationale/#why-a-binary-encoding
.. Why?
🤔
Load time efficient
JS Compilation
Your code
Intermediate Representation (IR)
Optimize
Execute
Your computer
Browser
Web Assembly Compilation
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
Your code
LLVM
Intermediate Representation (IR)
Execute
Decode
Your computer
Browser
Execute
Decode
Web Assembly Compilation cont.
pub fn main() {
// do stuff..
}#[no_mangle]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}Loading a WASM Module
https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running
...with Webpack
https://github.com/TheLarkInn/simple-webpack-wasm-example
...with Parcel
😍
index.js
math.rs
https://github.com/parcel-bundler/parcel
Sample Project with Rust
Why Rust?
- WASM has no garbage collection and neither does Rust
- Rust already utilizes LLVM
- Rust is awesome
https://github.com/alexcrichton/wasm-bindgen
wasm-bindgen
So why should you care?
What can we use it for now?
- Games
- Security / Crypto
- Video / Image editing
- Peer to Peer
- and more!
http://webassembly.org/docs/use-cases/
Virtual DOM?
https://github.com/glimmerjs/glimmer-vm/pull/752
What can we use it for in the future?
http://webassembly.org/docs/future-features/
hint - everything!
- Elixir - https://github.com/jamen/elixir-wasm
- OCaml - https://github.com/SanderSpies/ocaml/tree/wasm/wasmcomp
https://github.com/appcypher/awesome-wasm-langs
Honorable Mention
https://ballercat.github.io/walt/
Text
JS Compiled WASM Language (w / playground)
http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/
Deep Dive into Angular AOT
https://github.com/facebook/prepack
Prepack for generic pre-evaluation and compiliation