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
BFF Antipattern
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yosuke Furukawa
PRO
June 07, 2018
Programming
15k
7
Share
BFF Antipattern
2018/06/07 に発表した BFF アンチパターンの話です。
Yosuke Furukawa
PRO
June 07, 2018
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
230
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.7k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
340
Removing Corepack
yosuke_furukawa
PRO
9
1.9k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.1k
Strip Types と Storage
yosuke_furukawa
PRO
4
500
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
LTのやり方
yosuke_furukawa
PRO
16
3k
Other Decks in Programming
See All in Programming
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
pyama86
3
1.8k
Zod v4 Codec でスキーマに型変換を埋め込む REST API 設計 #TSKaigi2026
ryutaro_yako
0
170
関係性から理解する"同一性"の型用語たち
pvcresin
2
620
3Dシーンの圧縮
fadis
1
520
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
270
RailsTokyo 2026#4: AI様があれば、 Hotwireの弱点は消えるか?
naofumi
5
1k
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
4
1.2k
net-httpのHTTP/2対応について
naruse
0
360
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
nrslib
0
220
AIとRubyの静的型付け
ukin0k0
0
460
ふつうのFeature Flag実践入門
irof
7
3.3k
Old Dog, New Tricks: The Java 25 Reinvention - JNation
bazlur_rahman
0
140
Featured
See All Featured
A Soul's Torment
seathinner
6
2.9k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
430
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
710
Discover your Explorer Soul
emna__ayadi
2
1.1k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
710
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
160
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
Mobile First: as difficult as doing things right
swwweet
225
10k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
590
Skip the Path - Find Your Career Trail
mkilby
1
130
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Transcript
BFFΞϯνύλʔϯ UIT in LINE
Twitter: @yosuke_furukawa Github: yosuke-furukawa
!*5Ͱ#''ͷهࣄΛॻ͍ͯ·͢ɻ
BFF is … • Backend For Frontends #SPXTFS #'' .JDSP4FSWJDF
.JDSP4FSWJDF .JDSP4FSWJDF
None
༁όοΫΤϯυͱϑϩϯτΤϯυΛ͚Δࣄͦͷ ͷ͕Ξϯνύλʔϯ
BFFΞϯνύλʔϯ
BFFΛ2࣮ؒફͯ͠ ࣮ࡍʹؕͬͨ ΞϯνύλʔϯΛհ
͡Ίʹ ॻ͍ͯͯBFFΞϯνύλʔϯ ͱ͍͏͔৫Ξϯνύλʔϯ Έ͍ͨʹͳͬͯ͠·ͬͨ
ΤϯδχΞ৫ͷট • Chapter 5-6: ৫ઃܭͱΞʔΩςΫνϟ ࣮ͷͱ͜ΖγεςϜΞʔΩςΫνϟͱ ৫ઃܭຊ࣭తʹಉ͡ͷͰ͋Δɻ
BFF ϑϩϯτΤϯυͱόο ΫΤϯυͷՍ͚ڮͰ͋Γɺ ৫ͷ߹
BFFΞϯνύλʔϯ ͦͷ1 εύʔείϛϡχέʔγϣϯ
BFFΞʔΩςΫνϟಉ͕࢜ ૄʹͳΔ͕ɺ ίϛϡχέʔγϣϯ·Ͱૄ(sparse) ʹͳͬͯ͠·͏έʔε
None
ྫ1: ςʔϒϧؙݟ͑ API JE OBNF BHF
#'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP MBTU@OBNFCBS SPMFIPHF
SPMFGVHB ^
#'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP MBTU@OBNFCBS SPMFIPHF
SPMFGVHB ^ %#ͷεΩʔϚ͕ಁ͚ͯݟ͑Δʂʂʂʂ
SELECTจ͕ಁ͚ͯݟ͑Δɻ ୯७ͳέʔεͳΒͦΕͰྑ͍͕ɺ snake => camelͷมJOIN͠ ͨεΩʔϚ͕ͦͷ··ݟ͑ͯΔͷ NGɻɻɻ
ྫ2: N+1 Query API
#'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JET< > VTFST<\
JE OBNFGPP ^ \ JE OBNFCBS ^>
#'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JET< > /ճΫΤϦʔ͛ͯΔɻɻɻɻ
VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFGPP ^
ϚΠΫϩαʔϏε͔ͩΒͱ͍ͬͯ APIΛ؆ૉʹ͍͍ͯ͠༁͡Όͳ͍ɻ ݁Ռ:1ϖʔδදࣔ͢Δͷʹ3secͱ ͔͔͔Δ
શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυBFF͔ͩΒͱݴͬͯϏδωεϩ δοΫαʔόαΠυʹ͋ΔͷΛΕͳ͍Ͱཉ͠ ͍ʢαϘΒͳ͍Ͱ͘Εʣ • ϑϩϯτΤϯυͲ͏͍͏API͕΄͍͠ͷ͔ͪΌ ΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ཉ͍͠ ʢΩϟϝϧ͕ཉ͍͠ͱ͔͜͜arrayͰ΄͍͠ͱ͔
ͪ͜ΒଆͰͪΌΜͱݴ͏͖ʣ
શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυBFF͔ͩΒͱݴͬͯϏδωεϩ δοΫαʔόαΠυʹ͋ΔͷΛΕͳ͍Ͱ ཉ͍͠ • ϑϩϯτΤϯυͲ͏͍͏API͕΄͍͠ͷ͔ ͪΌΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ ཉ͍͠
ΞʔΩςΫνϟૄͰؔରͰ͋Γɺ ίϛϡχέʔγϣϯີͰͳ͚ΕͳΒͳ͍
ΒͲ͏ͯ͠Δ͔
ΒͲ͏ͯ͠Δ͔
ϑϩϯτΤϯυͱόοΫΤϯ υͷର͢ΔͨΊͷϞοΫαʔ όΛ࡞ΓɺೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ
None
BFFΞϯνύλʔϯ ͦͷ2 ΠϯϑϥϨεϙϯγϏϦςΟ
BFFϑϩϯτΤϯυͷͨΊͷαʔ όͳͷʹɺΠϯϑϥɾӡ༻όοΫ Τϯυʹԡ͚ͯ͠͠·͏έʔε
Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ͦͦ͜ͷαʔό୭͕ ݟΔͷʁϑϩϯτʁόοΫ Τϯυʁ
Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ৽͍͠ͷΛ࡞Δͷʹӡ༻ όοΫΤϯυͤʁ
A. શһ
Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳΜ͡Όͳ ͍ • ϑϩϯτ։ൃ͢ΔͳΒαʔϏεͷোʹහײ ʹͳΔ͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ͖ • όοΫΤϯυϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔
Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍
Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳΜ͡Όͳ ͍ • ϑϩϯτ։ൃ͢ΔͳΒαʔϏεͷোʹහײ ʹͳΔ͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ͖ • όοΫΤϯυϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔
Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍ ϑϩϯτΤϯυͱόοΫΤϯυʹ͚͔ͨΒͱݴͬͯαʔ ϏεҰͭɻαʔϏεͷ࣭Λ্͛Δͷશһٿ
BFFΞϯνύλʔϯ ͦͷ3 ϏοάόϯδϣΠϯτ
࠷ޙͷ࠷ޙʹͳ͔ͬͯΒόοΫΤϯ υͱϑϩϯτΤϯυΛ݁߹͢Δͱ େମࢮ͵
Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυNPDL"1* Ͱಈ͍ͯΔΑ͏ʹͳ͖ͬͯ ͨɻ
Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF όοΫΤϯυఆ͍ͯ͠ ΔϦΫΤετύε͢ΔΑ ͏ʹͳͬͨɻ
ظؒ͋ͱͪΐͬͱɺ࠷ޙͷ࠷ޙʹ ݁߹ͩʂʂʂʂ
ʊਓਓਓਓਓਓʊ ʼɹવͷࢮɹʻ ʉ^Y^Y^Y^Y^ʉ
ϏοάόϯδϣΠϯτ • ઈରʹAPIͷϦΫΤετɾϨεϙϯεఆ௨ Γ͡Όͳ͍ɻ • ࣮֬ʹఆ֎ͷى͖Δɻ • ϦΫΤετͷܕ͕string, integer, Ϩεϙϯεͷ
status code͕ҧ͏ etc
ΒͲ͏ͯ͠Δ͔
+ Proxy
ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .PDL 'BLF .PDL 'BLF
ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .PDL 'BLF .PDL 'BLF ͋Δఔϑϩϯτઌߦͯ͠ɺը໘Λঃʑʹຊʹ͍ͯ͠
͘ελΠϧɻͦ͏͢Δͱاըʹಈ͖Λ͍͑͢
·ͱΊ
·ͱΊ • εύʔείϛϡχέʔγϣϯʢίϛϡχέʔγϣϯ͕ૄ͔ʹͳΔέʔεʣ • ΞʔΩςΫνϟૄʹͯ͠Α͍͕ɺίϛϡχέʔγϣϯૄʹͯ͠ ͍͚ͳ͍ • ΠϯϑϥϨεϙϯγϏϦςΟʢΠϯϑϥͷΛ࣋ͭʣ • ΠϯϑϥΛݟΔͷόοΫΤϯυ͚ͩʹ͋ΒͣɺશһͰݟΔඞཁ͕͋
Δ • ϏοάόϯδϣΠϯτʢ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒ݁߹ςετʣ • ࠷ޙͷ࠷ޙʹ݁߹ɻͰͳ͘ग़དྷ্͕Γ࣍ୈɺঃʑʹ݁߹͍ͯ͘͠
·ͱΊ • ϑϩϯτΤϯυ/όοΫΤϯυͰͳ͘ɺ • ϑϩϯτΤϯυόοΫΤϯυ • BFF Backend For
Frontend Ͱͳ͘ɺ
·ͱΊ • ϑϩϯτΤϯυ/όοΫΤϯυͰͳ͘ɺ • ϑϩϯτΤϯυόοΫΤϯυ • BFF Backend For
Frontend Ͱͳ͘ɺ • Best Friends Forever Ͱ͋Γ·͢Α͏ʹɻ
·ͱΊ • ϑϩϯτΤϯυ/όοΫΤϯυͰͳ͘ɺ • ϑϩϯτΤϯυόοΫΤϯυ • BFF Backend For
Frontend Ͱͳ͘ɺ • Best Friends Forever Ͱ͋Γ·͢Α͏ʹɻ ϦΫϧʔτςΫϊϩδʔζͰɺ#''ΛͬͯαʔϏε ΛͬͯΈ͍ͨΤϯδχΞΛ΅͠ΎʢҎԼུʣ