翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

マイクロフロントエンド間のルーティングと通信

ルーティングオプションは、構成アプローチによって異なります。フロントエンドコンポーネント間の結合を減らすことで、通信を最適化できます。

ルーティング

垂直分割でクライアント側のコンポジションを使用するアプリケーションは、サーバー側のルーティング (複数ページのアプリケーション) またはクライアント側のルーティング (単一ページのアプリケーション) を使用できます。UI コンポジションに混合分割を使用する場合、ページ上のマイクロフロントエンドのより深いルーティング階層をサポートするには、クライアント側のルーティングが必要です。

エッジ側のコンポジションとサーバー側のコンポジションを使用するアプリケーションは、サーバー側のルーティング、または Amazon CloudFront での Lambda@Edge などのエッジコンピューティングによるルーティングにより適しています。

マイクロフロントエンド間の通信

マイクロフロントエンドアーキテクチャでは、フロントエンドコンポーネント間の結合を減らすことをお勧めします。結合を減らす方法の 1 つは、同期関数呼び出しから非同期メッセージングに移行することです。

ブラウザランタイムとユーザーインタラクションは、本質的に非同期です。イベントは、メッセージを通じてプロデューサーとコンシューマーの間で交換できます。イベントは、マイクロフロントエンド間で通信するための明確に定義されたインターフェイスを提供します。

DDD プラクティスに従ってマイクロフロントエンドの境界コンテキストを特定する場合、次のステップは境界を越えて通信する必要があるイベントを特定することです。

イベントのメッセージングメカニズムは、ネイティブ DOM イベント (CustomEvents)、JavaScript イベントエミッタ、またはプラットフォームチームが提供するリアクティブストリームライブラリです。マイクロフロントエンドはイベントを発行し、境界コンテキストに関連するイベントにサブスクライブします。この方法では、パブリッシャーとサブスクライバーが相互に認識する必要はありません。契約はイベント定義です。これの視覚的表現については、イベントアーキテクチャ図の境界コンテキストの「イベントとの通信」セクションを参照してください。 https://eda-visuals.boyney.io/visuals/bounded-context-with-event-architectures