Rustで自作しながら学ぶ仮想DOM

DOMDOMトークス #1
by Feb 27, 2023

Transcript

1. Rustで自作しながら学ぶ 仮想DOM 0Yu@yud0uhu - DOMDOMトークス #1 - 1
2. 自己紹介 • 名前：0yu（おゆ） • 領域：Webフロントエンド • Like：猫、甘いもの 2 っっっz yud0uhu
3. 仮想DOMを理解したい 3
4. DOMとはなにか • JavaScriptを使ってインタラクティブにHTMLを操作す るためのブラウザAPI • 木構造をしている ◦ HTMLのドキュメントを「ノードツリー(DOMツ リー)」で表現する 4 document.xxx.xxx.element.innerHTML = "Hello World!" ;
5. DOMとはなにか：DOMツリー構造 < html > < head > < title >私のウェブサイト</ title > </ head > < body > < h1 >ようこそ</ h1 > < p >これは私のウェブサイトです。</ p > </ body > </ html > 5 - ドキュメント(ルート) - html - 頭 - タイトル - "私のウェブサイト" - 体 - h1 - "いらっしゃいませ" -p - 「これは私のウェブサイトです。」
6. DOM操作の課題 • 子ノードが複数あった親ノードが変更された場合、全体 の親ノード全体を再構築し、全てのコンテンツを再度レ ンダリングする • Webページが多くのノードを持つほどDOMの更新頻度が 増え、そのたびにレンダリング処理が走る ◦ パフォーマンスの懸念 6
7. 仮想DOMとはなにか • リアルDOMツリーの一部をJavaScriptのオブジェクト (仮想DOMツリー)として表現したもの • 仮想DOMの変更前後で生じた差分を検知し、最低限の変 更のみ実際のリアルDOMに適用させて、DOMの更新頻度 を減らす ◦ コンセプトはDOM操作を最小限に抑え、レンダリング コストを下げること 7
8. 仮想DOMを自作する 8
9. 仮想DOMを自作する • なぜ作る？ ◦ 実際に自分の手を動かすことで、仕組みの理解が深ま るため 9
10. 仮想DOMを自作する • DOM は、特定のプログラミング言語から独立し、文書の 構造表現を単一の一貫した API から利用できるように設 計されています。 ほとんどのウェブ開発者が JavaScript でしか DOM を使用しないとしても、この Python の例 が示すように、 DOM の実装はどの言語でも構築するこ とができます。 ◦ DOM の紹介 - Web API | MDN 10
11. 作ったもの 11
12. 作ったもの • Rust製のミニマムな仮想DOM API • 入力フォームに入力された値を、仮想DOMを介してリア ルタイムにプレビューに同期させる • チェックボックスでプレビューの表示をクリアできる • HTTPサーバーのクレートはseanmonstar/warpを使用 ◦ 非同期処理はtokio、HTTPはhyperがベース 12
13. 作ったもの 13
14. 実装について 14
15. render 15
16. render • 仮想DOMの要素をHTMLドキュメントに変換 16
17. render pub fn virtual_dom_to_html (node: &ElementType) -> String { match node { ElementType::Text(text) => text.clone(), ElementType::Element(tag, attrs, children) => { let attrs_str = attrs . iter() . map(|(key, value)| 17 format!("{}=\"{}\"", key, value)) . collect::<Vec<_>>() . join(" "); let children_str = children . iter() . map(|child| virtual_dom_to_html (child)) . collect::<Vec<_>>() . join(""); format!("<{} {}>{}</{}>", tag, attrs_str, children_str, tag) } } }
18. diff&patch 18
19. diff • 2つの仮想DOMツリーの差分を検出し、更新の必要があ るノードを特定 19 https://engineering.monstar-lab.com/jp/post/2022/05/27/Is-Vir tual-DOM-Outdated/
20. diff 20 pub fn update_dom(old: &VNode, new: &VNode) -> AppResponse { let mut diff = Vec::new(); let removed_nodes = find_removed_nodes (old, new); for removed_node in removed_nodes { diff.push(Diff::RemoveNode(removed_node.clone())); } let added_nodes = find_added_nodes (old, new); for added_node in added_nodes { diff.push(Diff::AddNode(added_node.clone())); } let html = virtual_dom_to_html (&new.element_type); for change in &diff { match change { Diff::AddNode(node) => println!("Added Node: {:?}", node), Diff::RemoveNode(node) => println!("Removed Node: {:?}", node), } } AppResponse { diff, html } }
21. patch • 仮想DOMノードの差分を元に、実際のDOMノードに新し いノードを追加したり、古いノードを削除 21 https://engineering.monstar-lab.com/jp/post/2022/05/27/Is-Vir tual-DOM-Outdated/
22. patch 22 fn find_added_nodes (old: &VNode, new: &VNode) -> Vec<VNode> { let mut added_nodes = Vec::new(); find_added_nodes_recursive (&old.element_type, &new.element_type, &mut added_nodes); added_nodes } fn find_added_nodes_recursive (old: &ElementType, new: &ElementType, added_nodes: &mut Vec<VNode>) { if old != new { if !new.is_empty_text_node () { added_nodes.push(VNode { element_type: new.clone(), }); } } else if let ElementType::Element(_, _, old_children) = old { if let ElementType::Element(_, _, new_children) = new { for (old_child, new_child) in old_children.iter().zip(new_children.iter()) { find_added_nodes_recursive (old_child, new_child, added_nodes); } } } }
23. patch 23 fn find_removed_nodes (old: &VNode, new: &VNode) -> Vec<VNode> { let mut removed_nodes = Vec::new(); find_removed_nodes_recursive (&old.element_type, &new.element_type, &mut removed_nodes); removed_nodes } fn find_removed_nodes_recursive ( old: &ElementType, new: &ElementType, removed_nodes: &mut Vec<VNode>, ) { if old != new { if !old.is_empty_text_node () { removed_nodes.push(VNode { element_type: old.clone(), }); } } else if let ElementType::Element(_, _, old_children) = old { if let ElementType::Element(_, _, new_children) = new { for (old_child, new_child) in old_children.iter().zip(new_children.iter()) { find_removed_nodes_recursive (old_child, new_child, removed_nodes); } } } }
24. Rust製フロントエンドフレームワーク /yew 24
25. yewの紹介 • 仮想DOM+コンポーネントベースでWebを記述できる Rustのフロントエンドフレームワーク • コードはWASMに変換され、ブラウザ上で実行できる 25
26. yewの実装との比較 26
27. render 27
28. 28 https://github.com/yewstack/yew/blob/d0419a278dc126af4556c9afae2ef6b00b5fef36/packages/yew/src/app_handle.rs #L31-L46
29. diff 29
30. 30 https://github.com/yewstack/yew/blob/d0419a278dc126af4556c9afae2ef6b00b5fef36/packages/yew/src/app_handle.rs#L5 9-L61
31. patch 31
32. 32 https://github.com/yewstack/yew/blob/d0419a278dc126af4556c9afae2ef6b00b5fef36/packages/yew/src/app_handle.rs#L6 8-L71
33. 終わりに • yewの内部実装は学びが多そう • Elmライクな構造体componentスタイルが面白そう 33