Micro Frontends 23卒LT会 vol.2 さとふみ @fumist23

自己紹介 名前： 佐藤文哉（さとふみ） 大学：早稲田大学商学部3年 Twitter　: @fumist23 株式会社Gaudiyという会社でインターンしています。

今日話すこと ● Micro Frontendsの基本概念 ○ MicroFrontendsとは ○ 特徴 ○ メリット ○ 使用している企業例 ● Micro Frontends同士の結合 ○ Build-Time integration ○ Run-Time integration ■ Client-Side Composition ■ Server-Side Composition ■ Edge-Side Composition

一応・・・ ※「それ違くない？」みたいなところがあったら遠慮なく教えてください🙏 ※自分は実務でMicro Frontendsを実践したことはなく、 あくまで調べたことベースで話すのでご了承ください🙏

最初に、 超ざっくり FEとBEにおける アーキテクチャをおさらい

Monolith frontend backend

Frontend & Backend frontend backend

Frontend & Backend frontend backend フロントエンドと バックエンドの 責務の分離

Frontend Monolith & Microservices frontend micro service micro service micro service micro service

Frontend Monolith & Microservices frontend micro service micro service micro service micro service 各サービスごとに 責務を独立するように なった

FE Monolith & BFF & Microservices frontend micro service micro service micro service micro service BFF (Aggregation Layer)

FE Monolith & BFF & Microservices frontend micro service micro service micro service micro service BFF (Aggregation Layer) 各マイクロサービス との通信を集約する層

FE Monolith & BFF & Microservices frontend micro service micro service micro service micro service BFF (Aggregation Layer) BFFのみと通信し、 UIの責務のみ 各マイクロサービス との通信を集約する層

いい感じやん👍

と思いつつ・・・

frontend micro service micro service micro service micro service BFF (Aggregation Layer)

frontend micro service micro service micro service micro service BFF (Aggregation Layer) ここは monolithの ままで いいの？？

frontend micro service micro service micro service micro service BFF (Aggregation Layer) ここは monolithの ままで いいの？？ FEだけ 肥大化が 止まらなくない??

frontend micro service micro service micro service micro service BFF (Aggregation Layer) ここは monolithの ままで いいの？？ FEだけ 肥大化が 止まらなくない?? 開発チームの間の 結合度高くない??

Micro Frontendsは？？

ということで 本題へ󰝊

Micro Frontends & Microservices micro service micro service micro service micro service micro frontend micro frontend micro frontend micro frontend 各featureごとに 開発を行う。 フロントエンドの 垂直分割を可能 に。

Micro Frontendsとは？ ‘An architectural style where independently deliverable frontend applications are composed into a greater whole’

Micro Frontendsとは？ ‘An architectural style where independently deliverable frontend applications are composed into a greater whole’ 独立したそれぞれのフロントエンドアプリケーションを、 1つのアプリケーションに統合する アーキテクチャスタイル

Micro Frontendsとは？ ‘An architectural style where independently deliverable frontend applications are composed into a greater whole’ 独立したそれぞれのフロントエンドアプリケーションを 1つのアプリケーションに統合する アーキテクチャスタイル そのまま やん

Micro Frontendsとは？ ● ThoughtWorksのTechnology Radarで2016年末に紹介された。 ● マイクロサービスの思想をフロントエンドにも拡張したもの。 ● 独立したチームごとに1つのドメイン機能についてend-to-endで開発を行 い、より自律的でスケーラブルな開発組織を実現させる

● チームのスケーラビリティ向上 ● デプロイ容易性 ● ビルド時間の短縮 ● 特定の技術に固執しなくて良い。（React, Vue, Angular...） ● アプリケーションコードに対するキャッチアップコストの削減 Micro Frontendsの特徴・メリット

Micro Frontendsを使用している企業例 ・Airbnb ・DAZN ・spotify ・IKEA ...etc https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a

どうやって Micro Frontendsを実現するか？

それぞれ独立した フロントエンドアプリケーションを、 どうやって1つのアプリケーションに 結合させるか？？

Micro Frontends同士の結合 ● Build-Time integration ● Run-Time integration

Micro Frontends同士の結合 ● Build-Time integration ● Run-Time integration

Build-Time integration ● npmライブラリと同じように、各コンポーネント（機能）をライブラ リとしてbuild時にinstallする。

Build-Time integration ● npmライブラリと同じように、各コンポーネント（機能）をライブラ リとしてbuild時にinstallする。 ○ メリット ■ サーバーのリソースを意識せずに、サーバーサイドで結合することを 可能にする

Build-Time integration ● npmライブラリと同じように、各コンポーネント（機能）をライブラ リとして取りこみbuild時にinstallする。 ○ メリット ■ サーバーのリソースを意識せずに、サーバーサイドで結合することを 可能にする ○ デメリット ■ コンポーネント同士の依存関係の結合度が高い ■ 重複コードや重複パッケージへの考慮の必要 ■ 最終的なバンドルサイズが大きくなる

Micro Frontends同士の結合 ● Build-Time integration ● Run-Time integration

Run-Time integration 以下の3つの方法が存在する。 ● Client-Side Composition ● Server-Side Composition ● Edge-Side Composition

Run-Time integration 以下の3つの方法が存在する。 ● Client-Side Composition ● Server-Side Composition ● Edge-Side Composition

Client-Side Composition ● その名の通り、client sideでランタイムに各Fragmentの結合を行う。 ○ Fragmentは、垂直分割されたチームによって開発されたドメイン要素・機能のこと。 ● Fragment毎に開発チームやデプロイが分割されている

Client-Side Composition client A client client B client C

Client-Side Composition 1つのページに複数のFragmentが存在する。 ・ページを統括するTeam Product 🔴 ・購入に関する責務を持つTeam Checkout 🔵 ・各商品のレコメンドを行うTeam Inspire 🟢 micro-frontends.orgで紹介されている例

Client-Side Composition ● Client-Side Compositionでよく使用される技術 ● iframe ● Web components ● single-spaなどのライブラリ ● Webpack5以降のModule Federation

Client-Side Composition ● Client-Side Compositionでよく使用される技術 ● iframe ● Web components ● single-spaなどのライブラリ ● WebpackのModule Federation この2つについて 説明します

Client-Side Composition ● Web Componentsを使用した例 Custom Elementの作成 Team Checkout 🔵 を例に

Client-Side Composition ● Web Componentsの使用 ・countのstateを保持し、表示する。 ・`blue:basket:changed`というイベント を受け取って再レンダリングする。 ・window.customElements.defineで customElementとして登録する。

Client-Side Composition ● Web Componentsの使用 ・親（ここでは🔴）から渡ってきたsku属性 によって価格を表示する。 ・this.dispatchEvent(new CustomEvent)で `blue:basket:changed`イベントを発火。

Client-Side Composition ● Web Componentsの使用 親コンポーネント🔴で別々で配置されているblue-basketとblue-buyは、 `blue:basket:changed`イベントを通してやりとりをする。 Team-Product🔴とTeam-Checkout🔵(Team-Inspire🟢)はそれぞれ独立している。

● ライブラリの使用 例として、single-spa（https://github.com/single-spa/single-spa） ・技術スタック関係なく、複数のSPAを1つにまとめるためのフレームワーク ・ルーティング機能や、各Micro Frontendのライフサイクルの管理を行ってくれる Client-Side Composition

Client-Side Composition ● メリット ○ シンプルなMicro Frontends ○ 学習コストがそれほど高くない ● デメリット ○ クライアントサイドでの結合であるため、パフォーマンスにおける懸念がある。 ○ サポートブラウザに依存する

Run-Time integration 以下の3つの方法が存在する。 ● Client-Side Composition ● Server-Side Composition ● Edge-Side Composition

Server-Side Composition その名の通り、サーバーサイドで各Fragmentを結合する。 client A client B client C server client

Server-Side Composition ● Layout Server & Fragment Server client Layout Server Fragment Server Fragment Server

Server-Side Composition ● Ara Framework 　airbnb/hypernovaを使用した 　Micro Frontendsを構築する 　ためのモジュール群を提供

Ara Frameworkによる、 Server-Side Compositionの アーキテクチャ例。 Server-Side Composition

1. ユーザーがNova Proxyにリクエストを行う 2. Nova ProxyはWebsite Serverにリクエストを送る。 3. Website Serverは、Nova Directiveを用いて ページ上でMicro Frontensが表示される場所に placeholderを設置する。 4. Website Serverは作成したHTMLをNova Proxyに 5. Nova ProxyはHTMLをパースして、どのMicro Frontendsに対するリクエストを行うかを判断す る。

6. Nova Proxyは、必要なMicro Frontendのviewを取得するためにNova Clusterへのバッチリクエストを作成する。 7. Nova Clusterは、各Micro Frontendにバッチリクエストを作成する。 8. Nova Clusterはバッチリクエストを並列に送信する。

9. Micro Frontendsはviewのレンダリングに必要な要素を集める。必要に応じて Rest APIや GraphQLとの通信を行う。 10. Micro Frontendsは集められたデータからサーバーサイドレンダリング を行う。 11. Micro FrontendsはNova Clusterにレンダリングされたviewを返却する。

12. Nova Clusterは各Micro Frontendsからのレスポンスを集約し、Nova Proxyに返す 13. Nova Proxyはページ上のプレイスホルダーをSSRに成功したHTMLに置き換え、SSRに失敗した場 所ではプレイスホルダーを維持し、 clientでのfallback処理を可能にする。 14. Nova Proxyはユーザーにページを返す。 15. ブラウザ上でCSRも行われる。

● メリット ○ SSRを実現するため、SEO対策や初回ロードのパフォーマンスにおいて有 利。 ○ クライアントが通信する相手が限られ、通信の最適化が可能。 ● デメリット ○ 考慮に入れなければならない要素が多く、複雑性が高い。 ○ デファクトスタンダードな設計が存在しない。 Server-Side Composition

Run-Time integration 以下の3つの方法が存在する。 ● Client-Side Composition ● Server-Side Composition ● Edge-Side Composition

・エッジレイヤー（CDNなど）でコンテンツを結合する。 
 Edge-Side Composition client A client B client C edge client server

● メリット ○ 結合に関して、サーバーのリソースの用意が必要ない。 ○ Edge Sideで処理が行われ、レイテンシに関して有利。 ● デメリット ○ マネージドであるが故に、タイムアウトやレスポンスサイズに制限がある。 Edge-Side Composition

まとめ ● Micro Frontendsとは、独立したフロントエンドアプリケーションを1つのアプリケー ションに統合するアーキテクチャスタイルのこと。 ● 開発チームのスケーラビリティ向上・デプロイ容易性・技術スタックに囚われないフロ ントエンド開発などさまざまなメリットがある。 ● 結合パターンが複数存在し、用途によって多様なアーキテクチャが可能。

Micro Frontendsの課題やデメリットに対してはあまり深掘れなかったので、 今回紹介できなかったです🙏 反省

参考記事・本 ・Micro Frontends (https://micro-frontends.org/) ・Micro Frontends (https://martinfowler.com/articles/micro-frontends.html) ・フロントエンドエンジニアは Micro Frontends の夢を見るか （https://engineering.mercari.com/blog/entry/2018-12-06-162827/） ・Micro Frontends の理論と実践 -価値提供を高速化する真のマイクロサービスのあり方 (https://speakerdeck.com/nobuhikosawai/the-theory-and-practice-of-micro-frontends） ・Micro Frontends Architecture Patterns (https://zenn.dev/okmttdhr/books/8c977618755cb68ad2c0) ・Micro-Frontends: What, why, and how （https://levelup.gitconnected.com/micro-frontends-what-why-and-how-bf61f1f0a729） ・Micro frontend入門 (https://zenn.dev/silverbirder/books/2d4da5d033685752d1c7) ・The State of Micro Frontends (https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a)