Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Attractions and interests of wasm-bindgen

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 = 💖

E2b3ac88b4244e3addb6b4ba9c2dfcca?s=128

Misaki Makino

December 16, 2018
Tweet

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 -