wasm-bindgen
Attractions and interests of
emscripten & WebAssembly night !! #6
@T5uku5hi
Slide 2
Slide 2 text
Misaki Makino @T5uku5hi
- About me -
• Work: Java, Hobby: Rust
• I love Rust so much
• I held workshop
Slide 3
Slide 3 text
- The goal of this session -
Everyone in this session to be …
: wasm-bindgen is awesome !
☺ : I’ll try wasm-bindgen !
Slide 4
Slide 4 text
- 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.
Slide 5
Slide 5 text
- 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?
Slide 6
Slide 6 text
- 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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
- It’s ready ! -
.wasm
.rs .js
❤
Let’s convert Rust code into WebAssembly,
and call from JS !
Slide 9
Slide 9 text
- 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
- Converting .wasm to .wat -
$ wasm2wat append_str.wasm -o append_str.wat
// I use wabt command line
Slide 19
Slide 19 text
- Decoding it -
append_str.wat
Slide 20
Slide 20 text
append_str.wat
1048576 is a String stored address
of linear memory !
- I decoded it -
Slide 21
Slide 21 text
- 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
Slide 22
Slide 22 text
- 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!
Slide 23
Slide 23 text
Handling String is
painful
Slide 24
Slide 24 text
More to say, Other handling is
painful too
Slide 25
Slide 25 text
index.html
- Calling wasm was also painful -
Slide 26
Slide 26 text
.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.
Slide 27
Slide 27 text
An solution is
wasm-bindgen
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
- Using wasm-bindgen -
[dependencies]
wasm-bindgen = “0.2” Cargo.toml
src/lib.rs
Slide 30
Slide 30 text
$ 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 -
Slide 31
Slide 31 text
$ npm init
$ npm install -D webpack webpack-cli webpack-dev-server
command line
webpack.config.js
- Using wasm-bindgen -
Slide 32
Slide 32 text
index.html
index.js
- Using wasm-bindgen -
Slide 33
Slide 33 text
domUtils.js
src/lib.rs
$ wasm-pack build
$ npx webpack-dev-server
command line
- Using wasm-bindgen -
Slide 34
Slide 34 text
- Displayed in browser -
Slide 35
Slide 35 text
- Bonus challenge -
lib.rs
js-sys and web-sys
Slide 36
Slide 36 text
- Bonus challenge -
It’s Mario !
Slide 37
Slide 37 text
• WebAssembly was born to complement alongside JS
• Bad usability was problem
• wasm-bindgen is awesome tool to solve it
Thank you for listening !
- Summary -