Module Federationを使用したマイクロフロントエンド
マイクロフロントエンドはマイクロサービスの原理をブラウザに適用します。各チームが独立したUIスライスを所有し、WebpackのModule Federationが実行時にそれらを統合します。このトラックは完全なアーキテクチャをカバーします。モノリシックなフロントエンドを自律ユニットに分割し、フェデレーションされたアプリケーションを本番環境にデプロイ、保護、最適化します。この技術は、複数チームが同じページにデプロイする必要がある企業で本番環境での実績があります。
学習内容
マイクロフロントエンドアーキテクチャの構造的原理を理解し、Webpack Module Federationをゼロから設定し、リモート間でライブラリを重複なく共有します。このトラックはフェデレーション境界を越えたルーティングとナビゲーション、エラー分離とレジリエンス戦略、マイクロフロントエンド間の通信パターンをカバーします。フェデレーションアプリ固有のテスト戦略、独立したデプロイ用のCI/CDパイプライン、パフォーマンス最適化、実行時にリモートコードを読み込むことに固有のセキュリティ上の考慮事項も学習します。
学習パス
12コースがA1からC1をカバーしています。このトラックはマイクロフロントエンドアーキテクチャ入門から始まり、B1のWebpackおよびModule Federation基礎と最初のフェデレーションアプリケーション構築に進みます。B2ブロックは、高度なモジュール共有、ルーティング、エラーハンドリング、テスト、デプロイメントを通じて学習を深めます。最後の4つのC1コース — マイクロフロントエンド間通信パターン、マイクロフロントエンドのパフォーマンス最適化、マイクロフロントエンドアーキテクチャのセキュリティ、高度なシナリオとベストプラクティス — は本番環境で最も難しい課題に取り組みます。
仕組み
各コースは短い実践的なレッスンに分割されており、組み込みコードエディタでリアルタイムフィードバック付きで完了します。行き詰まったときはいつでもAIチューターが利用できるため、プラットフォームを離れることなく設定エラーとアーキテクチャに関する質問に対処できます。