Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
基盤システムへのマイクロフロントエンドの活用事例
Search
sainu
March 30, 2023
Programming
2
520
基盤システムへのマイクロフロントエンドの活用事例
「Fintech SaaSにおける品質を高めるためのフロントエンド開発論」での発表で利用したスライドです。
sainu
March 30, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
340
Milestoner
bkuhlmann
1
410
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Anthropic Cookbook のおすすめレシピ
schroneko
6
630
ONE WEDGE_company_guide
1wedge_one
0
440
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
160
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Invisible Side of Design
smashingmag
294
49k
Rails Girls Zürich Keynote
gr2m
91
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
KATA
mclloyd
14
12k
What's in a price? How to price your products and services
michaelherold
237
11k
Happy Clients
brianwarren
91
6.4k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing the Hi-DPI Web
ddemaree
276
33k
How to Ace a Technical Interview
jacobian
272
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Faster Mobile Websites
deanohume
298
30k
Transcript
基盤システムへのマイクロ フロントエンドの活用事例 2023/03/30 @sainu(株式会社マネーフォワード)
自己紹介
自己紹介 • sainu / 道祖克理(さいのうかつとし) • Ruby, TypeScript • マネーフォワードでは基盤プロダクトを開発
• 2022/09〜 岐阜市に移住 冷やしたぬきそば / 更科 みそベトコンラーメン / 香楽 カプサイメン / カプサイメン 岐阜タンメンも良いが...
このスライドについて 全てを話すには時間が足りないので、薄く広くなってしまいました 🙏 消化不良の方はこちら👇 マイクロサービスのその先へ。マネーフォワードのビジネスを加速するマイクロフロントエンドという選 択 ただ、記事に書けてないことも話します 🤭
目次 • 解決したい課題 • マイクロフロントエンドとは • どのように実践したか • 課題 •
所感
解決したい課題
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続けた 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ • 今後も新規サービスに同様の開発が発生することが想定
解決したい課題 • マネーフォワードクラウドのサービス数が毎年増え続ける 📈 • これらサービスの基盤となる機能がサービスに個別最適化さ れリリース🚢 • 各サービスで似たような機能がリリースされても複数サービス を併用するユーザーは少なかった
• が...事業が成長しサービスを併用するするユーザーが増えて 課題が顕著に ◦ サービス間でデータが同期されておらず、持っている データ構造が違うために、 ユーザーが複数のサービス でデータを同期する手間が繰り返し発生 😇 • いくつもの開発チームが同じ機能を繰り返し開発するコストが 発生。UI/UX、品質がバラバラ • 今後も新規サービスに同様の開発が発生することが想定 なんとかせにゃいかん!!
マイクロフロントエンドとは
マイクロ フロントエンド 複数の小さなフロントエンドアプリケー ションを組み合わせて大きなアプリ ケーションを構築するアーキテクチャ パターン
マイクロフロントエンドの利点 1.開発速度向上 開発・デプロイが独立したことで開発速度が向上 2.技術異質性 サービスに適した言語で開発が可能に 3.障害の局所化 障害時に影響範囲が限定的に 4.変更容易性 バグ修正や機能追加が容易に 5.再利用性
サービスが他のプロジェクトで再利用できる 出典: micro-frontends.org
マイクロフロントエンドの統合パターン ビルドタイム ランタイム アプローチ コンテナアプリのビルド時にマイクロフロント エンドをインストールする 独立して配置されたマイクロフロント エンドを動的にロードする パフォーマンス ⚠(重複リソースをバンドルしないように注
意) ❌ セキュリティ ✅ ⚠(適切なセキュリティポリシーや CORS設定を適用する) 技術スタックの柔軟さ ❌ ✅ デプロイ ❌ ✅高いスケーラビリティ 依存管理の複雑さ ✅ ⚠(マイクロフロントエンド間の互換 性を保つためのガバナンスやコミュニ ケーションが必要) ユーザーに一つのアプリケーションとして見せるために ...
マイクロフロントエンドの分割パターン 1.水平分割 画面内の要素で分割、 1つの画面上に複数のフロントエンドアプリケーションが同居 例 Spotify、マクアケ 2.垂直分割 ルーティング単位で分割、 1画面に1アプリケーション 例
CircleCI、日経電子版 出典: マイクロフロントエンド
思うに...
「こうあるべき」という形は無い
「こうあるべき」という形は無い 0か100かでもない
型にハメる必要はない コンテナ アプリ 水平分割なら... 構成要素は全てマイクロフロントエンドになっ ているのが理想! そんなことは無い マイクロフロント エンド
マイクロフロント エンド マイクロフロント エンド マイクロフロント エンド
型にハメる必要はない ページ 垂直分割なら... 全てのページがマイクロフロントエンドとして分 離されているのが理想! そんなことは無い ページ ページ ページ
ページ ページ ページ マイクロフロントエ ンド
サービス特性や規模、抱えている課題、開発組織の文化や状況 置かれている状況によって解は違う
今自分が置かれている状況で どうあるべきかを柔軟に考えるのが大事
どのように実践したか
分割、統合 分割 • 特定URLのコンテンツ(垂直) • あるボタン(水平) • 画面の一部のUI(水平) 水平or垂直はあまり意識せず、どの機能をどういう形で提供すべきか?で考えた 統合方法
• ビルドタイム? ランタイム? 👉 ランタイム ◦ デプロイの独立性を優先 • iframe? JS? web components? FW? SSI? 👉 web components ◦ Web標準API ◦ 属性値の変更検知やライフサイクルをサポート • クライアント? サーバー? エッジ? 👉 クライアント ◦ SSOの要件なし ◦ CSRやSSR様々なアプリがある
どう実装したか • アプリケーションはReactで開発 • Reactアプリをカスタム要素として登録する JSを配信 • コンテナアプリはHTMLにカスタム要素を記述しJSを読み込むことでランタイム統合を実現 • 後方互換性のない変更に備えて
JSのURLにバージョンを含める (https://path/to/v1/xxx.js ) • サービスのバックエンドをAPI Gateway兼認証サーバーとしてリクエストを認証 • マイクロフロントエンド間のデータ共有 ◦ URLのクエリ ◦ CustomEventで変更通知 詳しくはzennの記事に書いてます 👉マイクロサービスのその先へ。マネーフォワードのビジネスを加速するマイクロ フロントエンドという選択
意識したこと • なるべく特定フレームワークに依存せずに Web標準APIで作ること。 • 統合されるサービス数が多く、使われている技術も多種多様。 • サービスチームに統合のために新たなツールの導入をさせない。
課題
課題 • フロントエンドとバックエンドを統合テストするために統合レイヤーとなるサービス をセットアップする必要がある。 ◦ マイクロフロントエンド単体でエンドツーエンドの開発ができる状態が理想 ...
所感
所感 1. 特定領域の開発をUIからインフラまで専門チームに移譲することには成功した 2. たくさんの製品を抱えるマネーフォワードクラウドにおいては、共通基盤機能を UI/UXごと再利 用性を持たせて切り出せるマイクロフロントエンドは、ビジネスとの相性は良いと思った。 3. システムの作りが複雑化することは避けられないので、それなりに組織やシステムが大きくなけ れば、得られる価値よりも運用コストの方が高そう。
4. マイクロフロントエンドに、ベストプラクティスが あるない 5. 1チームで複数のマイクロフロントエンドを管理するような状態は間違っている 6. 異なるチームのマイクロフロントエンドでブラウザ上の通信が必要な時は慎重に a. 依存関係の管理が必要になって運用難易度が上がる b. データの同期はバックエンドで行う
ご清聴ありがとう ございました