Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontendsについて

Micro Frontendsについて

connpass.com/event/215902/ で発表したスライドです。
Micro Frontendsについて気になったので調べてみました。

01e0fceaff6bfbd259c4a5ad3daa8ff8?s=128

satofumi

July 17, 2021
Tweet

Transcript

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

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

  3. 今日話すこと • Micro Frontendsの基本概念 ◦ MicroFrontendsとは ◦ 特徴 ◦ メリット

    ◦ 使用している企業例 • Micro Frontends同士の結合 ◦ Build-Time integration ◦ Run-Time integration ▪ Client-Side Composition ▪ Server-Side Composition ▪ Edge-Side Composition
  4. 一応・・・ ※「それ違くない?」みたいなところがあったら遠慮なく教えてください🙏 ※自分は実務でMicro Frontendsを実践したことはなく、 あくまで調べたことベースで話すのでご了承ください🙏

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

  6. Monolith frontend backend

  7. Frontend & Backend frontend backend

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

  9. Frontend Monolith & Microservices frontend micro service micro service micro

    service micro service
  10. Frontend Monolith & Microservices frontend micro service micro service micro

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

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

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

    service micro service micro service BFF (Aggregation Layer) BFFのみと通信し、 UIの責務のみ 各マイクロサービス との通信を集約する層
  14. いい感じやん👍

  15. と思いつつ・・・

  16. frontend micro service micro service micro service micro service BFF

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

    (Aggregation Layer) ここは monolithの ままで いいの??
  18. frontend micro service micro service micro service micro service BFF

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

    (Aggregation Layer) ここは monolithの ままで いいの?? FEだけ 肥大化が 止まらなくない?? 開発チームの間の 結合度高くない??
  20. Micro Frontendsは??

  21. ということで 本題へ󰝊

  22. Micro Frontends & Microservices micro service micro service micro service

    micro service micro frontend micro frontend micro frontend micro frontend 各featureごとに 開発を行う。 フロントエンドの 垂直分割を可能 に。
  23. Micro Frontendsとは? ‘An architectural style where independently deliverable frontend applications

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

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

    are composed into a greater whole’ 独立したそれぞれのフロントエンドアプリケーションを 1つのアプリケーションに統合する アーキテクチャスタイル そのまま やん
  26. Micro Frontendsとは? • ThoughtWorksのTechnology Radarで2016年末に紹介された。 • マイクロサービスの思想をフロントエンドにも拡張したもの。 • 独立したチームごとに1つのドメイン機能についてend-to-endで開発を行 い、より自律的でスケーラブルな開発組織を実現させる

  27. • チームのスケーラビリティ向上 • デプロイ容易性 • ビルド時間の短縮 • 特定の技術に固執しなくて良い。(React, Vue, Angular...)

    • アプリケーションコードに対するキャッチアップコストの削減 Micro Frontendsの特徴・メリット
  28. Micro Frontendsを使用している企業例 ・Airbnb ・DAZN ・spotify ・IKEA ...etc https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a

  29. どうやって Micro Frontendsを実現するか?

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

  31. Micro Frontends同士の結合 • Build-Time integration • Run-Time integration

  32. Micro Frontends同士の結合 • Build-Time integration • Run-Time integration

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

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

  35. Build-Time integration • npmライブラリと同じように、各コンポーネント(機能)をライブラ リとして取りこみbuild時にinstallする。 ◦ メリット ▪ サーバーのリソースを意識せずに、サーバーサイドで結合することを 可能にする

    ◦ デメリット ▪ コンポーネント同士の依存関係の結合度が高い ▪ 重複コードや重複パッケージへの考慮の必要 ▪ 最終的なバンドルサイズが大きくなる
  36. Micro Frontends同士の結合 • Build-Time integration • Run-Time integration

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

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

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

  40. Client-Side Composition client A client client B client C

  41. Client-Side Composition 1つのページに複数のFragmentが存在する。 ・ページを統括するTeam Product 🔴 ・購入に関する責務を持つTeam Checkout 🔵 ・各商品のレコメンドを行うTeam

    Inspire 🟢 micro-frontends.orgで紹介されている例
  42. Client-Side Composition • Client-Side Compositionでよく使用される技術 • iframe • Web components

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

    • single-spaなどのライブラリ • WebpackのModule Federation この2つについて 説明します
  44. Client-Side Composition • Web Componentsを使用した例 Custom Elementの作成 Team Checkout 🔵

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

    customElementとして登録する。
  46. Client-Side Composition • Web Componentsの使用 <blue-buy></blue-buy> ・親(ここでは🔴)から渡ってきたsku属性 によって価格を表示する。 ・this.dispatchEvent(new CustomEvent)で

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

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

  49. Client-Side Composition • メリット ◦ シンプルなMicro Frontends ◦ 学習コストがそれほど高くない •

    デメリット ◦ クライアントサイドでの結合であるため、パフォーマンスにおける懸念がある。 ◦ サポートブラウザに依存する
  50. Run-Time integration 以下の3つの方法が存在する。 • Client-Side Composition • Server-Side Composition •

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

    client
  52. Server-Side Composition • Layout Server & Fragment Server client Layout

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

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

  55. 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に対するリクエストを行うかを判断す る。
  56. 6. Nova Proxyは、必要なMicro Frontendのviewを取得するためにNova Clusterへのバッチリクエストを作成する。 7. Nova Clusterは、各Micro Frontendにバッチリクエストを作成する。 8.

    Nova Clusterはバッチリクエストを並列に送信する。
  57. 9. Micro Frontendsはviewのレンダリングに必要な要素を集める。必要に応じて Rest APIや GraphQLとの通信を行う。 10. Micro Frontendsは集められたデータからサーバーサイドレンダリング を行う。

    11. Micro FrontendsはNova Clusterにレンダリングされたviewを返却する。
  58. 12. Nova Clusterは各Micro Frontendsからのレスポンスを集約し、Nova Proxyに返す 13. Nova Proxyはページ上のプレイスホルダーをSSRに成功したHTMLに置き換え、SSRに失敗した場 所ではプレイスホルダーを維持し、 clientでのfallback処理を可能にする。

    14. Nova Proxyはユーザーにページを返す。 15. ブラウザ上でCSRも行われる。
  59. • メリット ◦ SSRを実現するため、SEO対策や初回ロードのパフォーマンスにおいて有 利。 ◦ クライアントが通信する相手が限られ、通信の最適化が可能。 • デメリット ◦

    考慮に入れなければならない要素が多く、複雑性が高い。 ◦ デファクトスタンダードな設計が存在しない。 Server-Side Composition
  60. Run-Time integration 以下の3つの方法が存在する。 • Client-Side Composition • Server-Side Composition •

    Edge-Side Composition
  61. ・エッジレイヤー(CDNなど)でコンテンツを結合する。 
 Edge-Side Composition client A client B client C

    edge client server
  62. • メリット ◦ 結合に関して、サーバーのリソースの用意が必要ない。 ◦ Edge Sideで処理が行われ、レイテンシに関して有利。 • デメリット ◦

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

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

  65. 参考記事・本 ・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)