クロスカットの懸念に対する依存関係の管理

マイクロフロントエンドなどの分散アーキテクチャを成功させるには、意識的な依存関係管理が不可欠です。依存関係管理は、マイクロフロントエンド開発の最も困難な部分の 1 つです。

マイクロフロントエンドアーキテクチャでは、依存関係管理の 2 つの重要な点は、大きなコードアーティファクトをクライアントに転送することによるパフォーマンス上のペナルティと、コンピューティングリソースのオーバーヘッドです。理想的には、組織は分散フロントエンドアーキテクチャの依存関係を維持する方法を義務付ける必要があります。

依存関係のメンテナンスを義務付けるための実行可能な戦略は、インポートマップなどのウェブ標準とモジュールフェデレーション を使用して、 を共有しないことです。 他のアプローチは、分散アーキテクチャの基本原則に違反するため、アンチパターンです。

可能な場合は何も共有しない

共有なしのアプローチでは、独立したソフトウェアアーティファクト間の依存関係をまったく共有しないこと、または少なくとも統合時やランタイム時に共有しないことを前提としています。つまり、2 つのマイクロフロントエンドが同じライブラリに依存している場合、それぞれがビルド時にライブラリ内でベークし、個別に出荷する必要があります。また、各マイクロフロントエンドは、ライブラリがグローバル名前空間と共有リソースをポーリングしないことを検証する必要があります。

これは冗長化につながりますが、最大の俊敏性を持つ意識的なトレードオフです。ランタイムの依存関係を共有しない場合、チームはソリューションの範囲内でソフトウェアを進化させ、インターフェイス契約を破らない限り、どのような方法でもソフトウェアを進化させる最大限の柔軟性が得られます。

マイクロフロントエンドが共有なしの原則に従うプラットフォームでは、マイクロフロントエンドを可能な限り軽量に保つことが重要です。これには、パフォーマンスのためにマイクロフロントエンドを最適化することに熟練し、デベロッパーエクスペリエンスのためにユーザーエクスペリエンスを犠牲にしないデベロッパーが必要です。

コードを共有する場合

一部のコードを共有する決定をするときは、ライブラリまたはランタイムモジュールとして共有できます。例えば、フロントエンドコアチームは CDNs を介してマイクロフロントエンド用のライブラリを提供します。ビジネスバリューチームは、実行時にライブラリをロードすることも、パッケージリポジトリを使用してライブラリを公開することもできます。マイクロフロントエンドチームは、ハイブリッドフレームワークを使用するモバイルアプリケーションと同様に、ビルド時にパッケージ化されたライブラリの特定のバージョンに対して開発できます。

3 つ目のオプションは、プライベートパッケージレジストリを使用して、共通ライブラリのビルド時の統合をサポートすることです。これにより、ライブラリ契約の重大な変更によって実行時にエラーが発生するリスクが軽減されます。ただし、このより保守的なアプローチでは、すべてのマイクロフロントエンドを新しいライブラリバージョンと同期させるために、より多くのガバナンスが必要です。

ページのロード時間を短縮するために、マイクロフロントエンドはライブラリの依存関係を外部化して、Amazon などの CDN からキャッシュされたチャンクからロードできます CloudFront。

ランタイムの依存関係を管理するために、マイクロフロントエンドはインポートマップ (または などのライブラリSystem.js) を使用して、実行時に各モジュールがどこからロードされるかを指定できます。webpack モジュールフェデレーションは、リモートモジュールのホストバージョンをポイントし、独立したマイクロフロントエンド間で共通の依存関係を解決するもう 1 つのアプローチです。

もう 1 つの方法は、検出エンドポイント への最初のリクエストを使用してインポートマップの動的ロードを容易にすることです。

共有状態

マイクロフロントエンドの結合を減らすには、モノリシックアーキテクチャと同様に、同じビュー内のすべてのマイクロフロントエンドからアクセス可能なグローバル状態管理を避けることが重要です。例えば、グローバル Redux ストアをすべてのマイクロフロントエンドからアクセス可能にすると、結合が増加します。

共有状態を排除するパターンは、マイクロフロントエンド内にカプセル化し、前述のように非同期メッセージと通信することです。

どうしても必要な場合は、グローバル状態に明確に定義されたインターフェイスを導入し、予期しない動作を避けるために読み取り専用共有をオプトインします。

• 垂直分割が存在する場合は、URL コンポーネントとブラウザストレージを使用してホスト環境の情報にアクセスできます。

• 分割が混在している場合は、イベントエミッタや双方向ストリームなどの DOM 標準のカスタムイベントまたは JavaScript ライブラリを使用して、マイクロフロントエンドに情報を渡すこともできます。

マイクロフロントエンド間で複数の情報を共有する必要がある場合は、マイクロフロントエンドの境界を再検討することをお勧めします。共有の必要性は、ビジネスの進化や初期設計が不十分なことが原因である可能性があります。

また、サーバー側のセッションを使用することもできます。各マイクロフロントエンドは、セッション識別子を使用して必要なデータを取得します。結合を減らすには、共有状態を排除し、マイクロフロントエンド固有のセッションデータを分離しておくことが重要です。