ホーム自己紹介ブログ
NO.52
DATE2020. 10. 07

Micro Frontends を調べたすべて

Micro Frontends に関わる記事を 100 件以上読みました(参考記事に記載しています)。そこから得た Micro Frontends についてこの投稿に記録します。 また、調査メモについて、次のリポジトリに残しています。

GitHub - silverbirder/think-micro-frontends

Contribute to silverbirder/think-micro-frontends development by creating an account on GitHub.

GitHub

発端

Micro frontends | Technology Radar | Thoughtworks

We've seen significant benefits from introducing microservices, which have allowed teams to scale the delivery of independently deployed and maintained services. Unfortunately, we've also seen [...]

Thoughtworks

実績企業

  • Airbnb
  • Allegro
  • Amazon
  • Beamery
  • Bit.dev
  • BuzzFeed
  • CircleCI
  • DAZN
  • Elsevier
  • Entando
  • Facebook
  • Fiverr
  • Hello Fresh
  • IKEA
  • Klarna
  • Microsoft
  • Open Table
  • OpenMRS
  • Otto
  • Paypal
  • SAP
  • Sixt
  • Skyscanner
  • Smapiot
  • Spotify
  • Starbucks
  • Thalia
  • Upwork
  • Zalando
  • ZEISS

ProsCons

Pros

観点内容
独立性・任意のテクノロジーと任意のチームで開発可能 /
展開・特定の機能をエンドツーエンド(バック、フロント、デプロイ）で確実に実行可能
俊敏性・特定のドメインについて最高の知識を持つチーム間で作業を分散すると、リリースプロセスが確実にスピードアップして簡素化される。 / ・フロントエンドとリリースが小さいということは、リグレッションテストの表面がはるかに小さいことを意味する。リリースごとの変更は少なく、理論的にはテストに費やす時間を短縮できる。 / ・フロントエンドのアップグレード/変更にはコストが小さくなる

Cons

観点内容
独立性・独立できず、相互接続しているチームが存在しがち / ・多くの機能で複数のマイクロフロントエンドにまたがる変更が必要になり、独立性や自律性が低下 / ・ライブラリを共有すること自体は問題ないが、不適切な分割によって作成された任意の境界を回避するための包括的な場所として使用すると、問題が発生する。 / ・コンポーネント間の通信の構築は、実装と維持が困難であるだけでなく、コンポーネントの独立性が取り除かれる / ・横断的関心事への変更ですべてのマイクロフロントエンドを変更することは、独立性が低下する
展開・より大きな機能の部分的な実装が含まれているため、個別にリリースできない / ・サイト全体の CI / CD プロセス
俊敏性・重複作業が発生する / ・検出可能性が低下した結果、一部の標準コンポーネントを共有できず、個別のフロントエンド間で実装が重複してしまう。 / ・共有キャッシュがないと、各コンポーネントは独自のデータセットをプルダウンする必要があり、大量の重複呼び出しが発生する。
パフォーマンス・マイクロフロントエンドの実装が不適切な場合、パフォーマンスが低下する可能性がある。

統合パターン

Micro Frontends – The Missing Piece Of The Puzzle In Feature Teams - Bluesoft

Bluesoft

統合選択基準技術
サーバーサイド統合良好な読み込みパフォーマンスと検索エンジンのランキングがプロジェクトの優先事項であること・Podium / ・Ara-Framework / ・Tailor / ・Micromono / ・PuzzleJS / ・namecheap/ilc
エッジサイド統合サーバーサイド統合と同じ・Varnish EDI / ・Edge Worker / / CDN / ・ Akamai / ・ Cloudfront / ・ Fastly / ・CloudFlare / ・ Fly.io
クライアント統合さまざまなチームのユーザーインターフェイスを 1 つの画面に統合する必要があるインタラクティブなアプリケーションを構築すること・Ajax / ・Iframe / ・Web Components / ・Luigi / ・Single-Spa / ・FrintJS / ・Hinclude / ・Mashroom
ビルド時統合他の統合が非常に複雑に思われる場合に、 / 小さなプロジェクト（3 チーム以下）にのみ使用すること・ Bit.dev / ・ Open Components / ・ Piral

機能

コミュニケーション

developer.mozilla.org

GitHub - postaljs/postal.js: JavaScript pub/sub library supporting advanced subscription features, and several helpful add-ons.

JavaScript pub/sub library supporting advanced subscription features, and several helpful add-ons. - postaljs/postal.js

GitHub

データ共有

  • ストレージ
    • URL
    • Cookie
    • Local Storage/Session Storage

モジュール共有

  • webpack

Module Federation | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack

Externals | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack

DllPlugin | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack

ルーティング

Vaddin router

How to use React Router in Hilla applications | Vaadin

Learn how to integrate and utilize React Router with Hilla for seamless routing.

vaadin.com

キャッシュ

developer.mozilla.org developer.mozilla.org

認証

  • JWT

JSON Web Tokens - jwt.io

JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS).

JSON Web Tokens - jwt.io

計測

  • Google Analytics
  • Navigation Timing API
  • Resource Timing API
  • High Resolution Time API
  • User Timing API
  • Frame Timing API
  • Server Timing API
  • Performance Observer

Real User Monitoring

  • SpeedCurve
  • Catchpoint
  • New Relic
  • Boomerang.js
  • Parfume.js
  • sitespeed.io

Synthetics Monitoring

  • Lighthouse
  • WebpageTest

アクセス履歴

developer.mozilla.org

分割ポリシー

フロントエンドを分割する方針について

  • 水平分割
    • 画面内にある要素で分割
    • ビジネス上の機能
  • 垂直分割
    • 画面毎に分割

Web サイト ⇔Web アプリ

Microfrontends: An approach to building Scalable Web Apps

マイクロフロントエンドは、かなりのオーバーラップがあるバンドの中央部分の大部分に最も適しています。バンドの両極端に該当するプロジェクトにマイクロフロントエンドアーキテクチャを実装しようとすると、生産性に反するそうです。

リポジトリ

パターンProsCons技術
モノリポコードベース全体に簡単にアクセスできる。 / (検出可能性が高い)モノリポジトリは、特に大規模なチームで作業しているときに、 / 動作が遅くなる傾向があり、バージョン管理下のコミットとファイルの数が増加する。・nx.dev / ・lerna
マルチリポ・マルチリポジトリは、非常に大規模なプロジェクトと / それに取り組む非常に大規模なチームがある場合に最適。マルチリポジトリ環境では、各マイクロアプリを / 個別にビルドする必要がある。

他アーキテクチャ

アーキテクチャ名関係リンク
Modular Monolith・Deconstructing the Monolith – Shopify Engineering / ・kgrzybek/modular-monolith-with-ddd
Enterprise Architecture (Clean Architecture)・Building an Enterprise Application with Vue / ・soloschenko-grigoriy/vue-vuex-ts
Jam StackJam Stack
App ShellApp Shell モデル

書籍

Micro Frontends in Action - Michael Geers

Learn how to apply the microservices approach to the frontend. A guide to simplifying unwieldy frontends by composing them from small, well-defined units.

Manning Publications

参考記事

  • https://blog.bitsrc.io/communication-between-micro-frontends-67a745c6cfbe
  • medium.com
  • medium.com
  • medium.com
  • https://levelup.gitconnected.com/podium-easy-server-side-micro-frontends-385f3a4cd346
  • https://levelup.gitconnected.com/micro-frontend-curry-506b98a4cfc0
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb
  • https://blog.pragmatists.com/independent-micro-frontends-with-single-spa-library-a829012dc5be
  • https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • https://codeburst.io/breaking-a-large-angular-app-into-microfrontends-fb8f985d549f
  • medium.com
  • https://tech.buzzfeed.com/micro-frontends-at-buzzfeed-b8754b31d178
  • https://blog.bitsrc.io/serverless-microfrontends-in-aws-999450ed3795
  • medium.com
  • medium.com
  • medium.com
  • https://blog.bitsrc.io/tools-and-practices-for-microfrontends-dab0283393f2
  • medium.com
  • medium.com
  • https://blog.bitsrc.io/how-we-achieved-smooth-navigation-across-micro-frontends-42130577924d
  • https://eng.collectivehealth.com/gracefully-scaling-web-applications-with-micro-frontends-part-i-162b1e529074
  • https://eng.collectivehealth.com/gracefully-scaling-web-applications-with-micro-frontends-part-ii-8fa730d05b14
  • medium.com
  • medium.com
  • https://medium.com/@rchaves/building-microfrontends-part-i-creating-small-apps-710d709b48b7
  • https://blog.bitsrc.io/6-patterns-for-microfrontends-347ae0017ec0
  • https://medium.jonasbandi.net/frontend-monoliths-run-if-you-can-voxxed-day-zuerich-2019-d8d714ff361a
  • medium.com
  • medium.com
  • medium.com
  • https://engineering.contaazul.com/evolving-an-angularjs-application-using-microfrontends-2bbcac9c023a
  • https://blog.bitsrc.io/11-popular-misconceptions-about-micro-frontends-d5daecc92efb
  • medium.com
  • medium.com
  • https://blog.bitsrc.io/sharing-dependencies-in-micro-frontends-9da142296a2b
  • medium.com
  • medium.com
  • https://levelup.gitconnected.com/brief-introduction-to-micro-frontends-architecture-ec928c587727
  • https://itnext.io/prototyping-micro-frontends-d03397c5f770
  • https://blog.bitsrc.io/mini-web-apps-a-bounded-context-for-microfrontends-with-microservices-f1482af9276f
  • medium.com
  • https://medium.embengineering.com/micro-front-end-and-web-components-ce6ae87c3b7f
  • medium.com
  • medium.com
  • https://blog.bitsrc.io/building-react-microfrontends-using-piral-c26eb206310e
  • medium.com
  • https://itnext.io/implementing-microfrontends-in-gatsbyjs-using-ara-framework-a95ee79cc0e7
  • https://itnext.io/strangling-a-monolith-to-micro-frontends-decoupling-presentation-layer-18a33ddf591b
  • https://itnext.io/page-building-using-micro-frontends-c13c157958c8
  • medium.com
  • medium.com
  • medium.com
  • https://medium.embengineering.com/micro-front-ends-webpack-manifest-b05fc63a0d53
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • https://medium.embengineering.com/micro-front-ends-server-side-rendering-2b515220a56e
  • medium.com
  • medium.com
  • https://itnext.io/the-micro-frontends-journey-tech-agnostic-principle-b61414b19505
  • medium.com
  • https://medium.embengineering.com/micro-front-ends-76171c02ab17
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • https://blog.bitsrc.io/how-to-develop-microfrontends-using-react-step-by-step-guide-47ebb479cacd
  • medium.com
  • medium.com
  • https://towardsdatascience.com/looking-beyond-the-hype-is-modular-monolithic-software-architecture-really-dead-e386191610f8
  • medium.com
  • https://levelup.gitconnected.com/easy-svelte-micro-frontends-with-podium-34aa949bed02
  • medium.com
  • https://blog.bitsrc.io/using-es-modules-with-dynamic-imports-to-implement-micro-frontends-7c840a38890e
  • medium.com
  • medium.com
  • medium.com
  • medium.com
  • https://levelup.gitconnected.com/a-micro-frontend-solution-for-react-1914b19663b
  • medium.com
  • https://floqast.com/engineering-blog/post/implementing-a-micro-frontend-architecture-with-react/
  • https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc
  • medium.com
  • https://blog.bitsrc.io/implementing-micro-front-end-with-single-spa-and-react-eeb4364100f
  • redhat.com
  • medium.com
  • https://www.esentri.com/composing-micro-frontends-server-side
  • https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op
  • https://dev.to/florianrappl/11-popular-misconceptions-about-micro-frontends-463p
  • https://dev.to/rsschouwenaar/thoughts-about-micro-frontends-in-2020-39ed
  • https://dev.to/onerzafer/understanding-micro-frontends-1ied
  • https://dev.to/aregee/breaking-down-the-last-monolith-micro-frontends-hd4
  • https://dev.to/thejoin95/micro-frontends-from-the-00s-to-20s-5a2
  • https://dev.to/florianrappl/communication-between-micro-frontends-41fe
  • https://dev.to/phodal/micro-frontend-architecture-in-action-4n60
  • https://dev.to/jondearaujo/the-approaches-and-challenges-of-micro-frontends-a-theoretical-introduction-176
  • https://dev.to/scriptedalchemy/micro-frontend-architecture-replacing-a-monolith-from-the-inside-out-3ali
  • https://dev.to/abhinavnigam2207/an-approach-to-micro-frontend-architecture-mvp-with-nextjs-2l84
  • https://dev.to/jamesmh/using-micro-uis-to-extend-legacy-web-applications-166
  • https://dev.to/jonisar/11-must-know-frontend-trends-for-2020-13e1
  • https://dev.to/manfredsteyer/6-steps-to-your-angular-based-microfrontend-shell-1nei
  • https://dev.to/coroutinedispatcher/working-on-modularising-android-app-314c
  • https://dev.to/remast/my-software-architecture-resources-g38
  • https://dev.to/open-wc/open-wc-scoped-elements-3e47
  • medium.com
  • medium.com
  • medium.com
  • https://dev.to/kleeut/how-do-you-share-authentication-in-micro-frontends-5glc
  • https://github.com/ChristianUlbrich/awesome-microfrontends
  • https://github.com/rajasegar/awesome-micro-frontends
  • https://github.com/MPankajArun/awesome-micro-frontends
  • https://github.com/phodal/microfrontends
  • https://martinfowler.com/articles/micro-frontends.html
  • https://thenewstack.io/microfrontends-the-benefits-of-microservices-for-client-side-development
  • https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html
  • https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87
  • http://tech.opentable.co.uk/blog/2016/04/27/opencomponents-microservices-in-the-front-end-world/
  • http://tech.opentable.co.uk/blog/2015/02/09/dismantling-the-monolith-microsites-at-opentable/
  • medium.com
  • https://blog.senacor.com/microfrontends/
  • https://www.infoq.com/news/2018/08/experiences-micro-frontends/
  • https://dzone.com/articles/building-micro-frontends-with-single-spa-and-react
  • https://www.agilechamps.com/microservices-to-micro-frontends/
  • https://gustafnk.github.io/microservice-websites/
  • https://hub.packtpub.com/what-micro-frontend/
  • https://www.thoughtworks.com/de/radar/techniques/micro-frontends
  • http://blog.wolksoftware.com/microlibraries-the-future-of-web-development
  • https://xebia.com/blog/the-monolithic-frontend-in-the-microservices-architecture/
  • https://x-team.com/blog/micro-frontend/
  • https://menelaos.dev/devweek-sf-2020/
  • https://www.infoq.com/news/2020/07/microfrontends-vue-yoav-yanovski/
  • https://www.infoq.com/articles/microfrontends-business-needs
  • https://www.infoq.com/articles/architecture-trends-2020/
  • https://www.infoq.com/news/2018/08/experiences-micro-frontends/
  • https://www.infoq.com/news/2020/01/strategies-micro-frontends/
  • speakerdeck.com
フロントエンド

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーション こぶりー 運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

タグ「フロントエンド」の記事

Webmention 使ってみた

Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ

2026年09月08日

フロントエンド
個人開発
モジュールアップデートでやっていること

ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー

2026年07月24日

AI
フロントエンド
写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI
フロントエンド
テスト
← ブログ一覧へ