Vue.jsとReactに対応した社内UI Componentsライブラリを構築した話/Vue.js v-tokyo Meetup #17-link-and-motivation

by リンクアンドモチベーション

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© Link and Motivation Group 3 Party UI Library Headless UI Component 3 Party UI Libraryも現状採用していない。Vue.jsとReactで親和性の高いライブラリを選んでも、見た目や振る舞いに差異がでることが理由。 Headless UI Componentも候補に上がったが、Vue.jsとReactに対応しかつコンポーネント数の多いものが見つからなかったため不採用とした。

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© Link and Motivation Group 👍 コンポーネント実装が割と低コスト VueとReactを別々で実装する場合、単純計算で2倍のコストが必要だが、UI Componentsはデータや状態の複雑な取り扱いが少ないため、Vue.jsやReactに依存するコードが少なく、 JSやCSS（厳密にはTSとSCSS）に切り出して共通化できる割合が多くできた。これがアプリケーションコードだとこの共通化の割合が小さくなると思われる。結果、実装工数が1.x倍程度、2倍を下回るような工数となっている。この工数はコンポーネントによって前後するものの、体感的にも楽と感じている。

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© Link and Motivation Group 👍 UIロジックのUnit Testは一つでいける Next Try ビジュアルリグレッションテストの導入と共通化 VRTはまだ導入できていないが、今後の導入ではここも共通化したいと考えている。そもそもUIなので、ユーザーにどう見えるか、どう振る舞うかが一番大事。今回のUIライブラリはVue.jsとReactでここの差異をなくすことが目的の一つなので、極論になるが同じテストケースに対して同じ結果が得られることが理想的だと考えている。

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© Link and Motivation Group 👎 基盤の構築が大変結果、各設定ごとのルールに沿って共通化をする必要が発生しづらかった。また、スタンダードから外れた構成を取らなければいけない場面も何度か発生し、エディタによってはConfigファイルを認識してくれず、コードジャンプができない等の問題にもぶつかった。先述の通りUIコンポーネントのようにシンプルなものではなく、複雑なものを共通化するのは骨が折れる。ここは工数が2倍以上かかったが、頻繁に改修を入れる部分ではないので許容している。