レジストリ・アーキテクチャ

GitLabにはいくつかのレジストリアプリケーションがあります。どれも似たようなUI、UX、ビジネスロジックを活用していることから、同じアーキテクチャで作られています。さらに、ユーザーと開発者のエクスペリエンスを統一するための共有コンポーネントもすでに存在しています。

既存のレジストリ：

  • パッケージ・レジストリ
  • コンテナレジストリ
  • Terraform モジュールのレジストリ
  • 依存関係プロキシ

フロントエンドアーキテクチャ

コンポーネントの分類

すべてのレジストリは、4つのコンポーネントタイプを含むアーキテクチャパターンに従っています：

  • Pages：アプリ全体を表します。vue-routerを使用するレジストリの場合は、1つのルータ・ルートを表します。
  • コンテナ：1つの機能を表します。コンテナには複雑なロジックが含まれ、APIに接続することもできます。
  • Presentationals: UIの一部を表します。すべてのデータをprops またはinject で受け取り、API には接続しません。
  • 共有コンポーネント: さまざまな設定を受け入れ、すべてのレジストリで共有されるプレゼンテーションコンポーネント。

APIとの通信

複雑なAPIとの通信は、Pagesコンポーネントと、必要に応じてコンテナコンポーネントに集中させるべきです。これにより、以下のことが容易になります：

  • 同時リクエスト、ロード状態、ユーザーメッセージの処理。
  • コードのメンテナー、特に作業の見積もり。ページや機能コンポーネントに触れる場合は、より複雑になることが予想されます。
  • 高速で一貫性のあるユニットテストを書きましょう。

ベストプラクティス

  • アプリの初期化から来る静的で反応しない値を渡すには、provide またはinject を使用してください。
  • データを渡すときは、ネストされたクエリやVuexバインディングよりもprops 。ページとコンテナコンポーネントのみが、状態とAPI通信を認識する必要があります。
  • 同じことを繰り返さないようにしましょう。あるレジストリが機能を受け取ると、他のレジストリも将来それを必要とする可能性が高くなります。再利用可能で、ステートに束縛されないものがあれば、共有コンポーネントを作成しましょう。
  • 機能やロジックは専用のコンポーネントで表現するようにしましょう。コールバックや非同期コードよりも、イベントやプロパティを扱う方がはるかに簡単です (delete_package.vue を参照)。
  • GraphQL呼び出しにスタートアップを活用しましょう。

共有コンポーネントライブラリ

vue_shared/components/registry とpackages_and_registries/shared の内部には、レジストリ機能を実装するために使用できる共有コンポーネントのセットがあります。これらのコンポーネントはレジストリページのUIとUXの主要な部分を構築します。最も重要なコンポーネントは次のとおりです：

  • code-instruction: コードを含むコピー可能なボックスを表します。複数行および単一行のコードボックスをサポートします。Snowplow はコードのコピーイベントを追跡します。
  • details-row: 詳細の行を表します。list-item コンポーネントの詳細領域に追加情報を追加するために使用します。
  • history-item: タイムラインを構築するために使用されるヒストリーリストアイテムを表します。
  • list-item: レジストリ内のリスト要素を表します。左のアクション、左のプライマリとセカンダリのコンテンツ、右のプライマリとセカンダリのコンテンツ、右のアクション、詳細スロットをサポートしています。
  • metadata-item: アイコンまたはリンクで、1つのメタデータを表します。主にタイトル領域で使用されます。
  • persisted-dropdown-selection: ユーザーの選択をlocalStorage に保存するメニューを表します。
  • registry-search:gl-filtered-search 、右側にソートセクションを実装しています。
  • title-area: レジストリのトップタイトル領域を実装します。含まれるもの：メインタイトル、アバター、サブタイトル、メタデータ行、右アクションスロット。

新しいレジストリページの追加

新しいレジストリを追加する場合：

  • すでに存在する共有コンポーネントを活用してください。より成熟したレジストリ(例えばパッケージレジストリ)でコンポーネントがどのように構造化され使用されているかを見ることは良いことです。
  • バックエンドの要件に合致しているのであれば、APIにGraphQLを使用することをお勧めします。これはレジストリの生来のパフォーマンス問題に対処するのに役立ちます。
  • 可能であれば、Vue Routerとフロントエンドのルーティングを使用することをお勧めします。Apolloと組み合わせることで、キャッシュレイヤーがページのパフォーマンス向上に役立ちます。