目次[隠す][見せる]
マイクロ フロントエンドの概念は、マイクロサービスをフロントエンド開発に適用します。
アイデアは、アプリケーションまたは Web サイトを、単一のまとまりのあるモノリスとして作成するのではなく、実行時に接続される独立して開発された小さな部分に分割することです。
この方法を使用すると、他のテクノロジを使用して独立したチームでアプリケーションの他のコンポーネントを作成できます。
このように開発を分割することで、一般的なモノリスに関連するメンテナンス費用を削減するという考え方です。
彼らが一貫したチームとしてアプリケーションの特定の領域に集中できるようにすることで、バックエンド開発者とフロントエンド開発者の間の新しい形の協力も可能になります。
たとえば、検索機能や、ビジネスにとって重要な主要製品の別の側面を担当するチームがあるとします。
モジュール フェデレーションのおかげで、ワークフローを処理するのに十分な機能があります。 マイクロフロントエンド アプローチ命令。
この投稿では、モジュール フェデレーションのアーキテクチャと、その主な機能とアプリケーション パターンについて詳しく見ていきます。
だから、何ですか モジュール連合?
Javascript のモジュール フェデレーション デザインは、多くのアプリケーションで再利用されたパーツを利用します。
それはかなり基本的な専門用語ですが、私は単にそのように見えるようにしました。
React アプリケーション内でコンポーネントを共有することはよく知られているため、モジュール フェデレーションは実際には同じ目標を効果的に達成しますが、アプリケーション モジュールを他のアプリケーションで使用するために動的に公開する点が異なります。
モジュール フェデレーションは、必要に応じて主要な共有要素をマクロまたはミクロとして配信することにより、分散システムにおけるモジュール共有の問題を克服しようとします。
これは、アプリとビルド ワークフローからそれらを削除することで実現されます。
なぜモジュール フェデレーションなのか?
モジュール フェデレーションで簡単に処理できる要素を次に示します。
- エクスターナルと DLL (ダイナミック リンク ライブラリ) だけが、アプリ間で機能を共有するために必要な場合がありました。 これらすべてが、コード共有のスケーリングを非常に困難なものにしました。
- NPM が遅い。
- XNUMX つの別個のプログラムが重要なコードを共有する場合、それらは動的かつ柔軟でなければなりません。
スタンドアロン アプリを完全に独自のリポジトリに配置し、個別に展開し、独自の独立した SPA として動作させるために、モジュール フェデレーションが作成されました。
モジュール フェデレーション コア コンポーネント
深く掘り下げる前に、モジュール フェデレーションがもたらすいくつかの新しい概念について簡単に説明することが重要です。
- ホスト: ページが読み込まれると、最初に初期化されたビルドまたはモジュールがホストと呼ばれます。 プロバイダーは、ホストと考えることができます。
- リモート: リモートは、ホストの一部を使用する別の構造です。 顧客とも呼ばれます。
- 双方向ホスト: 他のホストが消費するリモートと、リモートを消費するホストの両方として機能する Webpack ビルド。
- ベンダー フェデレーション: ロード元の場所に関係なく、ホストまたはリモートの npm モジュール依存関係を宣言的に共有するランタイム共有を有効にします。 マイクロ フロントエンドの主要なパフォーマンスの問題の XNUMX つは、この方法で解決されます。
連携アプリケーションのパターン
エバーグリーン デザイン システム
フェデレーション アプリケーションの最も基本的な形式の XNUMX つは、「エバーグリーン リモート」です。これは、「デザイン システム」や「コンポーネント ライブラリ」のような共有リモートであり、すべてのユーザーに対して個別に配布および更新されます。
各アプリ チームが改訂に時間を費やす必要がないため、すべてのオンライン サイトが最新の企業アイデンティティに準拠していることを確認するのに役立ちます。
セキュリティで保護された継続的な更新を保証するために必要な制限と手順を設計して導入するために、これは企業がフェデレーテッド アプリケーション アーキテクチャを検討する際の出発点として役立つ可能性があります。
以下は、個別に展開された共有リモートが適している可能性があるいくつかの使用例です。
- 設計システム
- アプリケーション シェル
- コンポーネントライブラリ
- 消費者
- 共有ツールキット
- 内部または外部で使用されるウィジェットの代替配布モデル
マルチ SPA モジュール共有
コンポーネントなど、エクスポート済みの機能を別のスタンドアロン シングルページ アプリで再利用します。 利点は次のとおりです。
- 消費者は自動更新を受け取ります
- ドメインの専門知識は、それを担当するチームに残ります。
- モジュールを個別にリリースする必要がないため、展開手順が合理化されます。
シェル主導のフェデレーション
シェル主導のフェデレーションには以下が含まれます。
- 新しい製品バージョンを作成するとき、製品チームはチェックアウト チームが仕事を完了するのを待ちません。
- リモートを切り替えるとき、ページのリロードはありません。
- 必要に応じて、Shell は低速のリモート読み込みと (トップレベルの) ルーティングを提供します。
- リモート間のルーティングは、ベンダー フェデレーションによって可能になり、頻繁に使用される npm パッケージの再利用が可能になります。
- シェルは、遅延ロードされたリモートによって再利用されるフレームワークとその他の一般的な依存関係を提供します。
マルチシェルフェデレーション
上記の砲弾主導の連合に似ていますが、異なる砲弾を使用していました。
を含む:
- シェルの数
- ホワイトラベリング
- すべてのリモートがシェル B で必要とされるわけではなく、独立した実装があるわけではありません。
モジュール フェデレーションのコア機能
優れたウェブ パフォーマンス
通常の NPM モジュール構成の問題は、従属モジュールの数が増えると、アプリケーションのサイズが一般的に大きくなることです。
アプリケーションのロード時にバンドルをロードするのを回避し、必要な場合にのみロードするために、モジュール フェデレーションはバンドルを遅延ロードする機能を提供します。
これにより、モジュールが実際に必要になる前にモジュールをダウンロードする必要がなくなり、サイトの速度が向上します。
効果的な開発
モジュール フェデレーションでは、アプリケーションを個別のプロジェクトに編成して、プロジェクトを個別に (つまり並行して) ビルドおよびデプロイできるようにすることが推奨されるため、各プロジェクトは個別に作成および配信でき、さまざまなチームによって実行できます。
自己修復機能と冗長性
共有依存関係により、Module Federation はプログラムのすべての依存関係を XNUMX か所で追跡できます。
このように、アプリケーションが依存関係を宣言していない場合やネットワークに問題がある場合でも、アプリケーションは必要なものを認識し、必要に応じてダウンロードを処理できます。
一般的な依存関係の効果的な処理
さらに、モジュール フェデレーションは優れた依存関係管理を提供し、ベンダーとサードパーティの要件を効果的に解決して、アプリケーションがライブラリの複数のバージョンを読み込まないようにします。
コンシューマーを再デプロイする代わりに、独立したコードをデプロイします。
開発者は、常緑の機能を持つことに非常に関心があります。 公開された依存機能が変更されると、コンシューマーを再インストールする必要がなくなります。
これは、それ自体が非常に強力な機能であることを認めなければなりません。予期しない結果を防ぐために、慎重に検討する必要があります。
実行時に、他のビルドからコードをインポートします。
NPM パッケージ モデルを採用する場合、コードを共有して「ライブラリ」を考えるのではなく、API に似たモジュール フェデレーションを使用するアプリを検討する場合があります。
他のアプリからも機能を受け取ることができるのと同じ方法で、Web アプリケーションは他のアプリケーションに機能を提供できるようになりました。
クライアント エクスペリエンスを維持しながら開発者エクスペリエンスを強化
任意 JavaScript開発者 モジュール フェデレーションは、Webpack バージョン 5 以降でアクセスできる Webpack プラグインであるため、非常に快適です。
考えてみれば、これは実際にはかなり強力で興味深いものです。
サードパーティの Webpack ローダーを利用することで、 Webpack スクリプト、アセット、スタイル、写真、マークダウンなどを含むバンドル。
モジュール フェデレーションを使用することで、これらすべてを共有およびフェデレーションできます。
マイクロフロントエンドはモノリシックな方法で動作します。
アプリケーションに共有機能を追加するのは非常に簡単です。 通常どおりバンドルをインポートするか、同期ロードを使用するだけです。
または、遅延読み込みを利用して、必要な場合にのみ依存関係を読み込むために非同期読み込みを使用することもできます。
まとめ
この投稿では、マイクロ フロントエンド アプリケーションを開発するための優れた選択肢として、モジュール フェデレーションについて説明しました。
アプリが実行時に機能を交換して消費できるようにすると、さまざまなチームが独立したアプリケーションで作業できるようになり、スケーラビリティが促進されます。
共通機能が変更された場合、コンシューマーはエバーグリーン機能をサポートしているため、コンシューマーを設計してデプロイする必要はありません。
プログラムは、セットアップ後にモノリスのように機能します。これは素晴らしいことです。
共有可能な依存関係は、アプリのサイズを縮小するために使用されます。 多くの開発者はすでに Webpack 環境に精通しているため、開発者のエクスペリエンスは優れています。
コメントを残す