Vaporモードを大規模サービスに最速導入して学びを共有する

Transcript

1. Vaporモードを⼤規模サービスに 最速導⼊して学びを共有する Vue Fes Japan 2024
2. 2 島本 和樹 • 株式会社スタディスト ◦ Teachme Biz の開発 • 最近フロントエンド領域に注⼒ ⾃⼰紹介
3. はじめに 3
4. 4 はじめに Vaporモードをプロダクトに導⼊し パフォーマンス検証をした 取り組みや学びについて共有する 今⽇話すこと
5. 5 はじめに 専⾨領域じゃなくても チャレンジしてみよう！！ と思ってもらう 伝えたいことは
6. • Vaporモードの詳細な中⾝ • 実装内容を踏まえた考察 6 はじめに 話さないこと
7. 7 はじめに 詳しい話はこちらで！
8. Vaporモードとは 01 Teachme BizをVaporモードで動かす 02 VaporモードON/OFFでの⽐較 03 取り組み前の⾃分に向けて 04 はじめに 8 ⽬次
9. Vaporモードとは 01 9
10. 10 Vaporモードとは About Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM. vue-vaporのリポジトリにはこう書かれている https://github.com/vuejs/vue-vapor
11. 11 Vaporモードとは 仮想DOMを使わない 新しいコンパイル戦略 ⾔い換えると
12. 12 Vaporモードとは Vueはコンパイルされて動いている <script setup> import { ref } from 'vue' const msg = ref('Hello World!') </script> <template> <h1>{{ msg }}</h1> <input v-model="msg" /> </template> function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock(_Fragment, null, [ _createElementVNode("h1", null, _toDisplayString($setup.msg), 1 /* TEXT */), _withDirectives(_createElementVNode("input", { "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.msg) = $event)) }, null, 512 /* NEED_PATCH */), [ [_vModelText, $setup.msg] ]) ], 64 /* STABLE_FRAGMENT */)) }
13. 13 Vaporモードとは 仮想DOMが使われている function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock(_Fragment, null, [ _createElementVNode("h1", null, _toDisplayString($setup.msg), 1 /* TEXT */), _withDirectives(_createElement VNode("input", { "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.msg) = $event)) }, null, 512 /* NEED_PATCH */), [ [_vModelText, $setup.msg] ]) ], 64 /* STABLE_FRAGMENT */)) }
14. 14 Vaporモードとは 仮想DOM：DOMツリーの構造を模したオブジェクト div p Hello, World! { type: "div", props: { id: "my-app" }, children: [ { type: "p", props: {}, children: [`Hello World!`] } ] } DOMツリー 仮想DOM
15. 15 Vaporモードとは 従来の実装: 更新コストを抑える⼯夫 div p Hello, World! div p Hi, Vue! 差分だけ更新 変更前 変更後
16. 16 Vaporモードとは 仮想DOMを扱う従来の実装は 更新のコストが抑えられている
17. 17 Vaporモードとは もしも 仮想DOMの差分の計算すらなくせたら…
18. 18 Vaporモードとは Vaporモード そんな夢のような機能を実現しているのが
19. 19 Vaporモードとは • より速い実⾏速度 • より少ないメモリ使⽤量 • より少ないランタイムのコード Vaporモードによってどうよくなるか
20. 20 Vaporモードとは • より速い実⾏速度 • より少ないメモリ使⽤量 • より少ないランタイムのコード Vaporモードによってどうよくなるか
21. 21 Vaporモードとは • より速い実⾏速度 • より少ないメモリ使⽤量 • より少ないランタイムのコード Vaporモードによってどうよくなるか
22. 22 Vaporモードとは • より速い実⾏速度 • より少ないメモリ使⽤量 • より少ないランタイムのコード Vaporモードによってどうよくなるか
23. 23 Vaporモードとは Vaporモードすごい！ 良さそう！！
24. Teachme BizをVaporモードで動かす 02 24
25. 25 Teachme BizをVaporモードで動かす Vaporモードの恩恵は 実際のプロダクトレベルでどれくらい？
26. 26 Teachme BizをVaporモードで動かす 導⼊社数 国内 2,000 社 海外 100社 マニュアル作成‧共有システム ビジュアルベースの⼿順書で 「伝えることを、もっと簡単に。」
27. 27 Teachme BizをVaporモードで動かす • コンポーネント数: 573 • ページ数: 142 Teachme Bizの規模
28. 28 Teachme BizをVaporモードで動かす VaporモードはR&D段階 しかし‧‧‧
29. 29 Teachme BizをVaporモードで動かす Teachme Bizに導⼊するのは難しい 簡単には試せないか…
30. 30 vue-vaporリポジトリを眺めてみる
31. 31 Teachme BizをVaporモードで動かす Playgroundを発⾒！！
32. 32 Teachme BizをVaporモードで動かす ここで Teachme Biz を動かすことならできる
33. 33 Teachme BizをVaporモードで動かす DOM操作が多い編集画⾯をPlaygroundに！
34. 34 Teachme BizをVaporモードで動かす マニュアル編集画⾯ Options APIのコンポーネント約130個
35. 35 Teachme BizをVaporモードで動かす Vaporモード 現在Options APIはサポートしていない
36. 36 Teachme BizをVaporモードで動かす 約130個のコンポーネントをすべて Composition API形式に 書き換えて実装する必要がある
37. 37 Teachme BizをVaporモードで動かす 約130個のコンポーネントをすべて Composition API形式に 書き換えて実装する必要がある
38. 38 Teachme BizをVaporモードで動かす 130個…
39. 39 Teachme BizをVaporモードで動かす AI と ⼿作業 どのように約130個を書き換えたか
40. 40 Teachme BizをVaporモードで動かす プロンプトは結構シンプル メインの指⽰ 不⾜があれば 指⽰を追加
41. 41 Teachme BizをVaporモードで動かす 作業の流れ AIで変換して追加 参照ファイル‧静的アセット追加 表⽰を確認 エラーがあれば修正
42. 42 Teachme BizをVaporモードで動かす 作業の流れ AIで変換して追加 参照ファイル‧静的アセット追加 表⽰を確認 エラーがあれば修正 130回 繰り返す
43. 43 Teachme BizをVaporモードで動かす 作業の流れ AIで変換して追加 参照ファイル‧静的アセット追加 表⽰を確認 エラーがあれば修正 130回 繰り返す
44. 44 Teachme BizをVaporモードで動かす 作業の流れ 130回 繰り返す AIで変換して追加 参照ファイルやiconを追加 ルートページ（App.vue）に表⽰ エラーがあれば修正 結構動かないです
45. 45 Teachme BizをVaporモードで動かす VaporモードはR&Dなので当然
46. 46 Teachme BizをVaporモードで動かす 発⽣したエラーや動かなかったこと と その対応を紹介 事象は9⽉4⽇時点のコードで発⽣ 現在は修正されているものもあります
47. 47 Teachme BizをVaporモードで動かす slotにカスタムコンポーネントを差し込む際 名前指定が必要 <template> <ParentComp> <ChildComp> </ParentComp> </template> <template> <ParentComp> <template #default> <ChildComp> </template> </ParentComp> </template> 動かない 動く！
48. 48 Teachme BizをVaporモードで動かす slotにカスタムコンポーネントを差し込む際 名前指定が必要 <template> <ParentComp> <ChildComp> </ParentComp> </template> <template> <ParentComp> <template #default> <ChildComp> </template> </ParentComp> </template> 動かない 動く！ 名前指定なし
49. 49 Teachme BizをVaporモードで動かす slotにカスタムコンポーネントを差し込む際 名前指定が必要 <template> <ParentComp> <ChildComp> </ParentComp> </template> <template> <ParentComp> <template #default> <ChildComp> </template> </ParentComp> </template> 動かない 動く！ defaultと指定する
50. 50 Teachme BizをVaporモードで動かす フォールスルー属性が付与されない <template> <MyComp class="hoge" style="color: red;" /> </template> // 実際のHTML要素 <template> <!-- ↓ここにclass, styleが付与されない --> <div class="my-comp"> <p>My Comp</p> </div> </template>
51. 51 Teachme BizをVaporモードで動かす フォールスルー属性が付与されない <template> <MyComp class="hoge" style="color: red;" /> </template> // 実際のHTML要素 <template> <!-- ↓ここにclass, styleが付与されない --> <div class="my-comp"> <p>My Comp</p> </div> </template>
52. 52 Teachme BizをVaporモードで動かす フォールスルー属性が付与されない <template> <MyComp class="hoge" style="color: red;" /> </template> // 実際のHTML要素 <template> <!-- ↓ここにclass, styleが付与されない --> <div class="my-comp"> <p>My Comp</p> </div> </template>
53. 53 Teachme BizをVaporモードで動かす フォールスルー属性がつかない（対策） <script setup lang="ts"> const styleObj = ref({ color: 'red' }) </script> <template> <MyComp :styleObj="styleObj" /> </template> <script setup lang="ts"> const props = defineProps<{ styleObj?: obj | null }>() </script> <template> <div class="my-comp" :style="props.styleObj"> <p>My Comp</p> </div> </template> Parent.vue MyComp.vue
54. 54 Teachme BizをVaporモードで動かす フォールスルー属性がつかない（対策） <script setup lang="ts"> const styleObj = ref({ color: 'red' }) </script> <template> <MyComp :styleObj="styleObj" /> </template> <script setup lang="ts"> const props = defineProps<{ styleObj?: obj | null }>() </script> <template> <div class="my-comp" :style="props.styleObj"> <p>My Comp</p> </div> </template> Parent.vue MyComp.vue
55. 55 Teachme BizをVaporモードで動かす フォールスルー属性がつかない（対策） <script setup lang="ts"> const styleObj = ref({ color: 'red' }) </script> <template> <MyComp :styleObj="styleObj" /> </template> <script setup lang="ts"> const props = defineProps<{ styleObj?: obj | null }>() </script> <template> <div class="my-comp" :style="props.styleObj"> <p>My Comp</p> </div> </template> Parent.vue MyComp.vue
56. 56 Teachme BizをVaporモードで動かす フォールスルー属性がつかない（対策） <script setup lang="ts"> const styleObj = ref({ color: 'red' }) </script> <template> <MyComp :styleObj="styleObj" /> </template> <script setup lang="ts"> const props = defineProps<{ styleObj?: obj | null }>() </script> <template> <div class="my-comp" :style="props.styleObj"> <p>My Comp</p> </div> </template> Parent.vue MyComp.vue
57. 57 Teachme BizをVaporモードで動かす v-for × v-on でオブジェクトの省略記法 <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item })" > </li> </ul> </template> <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item: item })" > </li> </ul> </template> 動かない 動く！
58. 58 Teachme BizをVaporモードで動かす v-for × v-on でオブジェクトの省略記法 <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item })" > </li> </ul> </template> <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item: item })" > </li> </ul> </template> 動かない 動く！
59. 59 Teachme BizをVaporモードで動かす v-for × v-on でオブジェクトの省略記法 <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item })" > </li> </ul> </template> <template> <ul> <li v-for="item in items" :key="item.id" @click="handler({ item: item })" > </li> </ul> </template> 動かない 動く！
60. 60 Teachme BizをVaporモードで動かす • pinia, vuex ◦ provide / inject で対応 • vue-router ◦ インターフェースを揃えたオブジェクトで代替 • vue-3-slider ◦ Composition API形式に書き換え • サードパーティ製のコンポーネント ◦ 使わずに置き換え 各種ライブラリが動かない
61. 61 Teachme BizをVaporモードで動かす • slot名にケバブケースが使えない (現在修正済み) ◦ slotを使わない形に変更 • ネイティブイベントが emit されていない ◦ 明⽰的に emit するように • 名前付き slot 内の v-for がリアクティブではない ◦ slot を使わない その他の事象
62. 62 Teachme BizをVaporモードで動かす 130個… 頑張ってComposition APIに書き換えていき
63. 63 Teachme BizをVaporモードで動かす
64. VaporモードON/OFFでの⽐較 03 64
65. 65 VaporモードON/OFFでの⽐較 PlaygroundではVaporモードのON/OFFができる plugins: [ Vue({ vapor: true, compiler: CompilerSFC, }), vite.config.ts
66. 66 VaporモードON/OFFでの⽐較 仮想DOM(VNode)の処理有無が切り替わる Vapor: ON Vapor: OFF
67. 67 VaporモードON/OFFでの⽐較 以下がよくなっていることを確認したい Vaporでよくなること より速い実⾏速度 より少ないメモリ使⽤量 より少ないランタイムのコード
68. 68 VaporモードON/OFFでの⽐較 3つの項⽬で⽐較 Vaporでよくなること より速い実⾏速度 より少ないメモリ使⽤量 より少ないランタイムのコード 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス 検証項⽬
69. 69 VaporモードON/OFFでの⽐較 • PC ◦ チップ: Apple M1 Pro ◦ メモリ: 32 GB • パフォーマンス検証は5回ずつ計測し平均値を算出 全項⽬で共通の条件
70. 70 VaporモードON/OFFでの⽐較 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス ⽐較する項⽬
71. 71 VaporモードON/OFFでの⽐較 App.vueに130個のコンポーネントを⼀覧
72. 72 VaporモードON/OFFでの⽐較 バンドルサイズの出⼒⽅法 rollup-plugin-visualizer を使⽤
73. 73 VaporモードON/OFFでの⽐較 バンドルサイズの⽐較⽅法
74. 74 VaporモードON/OFFでの⽐較 バンドルサイズの⽐較⽅法 若⼲Vapor ONの⽅が サイズが⼩さい
75. 75 VaporモードON/OFFでの⽐較 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス ⽐較する項⽬
76. 76 VaporモードON/OFFでの⽐較 以下の画⾯を表⽰したときのパフォーマンスを計測 1ステップ x 50
77. 77 VaporモードON/OFFでの⽐較 計測にはChromeのパフォーマンスタブを使⽤
78. 78 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) 初期描画でよく⾒られる項⽬は以下
79. 79 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) ◦ 最初のコンテンツが表⽰されるまでの時間 • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) 初期描画でよく⾒られる項⽬は以下
80. 80 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) ◦ 最⼤のコンテンツが表⽰されるまでの時間 • Total Blocking Time (TBT) 初期描画でよく⾒られる項⽬は以下
81. 81 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) ◦ FCPからユーザー操作が可能になるまでの時間 初期描画でよく⾒られる項⽬は以下
82. 82 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) どの値を⽐較するか
83. 83 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) どの値を⽐較するか
84. 84 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) どの値を⽐較するか
85. 85 VaporモードON/OFFでの⽐較 • First Contentful Paint (FCP) • Largest Contentful Paint (LCP) • Total Blocking Time (TBT) FCP (=LCP) を⽐較
86. 86 VaporモードON/OFFでの⽐較
87. 87 VaporモードON/OFFでの⽐較 Vaporモード ONの⽅が 88 ms 早く コンテンツが描画
88. 88 VaporモードON/OFFでの⽐較 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス ⽐較する項⽬
89. 89 VaporモードON/OFFでの⽐較 タイトル⼊⼒時のパフォーマンスを確認 ステップ1を 更新すると 残り49ステップ も更新される = 50箇所同時更新
90. 90 VaporモードON/OFFでの⽐較 0.2秒間隔で20回⼊⼒
91. 91 VaporモードON/OFFでの⽐較 計測にはChromeのパフォーマンスタブを使⽤
92. 92 VaporモードON/OFFでの⽐較 • 速度 ◦ スクリプト ◦ レンダリング ◦ ペイント • ヒープメモリ 更新パフォーマンスを速度とメモリで⽐較
93. 93 VaporモードON/OFFでの⽐較 • 速度 ◦ スクリプト ◦ レンダリング ◦ ペイント • ヒープメモリ 速度については3つの結果を確認
94. 94 VaporモードON/OFFでの⽐較
95. 95 VaporモードON/OFFでの⽐較 スクリプティングの時間が Vapor ONの方がすごく短い
96. 96 VaporモードON/OFFでの⽐較 レンダリング・ペイント ほとんど差がない
97. 97 VaporモードON/OFFでの⽐較 レンダリング・ペイント ほとんど差がない 仮想DOMの有無には関係がない
98. 98 VaporモードON/OFFでの⽐較 • 速度 ◦ スクリプト ◦ レンダリング ◦ ペイント • ヒープメモリ ヒープメモリは最⼩値と最⼤値を確認
99. 99 VaporモードON/OFFでの⽐較
100. 100 VaporモードON/OFFでの⽐較 Vapor ONの⽅がわずかに⼩さい
101. 101 VaporモードON/OFFでの⽐較 各項⽬でVapor ONの⽅が 良い結果が⾒られた
102. 102 VaporモードON/OFFでの⽐較 要素数を増やしたらもっと差がでるのだろうか 🤔
103. 103 VaporモードON/OFFでの⽐較 追加でパフォーマンス検証を実施
104. 104 VaporモードON/OFFでの⽐較 要素数を⼀気に増やす！！ 1ステップ x 1000
105. 105 VaporモードON/OFFでの⽐較 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス 検証項⽬ 1000ステップ版！
106. 106 VaporモードON/OFFでの⽐較
107. 107 VaporモードON/OFFでの⽐較 Vapor ON の⽅が 描画がめっちゃ速い 4秒くらい差がある
108. 108 VaporモードON/OFFでの⽐較 1. バンドルサイズ 2. 初期描画のパフォーマンス 3. 更新描画のパフォーマンス 検証項⽬ 1000ステップ版！
109. 109 VaporモードON/OFFでの⽐較
110. 110 VaporモードON/OFFでの⽐較 スクリプティングは Vapor ON の⽅が すごく短い
111. 111 VaporモードON/OFFでの⽐較 レンダリングとペイントの時間が Vapor ONのほうが⻑い!？
112. 112 VaporモードON/OFFでの⽐較 VaporモードONによって レンダリング‧ペイントの時間伸びたのか？ レンダリングとペイントは同じになるはずなのに
113. 113 VaporモードON/OFFでの⽐較 動作を⾒ると原因がわかった Vapor ON: 更新 18回 Vapor OFF: 更新 5回
114. 114 VaporモードON/OFFでの⽐較 描画更新の回数が Vapor ON の⽅が多かった
115. 115 VaporモードON/OFFでの⽐較 ヒープメモリの⽐較
117. 117 Vapor OFF(仮想DOM有り)は 最⼩と最⼤の差が⼤きい
118. 118 VaporモードON/OFFでの⽐較 • バンドルサイズ • 初期描画のパフォーマンス • 更新描画のパフォーマンス • 初期描画のパフォーマンス • 更新描画のパフォーマンス 各項⽬においてVaporが優れていることが確認できた ⽐較検証のまとめ 1000ステップ版！ 1000ステップ版！
119. 119 VaporモードON/OFFでの⽐較 Vaporすごい！
120. 120 VaporモードON/OFFでの⽐較 これが脱仮想DOMの⼒か！！ と思いきや
121. 121 VaporモードON/OFFでの⽐較 ubugeeeiさん 脱仮想DOMがメインですが 処理の最適化も⼊ってますよ！
122. 122 VaporモードON/OFFでの⽐較 Vaporについての理解はまだまだこれからだ 完
123. 取り組み前の⾃分に向けて 04 123
124. 124 取り組み前の⾃分に向けて Vue の公式ドキュメントを隅から隅まで読め！
125. 125 取り組み前の⾃分に向けて 「フォールスルー属性」も知らなかった
126. 126 取り組み前の⾃分に向けて 公式ドキュメントに載っている
127. 127 知っているとすぐ対応できる • 動かない原因に気づける • 調べることができる • 対応策を考えられる
128. 128 取り組み前の⾃分に向けて 必要なことはVueの公式ドキュメントに書いてある Vue の公式ドキュメントを 隅から隅まで読め！
129. 129 取り組み前の⾃分に向けて 深い部分はubugeeeiさんのコンテンツを読もう！ 上質なコンテンツを⽇本語で出してくれている
130. 130 取り組み前の⾃分に向けて パフォーマンス検証はChromeで結構できるぞ https://developer.chrome.com/docs/devtools/performance?hl=ja
131. 131 取り組み前の⾃分に向けて CfPを出してみよう！！！ とにかく
132. 132 取り組み前の⾃分に向けて • フロントエンドの専⾨じゃない⾃分には出せないだろう • 最新の技術を試すなんて本当にできるのか？ CfP出す前の⾃分の気持ち
133. 133 取り組み前の⾃分に向けて わからない‧難しいことはもちろんあった Vaporモードの導⼊が簡単にできなかった図
134. 134 取り組み前の⾃分に向けて わからない‧難しいことはもちろんあった 130個のコンポーネント書き換えにビビる図
135. 135 取り組み前の⾃分に向けて なんだかんだ乗り越えられた！！
136. 136 取り組み前の⾃分に向けて 専⾨領域 じゃなくても チャレンジできるぞ！！
137. 137 取り組み前の⾃分に向けて • 登壇駆動でたくさん勉強することができた • フロントエンドの専⾨性を深めたい！ という気持ちが強まった やってみたらどうなった？
138. さいごに 138
139. 139 さいごに • Composition API へ書き換え実施予定 ◦ Vapor モードをすぐに使えるように • フロントエンドの改善活動をやっていくぞ！！ ◦ 継続的なパッケージ最新化 ◦ 新しいツールの調査や導⼊ 今後の活動
140. 140 さいごに 30⽇にアフターイベントやるのできてね
141. 141 さいごに special thanks ubugeeeiさん
142. https://studist.jp/