rust for web app

This presentation is #Zli_DeNA_LT .

Transcript

1. rust for webapp(wasm) 2020/1/22
2. self introduction • poccariswet • 4nen • skill golang, rust, video/live streaming • like radio
3. contents • 作ったやつ ◦ 実装 ◦ wasm-bindgen ◦ ポイント • 思ったこと • 今後...
4. Last time • APNG ライブラリの作成(rust) ◦ https://github.com/poccariswet/apng • APNG generator for web の作成 (rust, js) ◦ https://apng-maker.netlify.com • イマココ ◦ 複数のpngからAPNGを作ることはできた。じゃあ次は 0からAPNGを作ろう
5. Last time • APNG ライブラリの作成(rust) ◦ https://github.com/poccariswet/apng • APNG maker for web の作成 (rust, js) ◦ https://apng-maker.netlify.com • イマココ ◦ 複数のpngからAPNGを作ることはできた。じゃあ次は 0からAPNGを作ろう
6. APNG • Animated PNGの略 • PNGファイルをアニメーション(連番画像)のように表現した画像のこと • PNGフォーマットを拡張してできた画像のこと ◦ acTL(Animation Controlチャンク) ◦ fcTL(Frame Controlチャンク) ◦ fdAT(Frame Dataチャンク)
7. APNG library https://qiita.com/poccariswet/items/677fda45f837f4d1dc3c https://github.com/poccariswet/apng
8. Last time • APNG ライブラリの作成(rust) ◦ https://github.com/poccariswet/apng • APNG generator for web の作成 (rust, js) ◦ https://apng-maker.netlify.com • イマココ ◦ 複数のpngからAPNGを作ることはできた。じゃあ次は 0からAPNGを作ろう
9. APNG maker https://github.com/poccariswet/apng-maker-wasm https://apng-maker.netlify.com/
10. Last time • APNG ライブラリの作成(rust) ◦ https://github.com/poccariswet/apng • APNG generator for web の作成 (rust, js) ◦ https://apng-maker.netlify.com • イマココ ◦ 複数のpngからAPNGを作ることはできた。じゃあ次は 0からAPNGを作ろう
11. drawasm • rust (wasm) だけ • 絵や文字を書いてAPNGを作れる • APNGのframe speedの調整可能 https://drawasm.netlify.com/
12. drawasm https://drawasm.netlify.com/
13. drawasm import * as wasm from "drawing-wasm"; wasm.run(); ちなみに、jsを書いたのはこれだけ ...
14. Implementation • state management • EventListener • APNG generate
15. • wasmとjsのインターフェース • rustのメソッド、構造体を jsのクラスに • wasm とjs間 のinterface ◦ js-sys ◦ web-sys ◦ console_error_panic_hook • 最近、pull requestした wasm-bindgen
16. state management • Arc/Rc : 共有スマートポインタ (Rcはシングルスレッド) ◦ 複数のデータや状態を共有 • RefCell : 内部可変性コンテナ ◦ 実行時に精査される可変借用を許可する、 RefCellが不変でもRefCell内の値を可変化する let state: Rc<RefCell<state::State>> = Rc::new(RefCell::new(state::State::new(canvas_w, canvas_h))); これで複数のオブジェクト間での状態の共有ができる https://github.com/poccariswet/drawasm/blob/master/src/lib.rs#L60-L61
17. EventListener let picked_color = Closure::wrap(Box::new(move |e: Event| { let target = e.target().unwrap().dyn_into::<HtmlInputElement>().unwrap(); let color = target.value(); state.borrow_mut().set_color(color) }) as Box<dyn FnMut(_)>); input.add_event_listener_with_callback("change", picked_color.as_ref().unchecked_ref())?; picked_color.forget(); //⚠注意点 • jsでのEventListenerのClosureを作る ◦ Closure::wrap: rustのクロージャをラップして、 JSでもrustのクロー ジャを使用できるようにする。 https://github.com/poccariswet/drawasm/blob/master/src/toolbar.rs#L177-L183
18. EventListener • Box::newでヒープメモリに割り当てる ◦ Js側(browser)とClosureを共有するため https://github.com/poccariswet/drawasm/blob/master/src/toolbar.rs#L177-L183 let picked_color = Closure::wrap(Box::new(move |e: Event| { let target = e.target().unwrap().dyn_into::<HtmlInputElement>().unwrap(); let color = target.value(); state.borrow_mut().set_color(color) }) as Box<dyn FnMut(_)>); input.add_event_listener_with_callback("change", picked_color.as_ref().unchecked_ref())?; picked_color.forget(); //⚠注意点
19. EventListener (point!) • forget() : 意図的なメモリリーク(Dropしない) ◦ スコープを抜けても定義した Closureがdropしないので、EventListenerとして利用 可能 ◦ このクロージャをシークして、プログラム全体の期間中有効にする https://github.com/poccariswet/drawasm/blob/master/src/toolbar.rs#L177-L183 let picked_color = Closure::wrap(Box::new(move |e: Event| { let target = e.target().unwrap().dyn_into::<HtmlInputElement>().unwrap(); let color = target.value(); state.borrow_mut().set_color(color) }) as Box<dyn FnMut(_)>); input.add_event_listener_with_callback("change", picked_color.as_ref().unchecked_ref())?; picked_color.forget(); //⚠注意点
20. APNG generate • 自作したAPNGエンコーダーで、stateに保存されている PNGデータをAPNGにエンコードする • エンコード後のbufferを Blob::new_with_u8_array_sequence_and_options 　で Blobに変 換 • js側(browser) でも相互作用できるようにUint8Array型 に変換して線形メモリ(linear memory) へビューする。 • open_with_url() で次タブで開く https://github.com/poccariswet/drawasm/blob/master/src/generate.rs#L149-L159
21. APNG generate https://github.com/poccariswet/drawasm/blob/master/src/generate.rs#L149-L159 let b = js_sys::Uint8Array::new(&unsafe { js_sys::Uint8Array::view(&buf) }.into()); let array = js_sys::Array::new(); array.push(&b.buffer()); let blob = Blob::new_with_u8_array_sequence_and_options( &array, BlobPropertyBag::new().type_("image/png"), ) .unwrap(); let url = Url::create_object_url_with_blob(&blob).unwrap(); let window = window().unwrap(); window.open_with_url(&url).unwrap(); • js側(browser) でも相互作用できるようにUint8Array型に変 換して線形メモリ(linear memory) へビューする。 • open_with_url() で次タブで開く
22. https://drawasm.netlify.com
23. • 思ったこと ◦ mem::forget関数などのrust独自の面白い関数に出会えよかった ◦ ある程度はjsでいい
24. • 今後 ◦ 足りない機能の追加 ◦ バグを取り除く ◦ wasm-bindgenに恩返し(コントリビュート)
25. Thanks!!!