Making for Web with WebAssembly

WebAssembly or WASM is a low-level bytecode format for in-browser client-side scripting, evolved from JavaScript. Its initial aim is to support compilation from C and C++, though other source languages such as Rust are also supported.

Transcript

1. Making for the Web with WebAssembly @ R A P H A M U N D I アモリム
2. RAPHAEL AMORIM Student • React-tv • globo.com • js foundation • jQuery member • Mozillian • Metido a besta • some git push. 
 Working most part of his open source projects. @ R A P H A M U N D I アモリム
5. @ R A P H A M U N D I 定義 why wasm now?
6. @ R A P H A M U N D I JavaScript was created in 1995
7. @ R A P H A M U N D I It wasn’t designed to be fast, and for the first decade, it wasn’t fast. Then the browsers started getting more competitive.
8. @ R A P H A M U N D I In 2008, a period that people call the performance wars began. Multiple browsers added just-in-time compilers*. * As JavaScript was running, the JIT could see patterns and make the code run faster based on those patterns.
9. @ R A P H A M U N D I The introduction of these JITs led to an inflection point in the performance of JavaScript. Execution of JS was 10x faster.
10. @ R A P H A M U N D I With this improved performance. JavaScript started being used for things no one ever expected it to be used for, like server-side programming with Node.js.
11. @ R A P H A M U N D I The performance improvement made it feasible to use JavaScript on a whole new class of problems.
12. @ R A P H A M U N D I Compile to the web JS is standards-based, runs everywhere Avoid high cost of porting code Reuse existing native libraries
13. @ R A P H A M U N D I faster decoding than JavaScript (up to 20×)
 thread & SIMD support *
14. @ R A P H A M U N D I 定義 WebAssembly (WASM)
15. @ R A P H A M U N D I WebAssembly or WASM is a low-level bytecode format for in-browser client-side scripting, evolved from JavaScript.
16. @ R A P H A M U N D I Initial aim is to support compilation from C and C++, though other source languages such as Rust are also supported.
17. @ R A P H A M U N D I Initial implementation of WebAssembly support in browsers will be based on the featureset of asm.js
18. @ R A P H A M U N D I 定義 ASMJS
19. @ R A P H A M U N D I Intermediate programming language designed to allow computer software written in languages such as C to be run as web applications.
20. @ R A P H A M U N D I Consists of a strict subset of JavaScript, into which code written in statically-typed languages with manual memory management is translated by a source-to-source compiler such as Emscripten (based on LLVM)
21. @ R A P H A M U N D I size_t strlen(char *ptr) { char *curr = ptr; while (*curr != 0) { curr++; } return (curr - ptr); }
22. @ R A P H A M U N D I function strlen(ptr) { ptr = ptr|0; var curr = 0; curr = ptr; while (MEM8[curr]|0 != 0) { curr = (curr + 1)|0; } return (curr - ptr)|0; }
23. @ R A P H A M U N D I Note: Much of performance gain over normal JavaScript is due to 100% type consistency and virtually no garbage collection.
24. @ R A P H A M U N D I 定義 WebAssembly binary format
25. @ R A P H A M U N D I int factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); }
26. @ R A P H A M U N D I get_local 0 i64.eqz if i64 i64.const 1 else get_local 0 get_local 0 i64.const 1 i64.sub call 0 i64.mul end Linear Assembly Bytecode
27. @ R A P H A M U N D I 20 00 50 04 7E 42 01 05 20 00 20 00 42 01 7D 10 00 7E 0B WASM binary encoding
28. @ R A P H A M U N D I The WASM compiler system internally uses s-expressions for parsing simplicity as well to handle intermediate code.
29. @ R A P H A M U N D I (module (type $FUNCSIG$dd (func (param f64) (result f64))) (import "global.Math" "exp" (func $exp (param f64) (result f64))) (memory 256 256) (export "memory" (memory 0)) (func $doubleExp (param $0 f64) (result f64) (f64.mul (call $exp (get_local $0) ) (f64.const 2) ) ) (export "doubleExp" (func $doubleExp)) )
30. @ R A P H A M U N D I 定義 RUST.
31. @ R A P H A M U N D I programming language sponsored by Mozilla Research
32. @ R A P H A M U N D I Safe, concurrent, practical language.
33. @ R A P H A M U N D I Supporting functional and imperative-procedural paradigms.
34. @ R A P H A M U N D I Rust is syntactically similar to C++, but its designers intend it to provide better memory safety while maintaining performance.
35. @ R A P H A M U N D I guaranteed memory safety threads without data races trait-based generics pattern matching <3 type inference minimal runtime efficient C bindings zero-cost abstractions move semantics
36. @ R A P H A M U N D I fn main() { let greetings = [“Ola", "Hello", "Hola", “Bonjour”]; for (num, greeting) in greetings.iter().enumerate() { print!("{} : ", greeting); match num { 0 => println!(“Esse código é modificável e executável!"), 1 => println!("This code is editable and runnable!"), 2 => println!("¡Este código es editable y ejecutable!"), 3 => println!("Ce code est modifiable et exécutable !"), _ => {}, } } }
37. @ R A P H A M U N D I 定義 CREATE WITH RUST/ WASM
39. @ R A P H A M U N D I $ curl https://sh.rustup.rs -sSf | sh
40. @ R A P H A M U N D I $ source $HOME/.cargo/env
41. @ R A P H A M U N D I $ rustup target add wasm32-unknown- emscripten
42. @ R A P H A M U N D I $ curl https://s3.amazonaws.com/mozilla- games/emscripten/releases/emsdk- portable.tar.gz | tar -xv -C ~/
43. @ R A P H A M U N D I $ brew install cmake
44. @ R A P H A M U N D I $ cd ~/emsdk-portable ./emsdk update ./emsdk install sdk-incoming-64bit ./emsdk activate sdk-incoming-64bit
46. @ R A P H A M U N D I $ emcc -v *1.37.9
47. @ R A P H A M U N D I $ cargo init wasm-demo --bin *1.37.9
48. @ R A P H A M U N D I $ rustup override set nightly
49. @ R A P H A M U N D I #[derive(Debug)] enum Direction { North, South, East, West } fn is_north(dir: Direction) -> bool { match dir { Direction::North => true, _ => false, } } fn main() { let points = Direction::South; println!("{:?}", points); let compass = is_north(points); println!("{}", compass); } src/main.rs
50. @ R A P H A M U N D I $ cargo run Compiling wasm-rust v0.1.0 (file:///Users/raphael.amorim/Documents/ gcom/webassembly-and-rust/examples/wasm-rust) Finished dev [unoptimized + debuginfo] target(s) in 0.66 secs Running `target/debug/wasm-rust` South false src/main.rs
51. @ R A P H A M U N D I $ cargo build --target=wasm32-unknown-emscripten --release src/main.rs
52. @ R A P H A M U N D I $ tree target target └── wasm32-unknown-emscripten └── release ├── build ├── deps │ ├── wasm_demo-9c23ae9a241f12fa.asm.js │ ├── wasm_demo-9c23ae9a241f12fa.js │ └── wasm_demo-9c23ae9a241f12fa.wasm ├── examples ├── incremental ├── native ├── wasm-demo.d └── wasm-demo.js (brew install tree for OSX)
53. @ R A P H A M U N D I <html> <head> <script> // This is read and used by `site.js` var Module = { wasmBinaryFile: "site.wasm" } </script> <script src="site.js"></script> </head> <body></body> </html> (brew install tree for OSX)
54. @ R A P H A M U N D I SHELL := /bin/bash all: cargo build --target=wasm32-unknown-emscripten --release mkdir -p site find target/wasm32-unknown-emscripten/release/deps -type f -name "*.wasm" | xargs - I {} cp {} site/site.wasm find target/wasm32-unknown-emscripten/release/deps -type f ! -name "*.asm.js" -name "*.js" | xargs -I {} cp {} site/site.js Automatize it.
55. @ R A P H A M U N D I $ tree site site ├── index.html ├── site.js └── site.wasm
56. @ R A P H A M U N D I cd site && python -m SimpleHTTPServer
58. @ R A P H A M U N D I use std::os::raw::c_char; use std::ffi::CString; use std::collections::HashMap; #[no_mangle] pub fn get_data() -> *mut c_char { let mut data = HashMap::new(); data.insert("Alice", "send"); data.insert("Bob", "recieve"); data.insert("Carol", "intercept"); let descriptions = data.iter() .map(|(p,a)| format!("{} likes to {} messages", p, a)) .collect::<Vec<_>>(); CString::new(descriptions.join(", ")) .unwrap() .into_raw() } fn main() { // Deliberately blank. } src/main.rs
59. @ R A P H A M U N D I var Module = { wasmBinaryFile: "site.wasm", onRuntimeInitialized: main, }; function main() { var getData = Module.cwrap('get_data', 'string', []); console.log(getData()); }; src/main.rs
61. refs|参考⽂文献 github.com/ raphamorim/ wasm-and-rust
62. refs|参考⽂文献 • https://en.wikipedia.org/wiki/WebAssembly • https://en.wikipedia.org/wiki/Rust_(programming_language) • https://hoverbear.org/2017/04/06/the-path-to-rust-on-the-web/ • http://cultureofdevelopment.com/blog/build-your-first-thing-with-web-assembly/ • https://github.com/mbasso/awesome-wasm • https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ • https://github.com/mrfr0g/rust-webassembly • https://internals.rust-lang.org/t/state-of-webassembly-and-rust/6077 • https://www.rust-lang.org/en-US/ • https://hacks.mozilla.org/2017/02/a-crash-course-in-assembly/ • https://www.hellorust.com/emscripten/slides/rbr-talk/ • https://hoverbear.org/2017/03/03/setting-up-a-rust-devenv
63. T H A N K S ! @ R A P H A M U N D I アモリム