Making for Web with WebAssembly

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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

December 15, 2017
Tweet

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 アモリム
  3. None
  4. None
  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
  38. None
  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
  45. None
  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
  57. None
  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
  60. None
  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 アモリム