$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
step-by-step BFF
Search
Yosuke Furukawa
PRO
March 30, 2017
Programming
18
11k
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
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
160
Removing Corepack
yosuke_furukawa
PRO
9
1.3k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.5k
Strip Types と Storage
yosuke_furukawa
PRO
4
340
Module Harmony について
yosuke_furukawa
PRO
3
1.5k
LTのやり方
yosuke_furukawa
PRO
16
2.2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
710
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.4k
Other Decks in Programming
See All in Programming
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.8k
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
6.9k
Cursorでアプリケーションの追加開発や保守をどこまでできるか試したら得るものが多かった話
drumnistnakano
0
280
Jakarta EE meets AI
ivargrimstad
0
1.2k
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
820
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
120
CSC305 Lecture 23
javiergs
PRO
0
120
Arm移行タイムアタック
qnighy
0
410
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
390
コンテンツの主権を守るため(?)、高機能画像CDNからAWS自前対応に乗り換えた話
lengthtail
1
120
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
2
160
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.7k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Optimizing for Happiness
mojombo
376
70k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Agile that works and the tools we love
rasmusluckow
328
21k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Language of Interfaces
destraynor
154
24k
RailsConf 2023
tenderlove
29
920
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