マイクロフロントエンドの概要

マイクロフロントエンドでは、モノリシックアプリを複数の小さなアプリに分割します。

各アプリは、モノリシック アプリの個別の機能を担当します。
たとえば、
E コマース アプリは、以下の小さな独立したマイクロ フロントエンド アプリに分割できます。

• 製品リスト
• カート
• 送料
• お支払い
• 追跡
• カスタマーサービスなど

なぜマイクロフロントエンドなのか?

• 複数のチームが 1 つの MFE アプリ専用に分離して作業できます。
• コードの再利用性は非常に高いです。
• 各チームは独自のテクノロジー (React/Angular/Vue)、デプロイメント、開発戦略などを自由に選択できます。
• 1 つのアプリがダウンしても、残りのアプリは引き続き動作します。
• 各 MFE アプリは小さいため、理解しやすく、変更も簡単です。

モノリシック vs マイクロ フロントエンド アプリ アーキテクチャ

モノリシック アプリ :- 単一アプリ内の Web アプリケーションのすべての機能。
マイクロフロントエンド アプリ:- 各機能は独立した MFE アプリ、つまり
によって管理されます。 MFE #1 はアプリバーを担当します。
MFE #2 は製品リストを担当します。
MFE #3 はサイド ナビゲーション バーを担当します。
コンテナ アプリは、これらの MFE アプリ間の調整を担当します。

MFE アプリが相互に統合される方法

1. ビルド時統合 (コンパイル時統合)
2. ランタイム統合 (クライアント側統合)
3. サーバー側統合 (SSR 統合)。

ビルド時統合 (コンパイル時統合)
この統合では、コンテナー アプリはすべての MFE アプリのソース コードにアクセスでき、ブラウザーに読み込む前にコンテナー アプリがビルド/コンパイルされるときに、結合されたバンドルが作成されます。

長所

• 設定も理解も非常に簡単です。
• MFE を遅延ロードしてパフォーマンスを向上させることができます。

短所

• MFE npm パッケージに変更を加えるたびに、コンテナ アプリを再構築して再デプロイする必要があります。
• 複数の MFE がコンテナ アプリと密接に結合される場合、MFE アプリが分散モノリシック アプリになる可能性があります。
• 要するに、MFE は NPM パッケージと同様のコンテナ アプリと統合されます。

MFE アプリがビルド時統合に統合される方法 (ここでは E コマース アプリケーションの例を取り上げています)

1. チーム #1、製品リスト MFE アプリを開発します。
2. チーム #1 は、Products-List MFE アプリをデプロイし、NPM パッケージとして公開します。
3. コンテナ アプリを管理するチーム #2 には、Products-List MFE アプリがコンテナ アプリの NPM パッケージ依存関係として含まれています。
4. チーム #2 は、コンテナ アプリ バンドルをコンパイルしてビルドします。このバンドルには、Products-List MFE アプリ コードを含むコンテナ アプリのコードが含まれています。
5. 要するに、MFE は NPM パッケージと同様のコンテナ アプリと統合されます。
6. 以上です。

ランタイム統合 (クライアント側統合)
この統合では、コンテナー アプリがブラウザーに読み込まれると、MFE アプリの URL を使用して MFE アプリにアクセスできるようになります。

長所

• 各 MFE は、コンテナ アプリを再デプロイすることなくデプロイできます。
• 同じ MFE アプリの異なるバージョンを使用でき、コンテナーはどの MFE バージョンをいつ使用するかを決定できるため、テストと統合が簡単になります。
• 各 MFE アプリは、開発目的で独自のツールとライブラリを持つことができます。

短所

• ランタイム MFE は、ビルドタイム MFE よりもセットアップと統合が複雑です。

MFE アプリをランタイム統合に統合する方法 (ここでは電子商取引アプリケーションの例を取り上げています)

1. チーム #1、製品リスト MFE アプリを開発します。
2. チーム #1 が製品リスト MFE を展開します (例: https://mystore.in/productslist.js)
3. コンテナ アプリを管理するチーム #2 は、webpack-module-federation を使用してコンテナ アプリと統合します。
4. ユーザーが https://mystore.in/ を開くと、コンテナ アプリがブラウザにロードされ、Products-List MFE アプリを取得して、コンテナ アプリ ページの定義された場所に表示されます。
5. 以上です。

サービス側統合 (SSR 統合)

この統合では、マイクロフロントエンド アプリは SSR コンポーネントと同様の方法で動作します。すべての MFE アプリはサーバー側で統合され、複合コンテナー アプリがブラウザーに返されます。

長所

• アプリの読み込みが速くなります。
• SEO に優しいアプローチ。

短所

インタラクティブ性が制限されています。
開発への挑戦。

今回は以上です。お時間をいただきありがとうございます。

以上がマイクロフロントエンドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。