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
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
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
3.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
12
7.2k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
190
GPUを計算資源として使おう!
primenumber
1
290
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
1
370
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8.1k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
120
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
Porting a visionOS App to Android XR
akkeylab
0
910
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Being A Developer After 40
akosma
90
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Six Lessons from altMBA
skipperchong
28
3.9k
Facilitating Awesome Meetings
lara
54
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Speed Design
sergeychernyshev
32
1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Scaling GitHub
holman
461
140k
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