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

マイクロフロントエンドの現状確認

Yuki Kodama
September 27, 2022

 マイクロフロントエンドの現状確認

マイクロフロントエンドという技術用語はThoughtWorks 社によって2016年に提唱されました。2014年に同社が提唱したマイクロサービスはすでにアーキテクチャの選択肢として浸透しつつある一方で、マイクロサービスは馴染みが薄く、実際にプロダクトに取り入れた実例を聞く機会もあまりない、という方も少なくないと思います。

マイクロフロントエンドの基本的なアイデアから、導入のモチベーション、いくつかの現実的な実装パターンを知っていただくことで、マイクロフロントエンドがより良いアーキテクチャを実現するための選択肢のひとつになるきっかけになればと思います。

Yuki Kodama

September 27, 2022
Tweet

More Decks by Yuki Kodama

Other Decks in Technology

Transcript

  1. 10 復習: マイクロサービスのメリット • 独立した小さなデプロイ単位 ◦ デプロイ頻度の向上 • 技術選択の自由度の高さ ◦

    陳腐化したとき捨てやすい • 自律的な開発組織・チーム ◦ 高凝集・疎結合 • サービス全体のレジリエンス向上
  2. 12 フロントエンドモノリスの課題 • 独立した小さなデプロイ単位 → ❌ ◦ デプロイ頻度の向上 • 技術選択の自由度の高さ

    → ❌ ◦ 陳腐化したとき捨てやすい → ❌ • 自律的な開発組織・チーム ◦ 高凝集・疎結合 → ❌ • サービス全体のレジリエンス向上 → ❌ マイクロサービスで得られてた恩恵が消える
  3. 13 補足: フロントエンドモノリスの課題 • フロントエンドは分離しにくい ◦ 統一された見た目と体験の提供 ◦ ページ内の異なる関心事 •

    フロントエンドは膨らみがち ◦ APIは使い回せても画面は使い回せない ◦ コンポーネントの再利用とは別の話
  4. 14 マイクロフロントエンド化 アーキテクチャの変遷 マイクロ サービス マイクロ サービス マイクロ サービス BFF BFF

    BFF マイクロ フロントエンド マイクロ フロントエンド マイクロ フロントエンド マイクロフロントエンドで課題の解決を図る
  5. 21 iframeを使った統合 実装パターン iframe ホスト • メリット ◦ 枯れた技術スタックで実現可能 • デメリット

    ◦ ホスト側アプリケーションの変更が必要にな るケースもある ◦ 高さを調整する必要がある ◦ リンクのクリックなど、iframe内で発生した イベントを拾う必要がある ◦ エラー発生時のハンドリングが煩雑 ホスト側に用意したiframe内にマイクロフロント エンド側のアプリケーションを展開する。
  6. 22 JavaScriptを使った統合 実装パターン • メリット ◦ iframeのような明らかなデメリットがない • デメリット ◦ CSSの特性上、想定外のスタイルが適用され

    てデザインが壊れる可能性がある ◦ ページ全体で読み込むJavaScriptファイルの サイズが大きくなる ホスト側にマイクロフロントエンド側の JavaScriptを読み込み、直接展開する。 Micro frontend ホスト <script src=”...” />
  7. 23 Web Componentsを使った統合 実装パターン • メリット ◦ マイクロフロントエンドの提供方法が独自に ならず、Web標準で実現できる • デメリット

    ◦ (見当たらないが、強いて言えば使っている 人が多くないので情報が少ない) マイクロフロントエンド側はWeb Componentsを 提供し、ホスト側は読み込んで使う。 Web Components ホスト <script src=”...” />
  8. 25 現状確認 導入ハードルの低下 Web Components 2022年6月15日、Microsoft Internet Explorer 11のサポート終了に伴い、マイクロフロントエンドを実 現する要素技術としてのWeb Components採用が現実的な選択肢となった。

    https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Componentsが他の代替技術に対してどのくらいアドバンテージがあるのかについては事例紹介にて。