Angular とネイティブフェデレーションによるマイクロフロントエンド
エンタープライズスケールのソフトウェアシステムは、複数のクロスファンクショナルチームによって実装されることが多く、这些チームが新しい機能を効率的に提供するために、チーム間での調整の必要性を最小限度に抑えることが望ましい。このため、システムを垂直方向に低結合の領域にモジュール化し、各チームが個別に担当することが必要となる。マイクロフロントエンドは、高度なチームの自律性など多くの利点を約束するアーキテクチャスタイルだが、多くの課題も伴う。マイクロフロントエンドでは、個別のビルドプロセスが必要になり、インクリメンタルビルドとの組み合わせによりビルド時間を改善することができる。この機能は、マイクロフロントエンドの他のアスペクト(例えば、チームと個別のアプリケーションを合わせる、個別のデプロイメント)を適用せずに使用することもできる。しかし、個別に開発されたマイクロフロントエンドは、UI/UXが一致しなくなり、不一致な外観を生じることがあり、複数のアプリケーションを読み込むと、バンドルのダウンロード数が増加し、ロード時間が長くなり、メモリーの圧力が高まる。アプリケーションを低結合の部分に分割することは、一般的にベストプラクティスだが、垂直方向の境界を明確に定義し、個別のアプリケーションとして実装することは、しばしば困難である。包括的なソリューションに統合することで追加の複雑さが生じ、コンパイル時統合からランタイム統合に移行することは、深刻な結果を生じる。Angularチームは、マイクロフロントエンドの代替として、モノレポジトリに個別の垂直方向を実装することを検討することを推奨している。しかし、マイクロフロントエンドの欠点を補う方法もあり、例えば、デザインシステムを設立して一貫したUI/UXを実現する、または、個別のシステムパーツをレイジーロードすることである。ネイティブフェデレーションは、Angular CLIとの緊密な統合を提供し、Angularを使用してマイクロフロントエンドを実装することを可能にするコミュニティプロジェクトである。これにより、アプリケーションが個別にビルドおよびデプロイされた他のアプリケーションのパーツをレイジーロードし、AngularやRxJSなどの依存関係をホストとリモート間で共有することができる。ネイティブフェデレーションの設定には、スキーマティックが提供され、ネイティブフェデレーションのビルダー委任をアプリケーションビルダーに設定し、federation.config.jsという構成ファイルを作成する。この構成では、リモートやホストに一意の名前を割り当て、共有する依存関係を定義する。リモートでは、エクスポーズされたEcmaScriptモジュールを定義し、シェルにロードすることができる。スキーマティックは、main.tsにネイティブフェデレーションの初期化コードを追加し、リモートがエクスポーズするコンポーネントやルーティング構成をロードするために、伝統的なレイジーロードとネイティブフェデレーションのloadRemoteModule関数を組み合わせる。