The Road to WebAssembly is Paved with Rust

A summary of what is WebAssembly, what is the Rust programming language and what are its strenghts, and how to use the latter to target the former.

Transcript

1. The Road to WebAssembly is Paved with Rust comm t 2018 i ı
2. Software Engineer at Tuenti MadRust co-organizer Former JavaScripter  jrvidal  _rvidal
3. TOC Wasm! Rust! Rust Wasm!
4. WebAssembly is a binary instruction format for a stack-based virtual machine [...] enabling deployment on the web for client and server applications.
5. Trinity → Tetrarchy Lin Clark CC BY-SA 3.0
6. How does it look (module ;; Wasm is all about modules... (func $my_add_function (param $lhs i32) (param $rhs i32) (result i32) get_local $lhs get_local $rhs i32.add) (export "add" ;; ... that export things (func $my_add_function))) 0061736d 01000000 01070160 027f7f01 7f030201 00070701 03616464 00000a09 01070020 0020016a 0b
7. // No <script type="wasm"> _yet_ const request = fetch("my-module.wasm"); const { instance, module } = await ( WebAssembly.instantiateStreaming(request) ); instance.exports.add(7, 4); // Boom How does it look (from JS)
8. Use Case: ...
9. Use Case: Portability / Extend the Web "Alfred, I want a triple-shot americano with milk" Small Medium Large Single Shot Double Shot Triple Shot Americano Cappuccino Espresso Latte Mocha Milk Cream Picovoice
10. Use Case: Portability / Extend the Web squoosh.app
11. Use Case: Portability / Extend the Web PSPDFKit
12. Use Cases: there are more! Web-as-a-Platform: "Bring your C/C++ application to the Web" Polyglot Web "Bring your favourite language to the Web" Beyond the Web Node.js Serverless Blockchain/Cryptocurrencies
13. Rust → ⚙ → Wasm
14. But first...
15. But first... (honest title) Using WebAssembly to sell you some Rust
16. Systems Programming Ring 3 Ring 2 Ring 1 Ring 0 Kernel Device drivers Applications Device drivers Least privileged Most privileged Chrislb, CC BY-SA 3.0. Hertzsprung, CC BY-SA 3.0. Virtual Machines ‐ Ravi, Nair. SimonWaldherr, CC BY-SA 4.0
17. Systems Programming for Everyone Ring 3 Ring 2 Ring 1 Ring 0 Kernel Device drivers Applications Device drivers Least privileged Most privileged Expressiveness and Abstraction Safety and Reliability Tooling and Ecosystem Community and Resources Chrislb, CC BY-SA 3.0. Hertzsprung, CC BY-SA 3.0. Virtual Machines ‐ Ravi, Nair. SimonWaldherr, CC BY-SA 4.0
18. Expressiveness and Abstraction #[derive(Deserialize)] struct IceCream { cone: String, #[serde(rename = "scoops")] scoop_flavors: Vec<String> } let data = r#"{"cone": "waffle", "scoops": ["vanilla", "lemon"]}"#; serde_json::from_str(data)? .scoop_flavors .iter() .for_each(|flavor| { println!("{}", &flavor); });
19. Safety and Reliability let file = match File::open(file_path) { Ok(file) => file, Err(e) => return MyError::IOError }; let contents = match file.read_to_string() { Ok(text) => text, Err(e) => return MyError::EncodingError }; let pairs = vec![(0, 1), (2, 3), (4, 5)]; let first_pair = &pairs[0]; // Cannot move out of `pairs` because it is borrowed let map : HashMap<u32, u32> = pairs.into_iter().collect(); println!("First pair was {:?}", first_pair);
20. Tooling and Ecosystem $ cargo new commitconf && cd commitconf Created binary (application) `commitconf` project $ echo 'lazy_static = "1.2.0"' >> Cargo.toml $ cargo run Updating crates.io index Compiling lazy_static v1.2.0 Compiling commitconf v0.1.0 Finished dev [unoptimized + debuginfo] target in 6.17s Running `target/debug/commitconf` Hello, world! $ cargo test # Run tests (with #[test] !!) $ cargo doc # Generate docs $ cargo fmt # Formatter / prettifier $ cargo clippy # Linter $ cargo build --target=aarch64-linux-android # X-compiling
21. Community and Resources  Docs.rs Embedded Rust, Aaron Power, CC BY 4.0. rustwasm logo, MIT. Lucy, rust-artwork, CC BY 4.0
22. Rust → ⚙ → Wasm For real now
23. pub fn add(x: usize, y: usize) -> usize { x + y } $ cargo build myWasmInstance.exports.add(2, 3); // 5! The Dream
24. pub fn add(x: usize, y: usize) -> usize { x + y // Not quite } $ cargo build myWasmInstance.exports.add(2, 3); // 5! The Dream
25. This is also part of our dream, right? // (In JS) typeof bid_farewell("Ferris") ? pub fn bid_farewell(name: String) -> String { format!("Farewell {}", &name) } // (In JS) typeof my_favourite_numbers() ??? pub fn my_favourite_numbers() -> Vec<u32> { vec![9, 42, 345234987629] } Complex Types
26. Memory is the Polyfill var memory = new Uint8Array( myWasmInstance.exports.memory.buffer ); console.log( memory.slice(address, address + length) ); memory[address] = 0x42; Based on Lin Clark, CC BY-SA 3.0
27. #[wasm_bindgen] pub fn add(x: usize, y: usize) -> usize { x + y } #[wasm_bindgen] pub fn bid_farewell(name: String) -> String { format!("Farewell {}", name) } #[wasm_bindgen] pub fn my_favourite_numbers() -> Vec<u32> { vec![9, 42, 345234987629] } wasm-bindgen to the rescue
28. #[wasm_bindgen] pub fn add(x: usize, y: usize) -> usize { x + y } $ cargo build myWasmInstance.exports.add(2, 3); // 5! The Dream (take #2)
29. #[wasm_bindgen] pub fn add(x: usize, y: usize) -> usize { x + y } $ cargo build # Not quite myWasmInstance.exports.add(2, 3); // 5! The Dream (take #2)
30. #[wasm_bindgen] pub fn add(x: usize, y: usize) -> usize { x + y } $ wasm-pack build myWasmInstance.exports.add(2, 3); // 5! The Dream (final take)
31. Getting started with wasm-pack use wasm_bindgen::prelude::*; cfg_if! { // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global // allocator. if #[cfg(feature = "wee_alloc")] { extern crate wee_alloc; #[global_allocator] static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; } } #[wasm_bindgen] extern { fn alert(s: &str); } #[wasm_bindgen] pub fn greet() { alert("Hello, hello-world!"); } 00:00
32. // webpack.config.js module.exports = { entry: "./index.js" }; // index.js import("./pkg") .then(m => m.greet()); <!-- index.html --> <body> <script src="./main.js"></script> </body> Hello World
33. use web_sys::console; use js_sys::JsString; let greet = JsString::from("Hello, world"); console::log_1(&greet); JS interoperation
34. Parsing Exif Metadata }); } Ok(parsed_fields) } /// Attempts to parse a Tiff field value (it does not accept all Tiff value types) fn parse_exif_field_value(value: ExifValue) -> Option<String> { let parsed = match value { ExifValue::Ascii(slices) => slices .into_iter() .filter_map(|b| std::str::from_utf8(&b).ok()) .fold(String::new(), |mut acc, piece| { acc += piece; acc }), _ => return None, }; Some(parsed) } 00:00
35. import pkg from "./pkg"; let reader = new FileReader(); reader.onload = e => { let data = new Uint8Array(e.target.result); pkg.get_exif(data, (tag, value) => { // ... }); }; reader.readAsArrayBuffer(file); Exif in Wasm
36. What if I want to use my WebAssembly from Node.js? Or if I prefer not to use a bundler? [1] What happens if I try to open a file in Rust: File::open("...")? [2] What types does wasm-bindgen support? How are types converted to JS and viceversa? [3] What is wasm-bindgen polyfilling, i.e. how will Wasm evolve in the future? [4] [5] Are there other ways to target Wasm in Rust? [6] Frinkiac
37. Further Reading The Rust and WebAssembly Book The wasm-bindgen Guide The section on web-sys The wasm-pack site and book The Rust and WebAssembly blog API documentation: wasm-bindgen, js-sys and web-sys The Rust documentation MadRust
38. Enjoy Rust and Wasm!