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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
k2491p
February 22, 2023
Programming
410
1
Share
モノリスからマイクロフロントエンドに踏み出した話
k2491p
February 22, 2023
Other Decks in Programming
See All in Programming
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
arkw
0
190
条件判定に名前、つけてますか? #phperkaigi #c
77web
2
980
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
230
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
okashoi
0
270
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
310
20260320登壇資料
pharct
0
170
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
o0h
PRO
0
200
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.7k
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
150
PCOVから学ぶコードカバレッジ #phpcon_odawara
o0h
PRO
0
240
Rethinking API Platform Filters
vinceamstoutz
0
11k
アーキテクチャモダナイゼーションとは何か
nwiizo
17
4.6k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1k
A Soul's Torment
seathinner
6
2.6k
HDC tutorial
michielstock
1
610
GitHub's CSS Performance
jonrohan
1032
470k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Code Review Best Practice
trishagee
74
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
BBQ
matthewcrist
89
10k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.5k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Transcript
モノリスからマイクロフロ ントエンドに踏み出した話 2023/02/22 1
技術戦略って何? プロダクトの抱える問題点 解決策 よさ と つらみ 将来的な話 01 02 03
04 05 2
| 01 技術戦略って何? | SaaSにおける フロントエンドの技術戦略 3
SaaSにおけるフロントエンドの技術戦略 4
”技術戦略”って何? 5
辞書で調べてみると... ① いくさのはかりごと。特に、戦いに勝つための大局的な方法や策略。戦術より上位の概念。 ② ある目的を達成するために大局的に事を運ぶ方策。特に、政治闘争、企業競争などの長期的な策略。 6 戦略とは – コトバンク 精選版
日本国語大辞典より https://kotobank.jp/word/%E6%88%A6%E7%95%A5-89017
フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ある目的を達成するための方策 7
”ある目的”って何? 8
今回はSaaSという文脈なので... ユーザーに価値を提供すること 9 ある目的とは
変化に柔軟に対応し ユーザーに継続的に価値を提供すること 10 ある目的とは(もう一声)
フロントエンドの技術戦略 ↓ フロントエンドの技術において、 ユーザーに継続的に価値を提供するための方策 11
FORCASの開発における問題 ユーザーに継続的に価値を提供する という視点を踏まえて | 02 プロダクトの抱える問題点 | 12
営業DXソリューション • ABMの実践や営業生産性向上を支援する ◦ 国内企業150万社、業界560区分、利用サービス1,600種 類など、様々なデータを分析し、戦略実行と効果測定 を行う • 2017年5月にリリース ◦
以降、6年にわたって新規開発や保守を行っている 13 FORCASとは
アーキテクチャーはざっくりこんな感じ 14 FORCASの開発における問題点 そこそこでかい front そこそこでかい core-api api1 api2 api3
モノリス 認証に必要 な情報
こんな問題が浮上しました • 他の画面の修正が影響を与える可能性がある • デプロイに時間がかかる ◦ リグレッションテスト全部通す • ビッグバンリリースになりがち •
認知負荷が高い 15 FORCASの開発における問題点 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること” に反している
マイクロフロントエンド導入 ユーザーに継続的に価値を提供する という視点を踏まえて | 03 解決策 | 16
17 マイクロフロントエンド https://micro-frontends.org
18 マイクロフロントエンド https://micro-frontends.org
19 マイクロフロントエンド https://micro-frontends.org micro frontend1 bff1 micro service1 micro frontend2
bff2 micro service2
20 FORCASに導入したマイクロフロントエンドのアーキテクチャー そこそこでかい front そこそこでかい core-api api1 api2 api3 Micro
Frontend auth-api bff api モノリス 認証に必要 な情報
マイクロフロントエンド導入 して感じたこと ユーザーに継続的に価値を提供する という視点を踏まえて | 04 よさ と つらみ |
21
よかったこと FORCASにマイクロフロントエンドを導入してみて • 独立したデプロイが可能 ◦ デプロイの時間が抑えられる ◦ モノリス側にとらわれない • マイクロフロントエンドの修正時に、モノリス側にバグ混入の可能性が(基本的に)ない
• 細かいリリースをした • 認知負荷の減少 • 技術選択ができた 22 “変化に柔軟に対応し、ユーザーに継続的に価値を提供すること
つらかったこと FORCASにマイクロフロントエンドを導入してみて • モノリスに追加していくより短期的にはコストが高い ◦ パイプラインの作成 ◦ 認証周りの実装 • 情報がそれほど豊富ではない
23
マイクロフロントエンドで こんな世界が作れたらいいな ユーザーに継続的に価値を提供する という視点を踏まえて | 05 将来的な話| 24
25 プロダクト間でマイクロフロントエンドをシェア Product B Micro Frontend Product A
26 プロダクト間でマイクロフロントエンドをシェア Product B マイクロフロントエンド群 Micro Frontend1 Micro Frontend2 Micro
Frontend3 Micro Frontend4 Micro Frontend5 Micro Frontend6 Product C Product D Product A
今日の結論 | xx 余談 | 27
マイクロフロントエンドはいいぞ 28
「この技術便利そう」「この技術面白い」と 興味を持って取り組むことは、とても良いこ と。ただ”戦略”という枠組みにおいては、組 織としての目的や課題を踏まえた選択をする と良いかもしれませんね。 目的と課題に沿って 技術戦略を策定する 29
最後までご清聴ありがとうございました。 Thank you 30