Attractions and interests of wasm-bindgen

It's a contents when I presented at Emscripten & WebAssembly night !! #6.
I tried to translate into English.
I hope you'll like wasm-bindgen.
Rust + WebAssembly = 💖

Transcript

1. wasm-bindgen Attractions and interests of emscripten & WebAssembly night !! #6 @T5uku5hi
2. Misaki Makino @T5uku5hi - About me - • Work: Java, Hobby: Rust • I love Rust so much • I held workshop
3. - The goal of this session - Everyone in this session to be … : wasm-bindgen is awesome ! ☺ : I’ll try wasm-bindgen !
4. - What’s wasm-bindgen ? - Roughly summarize • One of the official product in Rust community • Using Rust and JS and WebAssembly in seamless • Amazing to work comfortably with rich types I’ll explain in detail.
5. - Agenda - • What’s WebAssembly? • Converting Rust code to wasm and calling from JS • In case of numbers • In case of strings • Problems in using wasm • What’s wasm-bindgen?
6. - What’s WebAssembly? - • Binary format that runs in modern web browser • Effective compilation target for low-level languages • Users don’t even to know how to create • WebAssembly is not intended as a replacement of JS
7. Complement alongside JS - WebAssembly’s view of world - .rs .cpp .c .go .kt .wasm .wat Compilation target for various languages ❤ .js Having a readable text format
8. - It’s ready ! - .wasm .rs .js ❤ Let’s convert Rust code into WebAssembly, and call from JS !
9. - Writing Rust - $ cargo new --lib add_one $ cd add_one command line [lib] crate-type = ["cdylib"] Cargo.toml #[no_mangle] pub extern fn add_one(x: u32) -> u32 { x + 1 } src/lib.rs
10. - Converting to wasm - $ cargo build --target wasm32-unknown-unknown --release $ wasm-gc target/wasm32-unknown-unknown/release/add_one.wasm -o add_one.gc.wasm // wasm-gc: removes unnecessary binaries command line
11. index.html - Calling from JS -
12. - Displayed in browser -
13. - In case of String - src/lib.rs
14. index.html - In case of String -
15. - Displayed “Hello World” … -
16. is not!? - Displayed “Hello World” … -
17. What’s this mysterious sequence 1048576 ???
18. - Converting .wasm to .wat - $ wasm2wat append_str.wasm -o append_str.wat // I use wabt command line
19. - Decoding it - append_str.wat
20. append_str.wat 1048576 is a String stored address of linear memory ! - I decoded it -
21. - Specification of WebAssembly - • Unit of code is module • Module is represented as one big S-expression • 4 available types: i32, i64, f32, f64 • Providing linear memory to deal with complex data types
22. - Linear memory is ArrayBuffer - < I put something from the memory address 1048576. It does not interpret what String is. Just keep it ! WebAssembly World JS World < It is a 16-byte ArrayBuffer. < Uint8Array is used for View. < I decode with utf8. It’s necessary to decide how far String is and interpret it as a String!
23. Handling String is painful
24. More to say, Other handling is painful too
25. index.html - Calling wasm was also painful -
26. .wasm .js ❤ - It wasn’t a ❤ relationship at all - • Fetch syntax is too long • ArrayBuffer, View implementation required • Decoder required for String These bad userbility is problem.
27. An solution is wasm-bindgen
28. 
    What you can do with wasm-bindgen  .wasm .js ❤ • It automatically implement all painful parts • Using wasm feeling like JS module import • Launching server using npm
29. - Using wasm-bindgen - [dependencies] wasm-bindgen = “0.2” Cargo.toml src/lib.rs
30. $ wasm-pack build // wasm-pack: automatically implement command command line pkg/js_hello_world.js .d.ts bg.d.ts .wasm .js .json Automatically generated under pkg - Using wasm-bindgen -
31. $ npm init $ npm install -D webpack webpack-cli webpack-dev-server command line webpack.config.js - Using wasm-bindgen -
32. index.html index.js - Using wasm-bindgen -
33. domUtils.js src/lib.rs $ wasm-pack build $ npx webpack-dev-server command line - Using wasm-bindgen -
34. - Displayed in browser -
35. - Bonus challenge - lib.rs js-sys and web-sys
36. - Bonus challenge - It’s Mario !
37. • WebAssembly was born to complement alongside JS • Bad usability was problem • wasm-bindgen is awesome tool to solve it Thank you for listening ! - Summary -