ホームページ > ウェブフロントエンド > jsチュートリアル > マイクロフロントエンドの概要

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

WBOY
リリース: 2024-08-30 19:04:11
オリジナル
759 人が閲覧しました

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

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

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

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

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

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

Introduction to Micro-frontend

モノリシック アプリ :- 単一アプリ内の 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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート