Testlifyは4つの独立したアプリケーションからなるスイートとして動いていて、それぞれが同じボタンやフォーム、モーダル、テーブルを独自に作り直していた。つまり同じ作業を4回やっていたわけで、プロダクト間でUIがずれていく原因にもなっていた。アプリごとに重複させるのではなく、共通のコンポーネントライブラリを1つにまとめるべきだと主張し、それを作り上げて公開した。

作ったもの

判断: 各アプリが独自のコピーを持ち続けるのではなく、UIを1つのライブラリに統合すべきだと主張した。初期コストと、すでに払っていたずれや重複作業の負担を天秤にかけた上でのことだ。合意が取れた後は、私が構築を担当した。
状態を持たない設計: コンポーネントは状態を持たず、見た目だけを担うものにした。アプリ固有のロジックを含まないので、4つのプロダクトのどれにもそのまま組み込める。データや振る舞いは各アプリ側で配線し、ライブラリは見た目や感触だけを受け持つ。
プライベートなnpmパッケージとして公開: バージョン管理されたプライベートなnpmパッケージとして公開した。各アプリは通常の依存関係として同じコンポーネントを取り込み、バージョンを上げるだけで修正や改善を受け取れる。コピー&ペーストもフォークもいらない。

なぜ意味があったか

UIを一度だけ作って4つのアプリすべてで再利用したことで、機能提供にかかる時間がおよそ**30%**短くなった。チームは同じ部品を作り直すのをやめ、共通のセットから組み立てるようになった。ライブラリを1か所変えれば一斉に反映されるので、スイート全体の見た目も揃った。4か所で手作業でやり直す必要がなくなったのだ。