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

Micro Frontendsについて

Micro Frontendsについて

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

satofumi

July 17, 2021
Tweet

Other Decks in Programming

Transcript

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

    ◦ 使用している企業例 • Micro Frontends同士の結合 ◦ Build-Time integration ◦ Run-Time integration ▪ Client-Side Composition ▪ Server-Side Composition ▪ Edge-Side Composition
  2. Frontend Monolith & Microservices frontend micro service micro service micro

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

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

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

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

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

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

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

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

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

    are composed into a greater whole’ 独立したそれぞれのフロントエンドアプリケーションを 1つのアプリケーションに統合する アーキテクチャスタイル そのまま やん
  12. • チームのスケーラビリティ向上 • デプロイ容易性 • ビルド時間の短縮 • 特定の技術に固執しなくて良い。(React, Vue, Angular...)

    • アプリケーションコードに対するキャッチアップコストの削減 Micro Frontendsの特徴・メリット
  13. Build-Time integration • npmライブラリと同じように、各コンポーネント(機能)をライブラ リとして取りこみbuild時にinstallする。 ◦ メリット ▪ サーバーのリソースを意識せずに、サーバーサイドで結合することを 可能にする

    ◦ デメリット ▪ コンポーネント同士の依存関係の結合度が高い ▪ 重複コードや重複パッケージへの考慮の必要 ▪ 最終的なバンドルサイズが大きくなる
  14. Client-Side Composition • Client-Side Compositionでよく使用される技術 • iframe • Web components

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

    • single-spaなどのライブラリ • WebpackのModule Federation この2つについて 説明します
  16. Client-Side Composition • メリット ◦ シンプルなMicro Frontends ◦ 学習コストがそれほど高くない •

    デメリット ◦ クライアントサイドでの結合であるため、パフォーマンスにおける懸念がある。 ◦ サポートブラウザに依存する
  17. 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に対するリクエストを行うかを判断す る。
  18. • メリット ◦ SSRを実現するため、SEO対策や初回ロードのパフォーマンスにおいて有 利。 ◦ クライアントが通信する相手が限られ、通信の最適化が可能。 • デメリット ◦

    考慮に入れなければならない要素が多く、複雑性が高い。 ◦ デファクトスタンダードな設計が存在しない。 Server-Side Composition
  19. 参考記事・本 ・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)