<h1 id="micro-frontends-%E3%81%A8%E3%81%AF%3F%F0%9F%A4%94">
<a class="header-anchor-link" href="#micro-frontends-%E3%81%A8%E3%81%AF%3F%F0%9F%A4%94" aria-hidden="true"></a> Micro Frontends とは?🤔</h1>
皆さん、Micro Fronends(以下、MFE)をご存知でしょうか。説明をざっくりしますと、Microservicesの考え方をフロントエンドまで拡張した考え方です。Microservicesは、バックエンド側で適用される事例をよく耳にしますが、フロントエンドでの適用事例は、あまり聞いたことがありません。
従来、Webサービス開発ではモノリスな構成からスタートします。そこから、規模が拡大するにつれて様々な理由により、フロントエンドとバックエンドの分離、バックエンドのMicroservices化が行われます。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Oxj-vNlo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://micro-frontends-japanese.org/resources/monolith-frontback-microservices.png" alt="monolith-frontback-microservices" loading="lazy" class="md-img"> 
<a href="https://micro-frontends-japanese.org/" target="_blank" rel="nofollow noopener noreferrer">[翻訳記事]マイクロフロントエンド</a>
Microservices化によって、Scalability、Agility、Independency、Availabilityの大幅な向上が期待できます。しかし、依然フロントエンドはモノリスなままです。そこで、次の画像のように、Microservicesと同様にフロントエンドも縦(専門領域)に分割します。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--rFi06ymi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://micro-frontends-japanese.org/resources/verticals-headline.png" alt="verticals-headline" loading="lazy" class="md-img"> 
<a href="https://micro-frontends-japanese.org/" target="_blank" rel="nofollow noopener noreferrer">[翻訳記事]マイクロフロントエンド</a>
ただし、全てのWebサービスをMFEにする必要はありません。先程の説明にもあった通り、規模が拡大した際にMFEを検討する必要があるため、小・中規模のWebサービスでは時期尚早です。また、次の画像にもある通り、静的ページ(Webサイト,Webドキュメント)や動的ページ(Webアプリ)の両極端に位置するWebサービスはMFEの適用するのには不向きです(と書いています)。両方の要素が求められるWebサービスにMFEが役立ちます。MFEの適用されるWebサービス事例では、ECサイトが挙げられます。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--mp6IX8CB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://media-exp1.licdn.com/dms/image/C5612AQEMjY51MwQMww/article-inline_image-shrink_1000_1488/0%3Fe%3D1611187200%26v%3Dbeta%26t%3DEGumrK4ul8MRLTYa-gGjT93c4b7qSFWyzH9mwp5mq0w" alt="mfe-web-document-to-web-app" loading="lazy" class="md-img"> 
<a href="https://www.linkedin.com/pulse/microfrontends-approach-building-scalable-web-apps-vinci-rufus" target="_blank" rel="nofollow noopener noreferrer">Microfrontends: An approach to building Scalable Web Apps</a>
※ MFEという言葉は、<a href="https://www.thoughtworks.com/radar/techniques/micro-frontends" target="_blank" rel="nofollow noopener noreferrer">Micro frontends | Technology Radar | ThoughtWorks</a> の記事より生まれたみたいです。 
※ <a href="https://www.manning.com/books/micro-frontends-in-action" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends in Action</a>にも記載されていますが、この考え方はWebサービスを対象としており、ネイティブアプリは対象としていません。
<h1 id="%E5%B0%8E%E5%85%A5%E4%BC%81%E6%A5%AD%F0%9F%91%A8%E2%80%8D%F0%9F%92%BC%F0%9F%91%A9%E2%80%8D%F0%9F%92%BC">
<a class="header-anchor-link" href="#%E5%B0%8E%E5%85%A5%E4%BC%81%E6%A5%AD%F0%9F%91%A8%E2%80%8D%F0%9F%92%BC%F0%9F%91%A9%E2%80%8D%F0%9F%92%BC" aria-hidden="true"></a> 導入企業👨‍💼👩‍💼</h1>
実績企業としては、IKEA、DAZN、Spotifyなどが挙げられます。他の例は、<a href="https://silverbirder180.hatenablog.com/entry/2020/10/07/190727" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を調べたすべて</a> にリストアップしていますので、興味がある方はご覧ください。
<h1 id="%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%83%BB%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%F0%9F%94%8D">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%83%BB%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%F0%9F%94%8D" aria-hidden="true"></a> メリット・デメリット🔍</h1>
MFEを導入することによるメリット・デメリットについて、(プロダクション導入経験無しの私が偏見で)簡単に紹介します。Microservicesのメリット・デメリットと似ていると思います。
私が思う最大のメリットは、Agilityと思います。規模が中・大規模なWebサービスとなると、様々な業務ドメインが詰め込まれます。先程のMFEの例(ECサイト)でいうと、推薦(inspire)、検索(search)、商品(product)、注文(checkout)などにあたります。これらを1つのフロントエンドで構築すると、ドメイン設計を適切に分離できたとしても、開発者の業務ドメイン知識が追いつかず、開発スピードが低下してしまいます。結果、特定の開発者の属人化が加速し、ボトルネックとなります。 
そこで、それぞれ業務ドメインを分割することで、開発者はそこだけにフォーカスできます。結果、開発スピードは維持できるはずです。
私が思う最大のデメリットは、Independencyの難しさだと思います。例えば、UI/UXの指針となるデザインシステムがWebサービスにあったとして、それをすべてのフロントエンドへ適用しなければいけません。そのため、全体を通した一貫性のあるUI/UXであるかどうかの品質担保が難しいです。 
他には、あるチームのビルドツールを改善したとしても、他のチームではその恩恵を受けれなかったり、アプリケーション設計における全体共通(アクセス履歴、イベント管理、状態管理など)部分を、どうするか考える必要があります。
こちら <a href="https://silverbirder180.hatenablog.com/entry/2020/10/07/190727#ProsCons" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を調べたすべて#ProsCons</a> にも簡単にメリット・デメリットを書いていますので、気になる方はご覧ください。
<h1 id="%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%F0%9F%94%AE">
<a class="header-anchor-link" href="#%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%F0%9F%94%AE" aria-hidden="true"></a> 統合パターン🔮</h1>
MFEでは、各フロントエンドのフラグメント(HTML)を、どのタイミングで統合するのかが重要です。今回はその統合パターンをざっくり紹介します。 
例えば、次のMFEの例で言えば、Team-Product、Team-Checkout、Team-Inspireの3つのフロントエンドフラグメント(HTML)があります。これらをどのタイミングで統合するのかがポイントです。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Dv5YW7C3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://micro-frontends-japanese.org/resources/three-teams.png" alt="mfe-three-teams" loading="lazy" class="md-img"> 
<a href="https://micro-frontends-japanese.org/" target="_blank" rel="nofollow noopener noreferrer">[翻訳記事]マイクロフロントエンド</a>
詳しくは、<a href="https://silverbirder180.hatenablog.com/entry/2020/10/07/190727#%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を調べたすべて#統合パターン</a> をご覧ください。
<h2 id="%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> ビルド時統合パターン</h2>
ビルド時統合とは、WebサービスをPublishする前のBuildの段階で統合するパターンです。このパターンは、<a href="https://bit.dev" target="_blank" rel="nofollow noopener noreferrer">bit.dev</a>がよく使われます。
<img src="https://storage.googleapis.com/zenn-user-upload/e74w0sjnj1r0zpzvd5xfvsk7k1bd" alt="bit.dev toppage" loading="lazy" class="md-img"> 
<a href="https://bit.dev/" target="_blank" rel="nofollow noopener noreferrer">bit.dev</a>
フラグメントをPackagingし、Packagingしたライブラリをimportさせてbuild(統合)します。あとは、buildした静的コンテンツをPublishさせるだけになります。
<h2 id="%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> サーバーサイド統合パターン</h2>
サーバーサイド統合とは、Webサーバー側のHTML構築段階で統合するパターンです。このパターンは、SSIやESI、Podium、Tailor、Ara-Frameworkなどが使われます。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--zxqt0-5Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://www.st-andrews.ac.uk/itsnew/web/images/ssi1.jpg" alt="ssi" loading="lazy" class="md-img"> 
<a href="https://www.st-andrews.ac.uk/itsnew/web/ssi/index.shtml" target="_blank" rel="nofollow noopener noreferrer">Server-side includes (SSI)</a>
フラグメントを提供するサーバーを準備し、それらからフラグメント情報を収集し、全体のページHTMLを構築します。それをSSRとしてユーザーへ提供します。
<img src="https://raw.githubusercontent.com/Silver-birder/micro-frontends-sample-code-5/f3c20954e6196cb578cd16caaf5999e07306fb51/overview.svg" alt="cloudflare-worker" loading="lazy" class="md-img"> 
<a href="https://github.com/Silver-birder/micro-frontends-sample-code-5" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code-5</a>
サーバーサイドのサンプルコードは、次にまとめています。
<ul>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/05/04/182921" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を学んだすべて</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/08/23/183713" target="_blank" rel="nofollow noopener noreferrer">Ara-Framework で Micro Frontends with SSR</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/10/04/095230" target="_blank" rel="nofollow noopener noreferrer">Zalando tailor で Micro Frontends with ( LitElement &amp; etcetera)</a></li>
</ul>
また、サーバーサイドというよりEdgeでの統合パターンを下記リンクで紹介しています。
<ul>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/11/15/121730" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Workers (Edge Workers) で Micro Frontends</a></li>
</ul>
※ リッチなインタラクションUIを表現したいなら、サーバーサイドとクライアントのHydrationをする必要があります。
<h2 id="%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E7%B5%B1%E5%90%88%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> クライアントサイド統合パターン</h2>
クライアントサイド統合とは、ブラウザ側レンダリングの段階で統合するパターンです。このパターンは、iframeやWebComponentsなどが使われます。
iframeを使ったページ(フラグメント)埋め込み、全体のページHTMLを統合させたり、WebComponentsのようにカスタムエレメントを定義したHTMLタグでページを構成したりします。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--vBnGbBVx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://bluesoft.com/wp-content/uploads/2020/04/Micro-Frontends-11.jpg" alt="client side integration pattern" loading="lazy" class="md-img"> 
<a href="https://bluesoft.com/micro-frontends-the-missing-piece-of-the-puzzle-in-feature-teams/" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends – The Missing Piece Of The Puzzle In Feature Teams | BlueSoft</a>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB" aria-hidden="true"></a> 終わりに👨‍💻👩‍💻</h1>
MFEのアプローチを実際に導入した企業は、国内だとまだ比較的少なく、どういった場面で役立つのかあまり明確ではありません。また、書籍や知見も多くはないため、未知な領域と思います。
ただ、依然フロントエンドがモノリスな、中・大規模なWebサービスを運用するならば、特に進化が激しいフロントエンド界隈の中で、サービス提供の速度、品質を維持するのは難しいと思います。フロントエンドもMicroservices化する場面が訪れるかもしれません。そんなときに、この記事を思い出して頂ければ幸いです。
※ 独り言ですが、MFEの構築アプローチとして、Edge Worker + Web Components の組み合わせが最近好みです。
<h1 id="%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF%F0%9F%94%97">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF%F0%9F%94%97" aria-hidden="true"></a> 関連リンク🔗</h1>
私が書いたMFE関連の記事です。もしよければご覧ください。
<ul>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/05/04/182921" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を学んだすべて</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/10/07/190727" target="_blank" rel="nofollow noopener noreferrer">Micro Frontends を調べたすべて</a></li>
<li><a href="https://github.com/Silver-birder/think-micro-frontends/blob/master/research/docs/read.md" target="_blank" rel="nofollow noopener noreferrer">MFE関連資料リンク集</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/08/23/183713" target="_blank" rel="nofollow noopener noreferrer">Ara-Framework で Micro Frontends with SSR</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/10/04/095230" target="_blank" rel="nofollow noopener noreferrer">Zalando tailor で Micro Frontends with ( LitElement &amp; etcetera)</a></li>
<li><a href="https://silverbirder180.hatenablog.com/entry/2020/11/15/121730" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Workers (Edge Workers) で Micro Frontends</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-on-kubernetes" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-on-kubernetes</a></li>
<li><a href="https://speakerdeck.com/silverbirder/micro-frontends-on-kubernetes-trial" target="_blank" rel="nofollow noopener noreferrer">speakerdeck.com/silverbirder/micro-frontends-on-kubernetes-trial</a></li>
<li><a href="https://github.com/Silver-birder/think-micro-frontends" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/think-micro-frontends</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-sample-code" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-sample-code-2" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code-2</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-sample-code-3" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code-3</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-sample-code-4" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code-4</a></li>
<li><a href="https://github.com/Silver-birder/micro-frontends-sample-code-5" target="_blank" rel="nofollow noopener noreferrer">github.com/Silver-birder/micro-frontends-sample-code-5</a></li>
</ul>

[覚書] Micro Frontends 📚

クライアントサイド統合パターン

Discussion