モノリスからマイクロフロントエンドに踏み出した話

Transcript

1. モノリスからマイクロフロ ントエンドに踏み出した話 2023/02/22 1
2. 技術戦略って何？ プロダクトの抱える問題点 解決策 よさ と つらみ 将来的な話 01 02 03 04 05 2
3. | 01 技術戦略って何？ | SaaSにおける フロントエンドの技術戦略 3
4. SaaSにおけるフロントエンドの技術戦略 4
5. ”技術戦略”って何？ 5
6. 辞書で調べてみると... ① いくさのはかりごと。特に、戦いに勝つための大局的な方法や策略。戦術より上位の概念。 ② ある目的を達成するために大局的に事を運ぶ方策。特に、政治闘争、企業競争などの長期的な策略。 6 戦略とは – コトバンク 精選版 日本国語大辞典より https://kotobank.jp/word/%E6%88%A6%E7%95%A5-89017
7. フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ある目的を達成するための方策 7
8. ”ある目的”って何？ 8
9. 今回はSaaSという文脈なので... ユーザーに価値を提供すること 9 ある目的とは
10. 変化に柔軟に対応し ユーザーに継続的に価値を提供すること 10 ある目的とは(もう一声)
11. フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ユーザーに継続的に価値を提供するための方策 11
12. FORCASの開発における問題 ユーザーに継続的に価値を提供する という視点を踏まえて | 02 プロダクトの抱える問題点 | 12
13. 営業DXソリューション • ABMの実践や営業生産性向上を支援する ◦ 国内企業150万社、業界560区分、利用サービス1,600種 類など、様々なデータを分析し、戦略実行と効果測定 を行う • 2017年5月にリリース ◦ 以降、6年にわたって新規開発や保守を行っている 13 FORCASとは
14. アーキテクチャーはざっくりこんな感じ 14 FORCASの開発における問題点 そこそこでかい front そこそこでかい core-api api1 api2 api3 モノリス 認証に必要 な情報
15. こんな問題が浮上しました • 他の画面の修正が影響を与える可能性がある • デプロイに時間がかかる ◦ リグレッションテスト全部通す • ビッグバンリリースになりがち • 認知負荷が高い 15 FORCASの開発における問題点 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること” に反している
16. マイクロフロントエンド導入 ユーザーに継続的に価値を提供する という視点を踏まえて | 03 解決策 | 16
17. 17 マイクロフロントエンド https://micro-frontends.org
18. 18 マイクロフロントエンド https://micro-frontends.org
19. 19 マイクロフロントエンド https://micro-frontends.org micro frontend1 bff1 micro service1 micro frontend2 bff2 micro service2
20. 20 FORCASに導入したマイクロフロントエンドのアーキテクチャー そこそこでかい front そこそこでかい core-api api1 api2 api3 Micro Frontend auth-api bff api モノリス 認証に必要 な情報
21. マイクロフロントエンド導入 して感じたこと ユーザーに継続的に価値を提供する という視点を踏まえて | 04 よさ と つらみ | 21
22. よかったこと FORCASにマイクロフロントエンドを導入してみて • 独立したデプロイが可能 ◦ デプロイの時間が抑えられる ◦ モノリス側にとらわれない • マイクロフロントエンドの修正時に、モノリス側にバグ混入の可能性が(基本的に)ない • 細かいリリースをした • 認知負荷の減少 • 技術選択ができた 22 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること
23. つらかったこと FORCASにマイクロフロントエンドを導入してみて • モノリスに追加していくより短期的にはコストが高い ◦ パイプラインの作成 ◦ 認証周りの実装 • 情報がそれほど豊富ではない 23
24. マイクロフロントエンドで こんな世界が作れたらいいな ユーザーに継続的に価値を提供する という視点を踏まえて | 05 将来的な話| 24
25. 25 プロダクト間でマイクロフロントエンドをシェア Product B Micro Frontend Product A
26. 26 プロダクト間でマイクロフロントエンドをシェア Product B マイクロフロントエンド群 Micro Frontend1 Micro Frontend2 Micro Frontend3 Micro Frontend4 Micro Frontend5 Micro Frontend6 Product C Product D Product A
27. 今日の結論 | xx 余談 | 27
28. マイクロフロントエンドはいいぞ 28
29. 「この技術便利そう」「この技術面白い」と 興味を持って取り組むことは、とても良いこ と。ただ”戦略”という枠組みにおいては、組 織としての目的や課題を踏まえた選択をする と良いかもしれませんね。 目的と課題に沿って 技術戦略を策定する 29
30. 最後までご清聴ありがとうございました。 Thank you 30