イベントを使用した相互対話

シナリオによっては、状態の変化やユーザーアクションに対応するために、複数のマイクロフロントエンドが相互にやり取りする必要がある場合があります。例えば、ページ上の複数のマイクロフロントエンドに折りたたみ可能なメニューを含めることができます。ユーザーがボタンを選択すると、メニューが表示されます。ユーザーが他の場所をクリックすると、メニューは非表示になります。これには、別のマイクロフロントエンド内でレンダリングされる別のメニューも含まれます。

技術的には、Redux などの共有状態ライブラリを複数のマイクロフロントエンドで使用して、シェルで調整できます。ただし、これによりアプリケーション間の結合が大きくなり、コードのテストが難しくなり、レンダリング中のパフォーマンスが低下する可能性があります。

一般的で効果的なアプローチの 1 つは、ライブラリとして配布され、アプリケーションシェルによってオーケストレーションされ、複数のマイクロフロントエンドで使用されるイベントバスを開発することです。このようにして、各マイクロフロントエンドは特定のイベントを非同期的に発行してリッスンし、その動作は独自の内部状態のみに基づいて行われます。その後、複数のチームが共有 Wiki ページを維持し、イベントについて説明し、ユーザーエクスペリエンスデザイナーが同意した動作をドキュメント化できます。

イベントバスの実装例では、ドロップダウンコンポーネントは共有バスを使用して、ペイロードが drop-down-open-menuの というイベントを発行します{"id": "homepage-aboutus-button"}。コンポーネントはリスナーをdrop-down-open-menuイベントに追加して、イベントが新しい ID に対して発生した場合にドロップダウンコンポーネントがレンダリングされ、折りたたみ可能なセクションが非表示になります。このようにして、マイクロフロントエンドは、パフォーマンスの向上とカプセル化の向上により、変更に非同期で対応できるため、複数のチームが動作を設計およびテストしやすくなります。

シンプルさと保守性を向上させるために、最新のブラウザによってネイティブに実装された標準 APIs を使用することをお勧めします。MDN イベントリファレンスは、クライアント側でレンダリングされたアプリケーションでのイベントの使用に関する情報を提供します。