TL;DR
マイクロサービスの考え方をフロントエンドに広げ、Web アプリケーションを独立したチームが持つ機能ごとに分けて開発する手法。各チームは独立してリリースできる。
なぜ必要か
micro-frontends.org によると、シングルページアプリケーションは時間とともにフロントエンドの層が大きくなり、保守が難しくなる。別のチームが開発することが多いこの層は、フロントエンドのモノリスと呼ばれる。マイクロフロントエンドでは、アプリケーションを機能に分け、それぞれを職能横断のチームが持つことでこれを避ける。用語は 2016 年の終わりに ThoughtWorks Technology Radar で初めて取り上げられた。
仕組み
micro-frontends.org は、次の考え方を挙げている。
- 技術に依存しない: 各チームは、ほかのチームと調整せずに技術スタックを選び、更新できる
- チームのコードを分離する: 全チームが同じフレームワークを使っていても、ランタイムやグローバルな状態を共有しない
- チームのプレフィックスを付ける: CSS、イベント、ストレージ、Cookie に名前空間を付け、衝突を避けて持ち主を分かりやすくする
- 独自の API よりブラウザの機能を使う: 独自のグローバルな pub/sub の仕組みより、ブラウザのイベントを使う
- 壊れにくいサイトにする: JavaScript が失敗したり読み込まれていなかったりしても、機能が使えるようにする
例
micro-frontends.org の例では、各チームが好きな Web 技術でコンポーネントを作り、Custom Element で包む。タグ名、属性、イベントが公開された契約になり、ほかのチームは実装を知らずに使える。
<blue-buy sku="t_porsche"></blue-buy>