[キャッチアップ] マイクロフロントエンド

マイクロフロントエンド

• マイクロフロントエンドを広めた記事の日本語訳
• モノリシックなWebアプリケーションから、サーバサイドのマイクロサービス化を経て、マイクロフロントエンドが求められるようになった経緯を学ぶことができる
• マイクロフロントエンドの原則や使用する技術も網羅されているので最初に読むべき
• ミニショッピングアプリを例に、機能ごとに開発チームを分けた例を具体的なコードが掲載されているので、手元で試すことも可能

動くものをすぐに試せて、WebComponent によるマイクロフロントエンド分離を体験できるのが良い

マイクロフロントエンドを調査した話

• 1個目の記事に対する筆者の要約と見解をまとめたもの
• 1個目の記事が難しい、長いと感じた場合はこれに目を通すと手っ取り早い

私見ですが、マイクロフロントエンドを導入するのには以下が必要だと考えています。
特定の領域やミッションに特化したチーム構成になっているか、またはチーム構成にすることができるか

には激しく同意で、明確なドメイン分離が出来ているか怪しい状態で導入すると、マイクロフロントエンド間が密になってしまい、悲惨なことになりそう

マイクロフロントエンドの実現方法

• MicroFrontends (英語) で紹介されている、マイクロフロントエンドの実現方法が日本語で要約されている
• 通常は WebComponents を使用するが、それ以外のアプローチについても紹介されているため、枯れた技術を使いたい、レガシーブラウザをサポートしたいという需要にも一応答えられる

個人的には やっぱり WebComponent でデータを受け渡すってのをやりたいかなぁ

Micro Frontends (英語)

• マイクロフロントエンドの実現方法 の引用元となってる記事
• 実現方法以外にも、マイクロフロントエンドのメリット/デメリットが細かく解説されていたり、スタイリングの共有や自動テストに関する考え方まで詳しく解説されている
• 非常に長い内容の英語記事だが、機械翻訳でも全然読めるし、図やコードも多いので雰囲気で読める

フロントエンドエンジニアは Micro Frontends の夢を見るか

• メルカリによるマイクロフロントエンドの紹介
• React でどうマイクロフロントエンドを実現していくかに重きが置かれている

そういえば Vue はどうなんだろうと思ったら、 vue-cli で普通にターゲット選べるみたいね

[覚書] Micro Frontends

• 概要、事例、メリデメ、実現方法が綺麗にまとまっている
• 関連リンクからさらに様々な情報源にアクセス可能

この人のリサーチ力すごいな(小並)

Micro Frontends の理論と実践
 -価値提供を高速化する真のマイクロサービスのあり方

• FinC による、マイクロサービスの実践導入の背景、手法、課題感をまとめたスライド
• 非常にまとまった内容でありながらも、事例としても参考になる内容

レガシーアプリケーションの中で一部分だけマイクロフロントエンドで導入することで、最新の技術スタックを使っていけるってケースもあるのか