『マイクロフロントエンド』

https://gyazo.com/6c7a799f385461470a46946ff7d5e9b1

2022/10/25

―マイクロサービスアーキテクチャの概念をフロントエンドに拡張し、信頼性、自律性の高いシステムを構築する

序

まえがき

1章　フロントエンドのいま

1.1　マイクロフロントエンドアプリケーション

1.2　シングルページアプリケーション

1.3　アイソモーフィックアプリケーション

1.4　静的ページのWebサイト

1.5　Jamstack

1.6　まとめ

2章　マイクロフロントエンドの原則

2.1　モノリスからマイクロサービスへ

2.1.1　マイクロサービスへの移行

2.2　マイクロサービスの原則

2.2.1　ビジネスドメインのモデル化

2.2.2　自動化の文化

2.2.3　実装の詳細を隠す

2.2.4　ガバナンスの分散

2.2.5　独立デプロイ可能性

2.2.6　障害の分離

2.2.7　高い観測性

2.3　マイクロフロントエンドに原則を適用する

2.3.1　ビジネスドメインのモデル化

2.3.2　自動化の文化

2.3.3　実装の詳細を隠す

2.3.4　ガバナンスの分散

2.3.5　独立デプロイ可能性

2.3.6　障害の分離

2.3.7　高い観測性

2.4　マイクロフロントエンドは銀の弾丸ではない

2.5　まとめ

3章　マイクロフロントエンドアーキテクチャとその課題

3.1　マイクロフロントエンドの意思決定フレームワーク

3.1.1　マイクロフロントエンドの定義

3.1.2　マイクロフロントエンドによるドメイン駆動型設計

3.1.3　コンテキストの境界をどう定義するか

3.1.4　マイクロフロントエンドの構成

3.1.5　マイクロフロントエンドのルーティング

3.1.6　マイクロフロントエンドのコミュニケーション

3.2　マイクロフロントエンドの実践例

3.2.1　Zalando

3.2.2　HelloFresh

3.2.3　AllegroTech

3.2.4　Spotify

3.2.5　SAP

3.2.6　OpenTable

3.2.7　DAZN

3.3　まとめ

4章　マイクロフロントエンドアーキテクチャの発見

4.1　マイクロフロントエンドの意思決定フレームワークの適用

4.1.1　垂直分割

4.1.2　水平分割

4.2　アーキテクチャ分析

4.2.1　アーキテクチャとトレードオフ

4.3　垂直分割アーキテクチャ

4.3.1　アプリケーションシェル

4.3.2　課題

4.3.3　デザインシステムを実装する

4.3.4　開発者体験

4.3.5　検索エンジン最適化

4.3.6　パフォーマンスとマイクロフロントエンド

4.3.7　利用可能なフレームワーク

4.3.8　ユースケース

4.3.9　アーキテクチャの特徴

4.4　水平分割アーキテクチャ

4.4.1　クライアントサイド

4.4.2　課題

4.4.3　検索エンジン最適化

4.4.4　開発者体験

4.4.5　ユースケース

4.4.6　モジュールフェデレーション

4.4.7　iframe

4.4.8　Webコンポーネント

4.4.9　サーバサイド

4.4.10　エッジサイド

4.5　まとめ

5章　マイクロフロントエンドの技術的実装

5.1　プロジェクト

5.2　モジュールフェデレーション入門

5.3　技術的実装

5.3.1　プロジェクト構成

5.3.2　アプリケーションシェル

5.3.3　認証マイクロフロントエンド

5.3.4　カタログマイクロフロントエンド

5.3.5　アカウント管理マイクロフロントエンド

5.4　プロジェクトの進化

5.4.1　レガシーアプリケーションを埋め込む

5.4.2　決済体験の開発

5.4.3　ダイナミックリモートコンテナの実装

5.5　webpackのロックイン

5.6　まとめ

6章　マイクロフロントエンドの構築とデプロイ

6.1　自動化の原則

6.1.1　フィードバックループを高速に保つ

6.1.2　頻繁に反復する

6.1.3　チームを強化する

6.1.4　ガードレールを定義する

6.1.5　テスト戦略を定義する

6.2　開発者体験

6.2.1　水平分割と垂直分割

6.2.2　摩擦のないマイクロフロントエンド計画

6.2.3　環境戦略

6.3　バージョン管理

6.3.1　単一リポジトリ運用

6.3.2　複数リポジトリ運用

6.3.3　バージョン管理システムの将来像

6.4　継続的インテグレーション戦略

6.4.1　マイクロフロントエンドをテストする

6.4.2　適応度関数

6.4.3　マイクロフロントエンド固有の運用

6.5　デプロイ戦略

6.5.1　ブルーグリーンデプロイとカナリアリリースの違い

6.5.2　ストラングラーフィグパターン

6.5.3　可観測性

6.6　まとめ

7章　事例：マイクロフロントエンドのための自動化パイプライン

7.1　状況設定

7.1.1　バージョン管理

7.1.2　パイプラインの管理

7.1.3　コード品質レビュー

7.1.4　ビルド

7.1.5　ビルド後のレビュー

7.1.6　デプロイ

7.1.7　自動化戦略のまとめ

7.2　まとめ

8章　マイクロフロントエンド用のバックエンドパターン

8.1　APIの実装とマイクロフロントエンド

8.1.1　サービスディクショナリを使う

8.1.2　APIゲートウェイを使う

8.1.3　BFFパターンを使う

8.1.4　マイクロフロントエンドでGraphQLを使う

8.1.5　ベストプラクティス

8.2　まとめ

9章　事例：モノリスからマイクロフロントエンドへ

9.1　コンテキスト

9.1.1　技術スタック

9.1.2　プラットフォームとメインユーザフロー

9.1.3　技術的目標

9.2　マイグレーション戦略

9.2.1　マイクロフロントエンドの意思決定フレームワークの適用

9.2.2　SPAを複数のサブドメインに分割する

9.2.3　技術選定

9.3　実装の詳細

9.3.1　アプリケーションシェルの責任

9.3.2　アプリケーション初期化

9.3.3　通信ブリッジ

9.3.4　バックエンドの統合

9.3.5　マイクロフロントエンドにおける認証の統合

9.3.6　依存関係の管理

9.3.7　デザインシステムの統合

9.3.8　コンポーネントの共有

9.3.9　カナリアリリースの実装

9.3.10　ローカライゼーション

9.4　まとめ

10章　組織にマイクロフロントエンドを導入する

10.1　なぜマイクロフロントエンドを使うのか

10.2　組織とソフトウェアアーキテクチャとの関連

10.2.1　委員会を組織する

10.2.2　機能チームv.s.コンポーネントチーム

10.3　コミュニケーションの流れをスムーズにするガバナンスの実装

10.3.1　RFC

10.3.2　ADR

10.4　コミュニケーションの流れを良くするテクニック

10.4.1　後方支援

10.4.2　実践共同体とタウンホール

10.4.3　外部依存を管理する

10.5　分散された組織

10.5.1　マイクロフロントエンドによる分散の意味

10.6　まとめ

付録　開発者インタビュー：マイクロフロントエンドとの向き合い方

索引