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

Misaki Makino

December 16, 2018
Tweet

More Decks by Misaki Makino

Other Decks in Programming

Transcript

  1. Misaki Makino @T5uku5hi - About me - • Work: Java,

    Hobby: Rust • I love Rust so much • I held workshop
  2. - The goal of this session - Everyone in this

    session to be … : wasm-bindgen is awesome ! ☺ : I’ll try wasm-bindgen !
  3. - 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.
  4. - 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?
  5. - 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
  6. 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
  7. - It’s ready ! - .wasm .rs .js ❤ Let’s

    convert Rust code into WebAssembly, and call from JS !
  8. - 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
  9. - 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
  10. - Converting .wasm to .wat - $ wasm2wat append_str.wasm -o

    append_str.wat // I use wabt command line
  11. - 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
  12. - 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!
  13. .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.
  14. 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
  15. $ 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 -
  16. $ npm init $ npm install -D webpack webpack-cli webpack-dev-server

    command line webpack.config.js - Using wasm-bindgen -
  17. • WebAssembly was born to complement alongside JS • Bad

    usability was problem • wasm-bindgen is awesome tool to solve it Thank you for listening ! - Summary -