イベントを使用したクロスインタラクション

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

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

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

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

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