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

Questions / Comments?

Web Assembly

By Charles King

Made with Slides.com

Web Assembly

and why you should care

  • 665

More from Charles King