マイクロフロントエンドでは、モノリシックアプリを複数の小さなアプリに分割します。
各アプリは、モノリシック アプリの個別の機能を担当します。
たとえば、
E コマース アプリは、以下の小さな独立したマイクロ フロントエンド アプリに分割できます。
- 製品リスト
- カート
- 送料
- お支払い
- 追跡
- カスタマーサービスなど
なぜマイクロフロントエンドなのか?
- 複数のチームが 1 つの MFE アプリ専用に分離して作業できます。
- コードの再利用性は非常に高いです。
- 各チームは独自のテクノロジー (React/Angular/Vue)、デプロイメント、開発戦略などを自由に選択できます。
- 1 つのアプリがダウンしても、残りのアプリは引き続き動作します。
- 各 MFE アプリは小さいため、理解しやすく、変更も簡単です。
モノリシック vs マイクロ フロントエンド アプリ アーキテクチャ
モノリシック アプリ :- 単一アプリ内の Web アプリケーションのすべての機能。
マイクロフロントエンド アプリ:- 各機能は独立した MFE アプリ、つまり
によって管理されます。
MFE #1 はアプリバーを担当します。
MFE #2 は製品リストを担当します。
MFE #3 はサイド ナビゲーション バーを担当します。
コンテナ アプリは、これらの MFE アプリ間の調整を担当します。
MFE アプリが相互に統合される方法
- ビルド時統合 (コンパイル時統合)
- ランタイム統合 (クライアント側統合)
- サーバー側統合 (SSR 統合)。
ビルド時統合 (コンパイル時統合)
この統合では、コンテナー アプリはすべての MFE アプリのソース コードにアクセスでき、ブラウザーに読み込む前にコンテナー アプリがビルド/コンパイルされるときに、結合されたバンドルが作成されます。
長所
- 設定も理解も非常に簡単です。
- MFE を遅延ロードしてパフォーマンスを向上させることができます。
短所
- MFE npm パッケージに変更を加えるたびに、コンテナ アプリを再構築して再デプロイする必要があります。
- 複数の MFE がコンテナ アプリと密接に結合される場合、MFE アプリが分散モノリシック アプリになる可能性があります。
- 要するに、MFE は NPM パッケージと同様のコンテナ アプリと統合されます。
MFE アプリがビルド時統合に統合される方法 (ここでは E コマース アプリケーションの例を取り上げています)
- チーム #1、製品リスト MFE アプリを開発します。
- チーム #1 は、Products-List MFE アプリをデプロイし、NPM パッケージとして公開します。
- コンテナ アプリを管理するチーム #2 には、Products-List MFE アプリがコンテナ アプリの NPM パッケージ依存関係として含まれています。
- チーム #2 は、コンテナ アプリ バンドルをコンパイルしてビルドします。このバンドルには、Products-List MFE アプリ コードを含むコンテナ アプリのコードが含まれています。
- 要するに、MFE は NPM パッケージと同様のコンテナ アプリと統合されます。
- 以上です。
ランタイム統合 (クライアント側統合)
この統合では、コンテナー アプリがブラウザーに読み込まれると、MFE アプリの URL を使用して MFE アプリにアクセスできるようになります。
長所
- 各 MFE は、コンテナ アプリを再デプロイすることなくデプロイできます。
- 同じ MFE アプリの異なるバージョンを使用でき、コンテナーはどの MFE バージョンをいつ使用するかを決定できるため、テストと統合が簡単になります。
- 各 MFE アプリは、開発目的で独自のツールとライブラリを持つことができます。
短所
- ランタイム MFE は、ビルドタイム MFE よりもセットアップと統合が複雑です。
MFE アプリをランタイム統合に統合する方法 (ここでは電子商取引アプリケーションの例を取り上げています)
- チーム #1、製品リスト MFE アプリを開発します。
- チーム #1 が製品リスト MFE を展開します (例: https://mystore.in/productslist.js)
- コンテナ アプリを管理するチーム #2 は、webpack-module-federation を使用してコンテナ アプリと統合します。
- ユーザーが https://mystore.in/ を開くと、コンテナ アプリがブラウザにロードされ、Products-List MFE アプリを取得して、コンテナ アプリ ページの定義された場所に表示されます。
- 以上です。
サービス側統合 (SSR 統合)
この統合では、マイクロフロントエンド アプリは SSR コンポーネントと同様の方法で動作します。すべての MFE アプリはサーバー側で統合され、複合コンテナー アプリがブラウザーに返されます。
長所
- アプリの読み込みが速くなります。
- SEO に優しいアプローチ。
短所
インタラクティブ性が制限されています。
開発への挑戦。
今回は以上です。お時間をいただきありがとうございます。
以上がマイクロフロントエンドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。