Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
step-by-step BFF
Yosuke Furukawa
PRO
March 30, 2017
Programming
18
10k
step-by-step BFF
Microservices Meetup で話した step by step BFF の話です。
Yosuke Furukawa
PRO
March 30, 2017
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
3.7k
Node.js / Deno 徹底討論の時のスライド
yosuke_furukawa
PRO
2
2.3k
Browser の話
yosuke_furukawa
PRO
4
220
A Philosophy of Software Design 前半
yosuke_furukawa
PRO
24
7.3k
開発組織の持続可能性について
yosuke_furukawa
PRO
16
9.7k
How I run JS / Web Community
yosuke_furukawa
PRO
0
2k
性能に関する考え方
yosuke_furukawa
PRO
7
6.3k
レビューの仕方
yosuke_furukawa
PRO
56
28k
Other Decks in Programming
See All in Programming
Get Ready for Jakarta EE 10
ivargrimstad
0
2.9k
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
570
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
datarian
0
250
Licences open source : entre guerre de clochers et radicalité
pylapp
2
510
git on intellij
hiroto_kitamura
0
170
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
io22 extended What's new in app performance
veronikapj
0
350
即、New Relic / New Relic NOW!
uzulla
0
340
ゴーファーくんと辿るプログラミング言語の歴史/history-of-programming-languages-with-gopher
iwasiman
7
3.8k
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
競プロのすすめ
uya116
0
680
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
430
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Building Your Own Lightsaber
phodgson
94
4.6k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Fireside Chat
paigeccino
12
1.3k
Side Projects
sachag
450
37k
Three Pipe Problems
jasonvnalue
89
8.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Atom: Resistance is Futile
akmur
255
20k
Transcript
Step by Step BFF 2017, Mar, 30th @ Microservices Meetup
in FiNC
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰνʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ͚Δɺ
ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ
Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰνʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ͚Δɺ
ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ ϑϩϯτΤϯυͱόοΫΤϯυʹ͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ
BFF is … • Backend For Frontends #SPXTFS #'' .JDSP4FSWJDF
.JDSP4FSWJDF .JDSP4FSWJDF
BFF is … • Backend For Frontends #SPXTFS #'' .JDSP4FSWJDF
.JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ
BFF is … • Sam Newman introduces the architecture.
BFF is … • Sam Newman introduces the architecture.
BFF use-cases (1) • API Aggregation #'' 6TFS .JDSP4FSWJDF "SUJDMF
.JDSP4FSWJDF $PNNFOU .JDSP4FSWJDF 3FRVFTUUPCMPH QBHF 3FRVFTUUPTPNFЖ4FSWJDFT DPODVSSFOUMZ $PODBU&WFSZ+40/ 3FTQPOTF
• Session Management BFF use-cases (2) #'' 3FRVFTUXJUI TFTTJPOJE (FU5PLFOGSPN
4FTTJPO 4FTTJPO4UPSF JE VTFSOBNF UPLFO 0UIFS"1* 3FRVFTUXJUIUPLFO
• (Server Side) Rendering BFF use-cases (3) #'' 1BHF3FRVFTU $PNQPOFOUT
5FNQMBUFT 'FUDI%BUB "1* 3FOEFS)5.-
• File Upload BFF use-cases (4) #'' 'JMF$IVOLFE 6QMPBE "1*
4UPSF'JMF 'JMF4UPSBHF 4 (FU'JMF1BUI "1*3FRVFTUXJUI 'JMF1BUI
• WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF2VFVF
1VCMJTI
Why BFF ? #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF
Previous BFF pattern • since 1990 ~: 3 tier Client-Server
System https://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern • since 1990 ~ 2000: Monolithic Architecture
https://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern • since 2010: Single Page Application https://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern • since 2013-?: Single Page Application with
MicroServices https://speakerdeck.com/yosuke_furukawa/25
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ΫϥΠΞϯτຊདྷͷ6*ͷ ॲཧʹྗͰ͖Δ
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ը໘Λߏங͢Δखॿ͚Λ͢Δ "1*ฒྻݺͼग़͠ $BDIFͨ͘͞Μ࣋ͯΔ 'JMF6QMPBE8FC4PDLFUFUD
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend using Node.js #BDLFOE -PHJDT ͜͜Λ/PEFKT ʹ͢Δͱͬͱ৭ΜͳϝϦοτ͕
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Ұ෦ͷ'SPOUFOE-PHJDΛڞ ௨ԽͰ͖Δ 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Client Server micro services Rich Single Page Web Apps with
MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ը໘ͷWBMJEBUJPO )5.-ੜFUD 'SPOUFOE -PHJDT Backend For Frontend using Node.js
Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ
• Cache͜͜ͷͰΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
BFF CaseStudy: Twitter
BFF CaseStudy: Twitter
Mobile Twitter Stack #SPXTFS #'' /PEFKT &YQSFTT3FBDU .JDSP4FSWJDF 4DBMB .JDSP4FSWJDF
4DBMB .JDSP4FSWJDF 4DBMB
BFF CaseStudy: Twitter • ࠷ॳ Monolith • ్த͔ΒScalaԽͯ͠MicroServices • ࠷ۙMobileͷϑϩϯτ͚ͩ
BFF ʹ
BFF CaseStudy: Netflix
http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html
Many Devices : Many APIs
Many Devices : Many APIs
BFF CaseStudy: Netflix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ
• OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ
BFF CaseStudy: RecruitTech
Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation •
Server Side Rendering (React) • Session Management • File Upload • WebSocket
Recruit Technologies • Example: booking table
Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE"1* 4FTTJPO4UPSF 3FEJT
/'4 )5518FC4PDLFU 4FTTJPO .BOBHFNFOU 'JMF4UPSBHF 3&45"1* 4FSWFS4JEF 3FOEFSJOH
BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖
BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯεΛ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ
• ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛΊ͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍
etc)
step by step BFF
step by step BFF • طଘͷγεςϜ͕͋ΔͳΒɺҰ୴ͨͩͷProxy ͱͯ͠ߏங͢Δ • ϨϯμϦϯά͢ΔϨΠϠ͚ͩ୲͢Δ •
෦ͷॲཧΛϦΞʔΩςΫςΟϯά͢Δɺط ଘͷAPIΛঃʑʹஔ͖͍͑ͯ͘
step by step BFF #SPXTFS .POPMJUI4FSWJDF
step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF
step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF 4FSWFS4JEF 3FOEFSJOH .PEFSOJ[F'SPOUFOE
step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF 4FSWFS4JEF 3FOEFSJOH .PEFSOJ[F'SPOUFOE
/FX4FSWJDF 4FQBSBUFOFX TFSWJDF
Thank you