React Shared Components は以下の2つのパッケージ提供します
shared components: v1~v3 も含めて複数箇所で共有する Frontend v4 の技術をベースとしたコンポーネント
frontendx: Frontend v4 の各リポジトリ間で共有される React Hooks 、ユーティリティ servicex の思想を引き継いでいる
Webアプリのアーキテクチャに記載があるように、 Wantedly のフロントエンドのアーキテクチャは技術スタックをアップデートしてきました。 そのため現在はフロントエンドのコードは複数のリポジトリに分かれています。
複数リポジトリにフロントエンドのコードがある一方で
ヘッダー
サイドバー
フッター
といったナビゲーションなどのコンポーネントはリポジトリ間で共通の UI が存在しています。 例： 以下の画面はそれぞれ異なるリポジトリで実装されており、青色で囲われた部分は共通の UI です。
これらコンポーネントを複数リポジトリで個別で管理すると
デザインの一貫性が担保できなくなる（特定のリポジトリのみが修正されている状態になる等が発生する）
個別で実装することでの機能差分が生まれる（特例のリポジトリのみ独自の機能が追加されている状態になる）
など、メンテナンス性・安定性を損ねることになります。 そのためこれらコンポーネントをパッケージ化するために shared components が誕生しました。
shared components
Frontend v4 のリポジトリでは、コンポーネントだけではなく、
Feature Flagsの管理
A/Bテストの状態管理
といった React hooks /ユーティリティについても個別に実装されるという事象が発生していました。 これらもコンポーネントと同様に個別で実装されることでメンテナンス性・安定性を損ねていると言う問題があり、 frontendx が誕生しました。 またこれら共通化を行うコードは共通のコンポーネントである shared components からも利用されうるというところから、 React Shared Components にて管理がされています。
frontendx
React Shared Components
Frontend v4 におけるコンポーネントの共有
Frontend v1~v3 から v4 移行を前提とした全アーキテクチャでのコンポーネント共有
単一リポジトリでしか使用しないコンポーネントの提供
shared components を含む Frontend v4 で利用されるコードの共有
単一リポジトリでしか使用しないコードの提供
Frontend v1~v3 での直接的な利用
frontendxは v4 でのコードを共有することを目的としている
shared components は v4 でのコンポーネントを v1~v3 で利用できるようにする
そのため frontendx は shared components をサポートし、 v1~v3 にて利用することで間接的に利用されることを許容する
React Shared Components はここまで記載した通り、 Wantedly における機能を提供します。 一方 UI は、デザインシステムで規定されている全プロダクト共通の UI システムやコンポーネントを提供します。 前者は機能を、後者は UI システムやコンポーネントを提供すると言う責務の違いがあります。
現在提供されているパッケージは以下のREADMEを参照してください react-shared-components README(internal)
原則として1つの共通コンポーネントを1つのパッケージとして提供しています。 e.g.) ヘッダー/フッター
使わないコンポーネントを install しないため、単位でパッケージを提供しています。 また上記の理由から React Shared Components は monorepo で、管理されています。
Slack: #frontend_chapter
Lerna による monorepo の管理について (internal)
react-shared-components デザインドキュメント (internal)
最終更新 17 日前
