micro frontends
動画（社員のみ閲覧可能）
目次
What is micro-frontends?
Why we need micro-frontends?
How to use micro-frontends?
Where we should use micro-frontends, where shouldn't?
What is micro-frontends ?
micro-frontends は micro-services が Frontend 分野の応用です。
https://gyazo.com/3e5bfee7e3bcfc4f83656be04190ca6b
Why we need micro-frontends ?
https://gyazo.com/df9087debaee9aff87c161317a697e94
課題
唯一依頼環境、違う技術を使えない。
開発環境複雑
機能追加、メンテナンスが難しい
Monolith Application は如何ロジックを分ける？
一般的な方法は folder でロジックを分ける。例えば
code: monolith
// xxx system
- src
-- components // ui
-- pages
--- order // business
---- components
----- order-form // service
----- order-list
--- product
domain
Micro-Service は如何ロジックを分ける？
code: micro
// service order
src
// service product
src
// xxx
src
でも。何故多いプロジェクト Frontend は monolith を採用するか？
1. web site は admin system より多い
2. web site は公開、admin system 非公開
3. hello world は monolith で簡単
4. 難しいスクリプトをいっぱい書かなくて済むからだと思います！ by ArakiTakaki.icon
5. 構成簡単
6. micro service が難しい
umamichi.icon 扱えるエンジニアが多いからというのもある？
tj.icon はい、そうです。
web site vs. admin system
table:比較
web site admin system
life 1-3 years 3+ years
bussiness less 5 many 20+
だから web site, admin system 開発考え内容が全然違う。
web site, create easy, all in one.
admin, update, replace easy, all in plugins
onuma.icon 確かに管理画面をリニューアルってあんまり聞かないですね🤔
tj.icon 👍
Frontend development layer
Micro Frontend の強みを理解するために、Frontend development layer を理解しないといけないです。
https://gyazo.com/95a061db1160528ba284abd1761386e8
UI components
Service components
Business modules
System
UI components
例えば、input, button, layout
Service components
例えば、支払い機能、CSV ダウンロード機能
業務開発
例えば、チケット予約業務、外部会員情報連携業務
システム開発
例えば、美術館予約システム。
Micro Frontend
目標：
システムは5年、10年でも続ける
points
1. source code 独立、独立開発、独立テスト、独立リリース
2. 新規追加も、置き換えも簡単
3. 開発環境構築やすい
How to use micro-frontends ?
1. Sample
what I use?
preview:
source code:
いくつ repository？
https://gyazo.com/309a25bb7cadb8b90138e54a018e0d67
答え：
Your app + 1
さらに複雑ではないか？
No
一緒に考えて
2020年開発したXXX管理システムは、 2025 年に如何なった？
1. 50+ 機能
2. UI framework は 2020 年のバージョンを使ってる
3. 参加メンバーは 50人以上、半分以上は別のチームに移動した
この時、yyy 機能を置換えしたいです。
何の技術を使う？2025年時に、世界中の技術者たちは何を使ってますか？
誰が担当？2025年時に、2020年使ってる技術を覚える技術者は何処で探しますか？
2. How to modify existing code?
3. How to add code?
4. how to use different technologies?
same with adding new code.
Vue2
Vue3 を使いたい
すみません、Vue3 サンプルコードを準備できなかった。Single-spa の問題ではない、 Vue 3 資料が少ないから。
Where we should use micro-frontends, where shouldn't?
Should use
1. 長い時間で使うシステム、管理画面 40画面、5年以上、機能追加
2. 参加者が多いプロジェクト、４０画面、８人
3. 機能再利用したい場合、
会員管理、
コンテンツ管理
Shouldn't use
1. 一時的な web site
2. 小さいシステム、参加者が少ないプロジェクト
vuex
3. MVP (minimum viable product) POC nuxt
質問：
親プロジェクトに子供プロジェクトを定義する方法
1. custom element <mf-sub-app-element>
2. document selector, like id <div id="sub-app" ></div>
SSR できますか？
できそう
感想：
まだCDN通してませんがモノレポでやってみようとしましたが微妙でした。マイクロフロントエンドとしてレポジトリ、もしくはディレクトリは完全に分けたほうが良いと思います。
tsconfigとeslintが共通・個別で分別できる
レポジトリが別れすぎないため、見通しはよかった
こちらは運用でカバーするのが正な気がするため、別にメリットではないかも
repository特有のpackageが発行できる
CIタスクの記述が少なく済みそう（？）
ただどうせNPMインストールが肥大化するから、パッケージは分けたほうが良い気がする。
Buildはスペース事態が分かれているから、早い。
実際にアーキテクチャを1度組めば煩雑ではないですし、専門のインフラできる人が１人ちょっとだけ作業するだけでワーキングレポジトリが新たに作成できます。
単体リリースができる＋バージョニング管理できるため、完全に機能単位でプロジェクトを分別できそうでした。
SystemJSがCDN経由しかないの（？）かと思うとそこだけが変な感じします。ちょっと調べた感じじゃ見つかんなくて・・・。
実際にアーキテクチャを1度組めば煩雑ではないですし、専門のインフラできる人が１人ちょっとだけ作業するだけでワーキングレポジトリが新たに作成できます。
はい、そうです。専門のインフラがいるなら、repository が multi-repos でも monorepo でも、OKです。
tj.iconこれはよくないです。
SystemJS が CND 経由しかない
いいえ、JS の組み込みは自由です。
SystemJS を選択する理由はただ debug 便利から。