micro frontends
動画(社員のみ閲覧可能)
第1回
第2回
目次
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 Frontend
wikipedia: https://ja.wikipedia.org/wiki/マイクロサービス
micro-frontends は micro-services が Frontend 分野の応用です。
https://gyazo.com/3e5bfee7e3bcfc4f83656be04190ca6b
Why we need micro-frontends ?
monolithic https://en.wikipedia.org/wiki/Monolithic_application
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?
- single-spa https://github.com/single-spa/single-spa
- systemjs https://github.com/systemjs/systemjs
- import-map-overrides https://github.com/joeldenning/import-map-overrides/
preview:
https://mf-dog.netlify.app/
source code:
https://github.com/atom-admin
いくつ 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?
single-spa modify existing code
3. How to add code?
single-spa add sub app
4. how to use different technologies?
same with adding new code.
single-spa add sub app
Vue2
Vue3 を使いたい
すみません、Vue3 サンプルコードを準備できなかった。Single-spa の問題ではない、 Vue 3 資料が少ないから。
Where we should use micro-frontends, where shouldn't?
Should use
1. 長い時間で使うシステム、管理画面 40画面、5年以上、機能追加
2. 参加者が多いプロジェクト、40画面、8人
3. 機能再利用したい場合、
会員管理、
コンテンツ管理
Shouldn't use
1. 一時的な web site
2. 小さいシステム、参加者が少ないプロジェクト
vuex
3. MVP (minimum viable product) POC nuxt
質問:
上妻:https://micro-frontends.org/ この記事ではmicrofrontの紹介が少し違うアプローチでされてる気がしますが、TJが話をしてくれた内容との違いを教えてください!
親プロジェクトに子供プロジェクトを定義する方法
1. custom element <mf-sub-app-element>
2. document selector, like id <div id="sub-app" ></div>
SSR できますか?
できそう
感想:
ArakiTakaki.icon https://github.com/ArakiTakaki/sandbox-single-spa
まだCDN通してませんがモノレポでやってみようとしましたが微妙でした。マイクロフロントエンドとしてレポジトリ、もしくはディレクトリは完全に分けたほうが良いと思います。
tsconfigとeslintが共通・個別で分別できる
レポジトリが別れすぎないため、見通しはよかった
こちらは運用でカバーするのが正な気がするため、別にメリットではないかも
repository特有のpackageが発行できる
CIタスクの記述が少なく済みそう(?)
ただどうせNPMインストールが肥大化するから、パッケージは分けたほうが良い気がする。
Buildはスペース事態が分かれているから、早い。
実際にアーキテクチャを1度組めば煩雑ではないですし、専門のインフラできる人が1人ちょっとだけ作業するだけでワーキングレポジトリが新たに作成できます。
単体リリースができる+バージョニング管理できるため、完全に機能単位でプロジェクトを分別できそうでした。
SystemJSがCDN経由しかないの(?)かと思うとそこだけが変な感じします。ちょっと調べた感じじゃ見つかんなくて・・・。
実際にアーキテクチャを1度組めば煩雑ではないですし、専門のインフラできる人が1人ちょっとだけ作業するだけでワーキングレポジトリが新たに作成できます。
はい、そうです。専門のインフラがいるなら、repository が multi-repos でも monorepo でも、OKです。
https://github.com/ArakiTakaki/sandbox-single-spa/blob/7ac8f2a928c58ad38352edee723985fb6d81fb92/package.json#L11-L14
tj.iconこれはよくないです。
SystemJS が CND 経由しかない
いいえ、JS の組み込みは自由です。
SystemJS を選択する理由はただ debug 便利から。
#micro_frontends
created by TJ