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
Yosuke Furukawa
PRO
June 07, 2018
Programming
7
15k
BFF Antipattern
2018/06/07 に発表した BFF アンチパターンの話です。
Yosuke Furukawa
PRO
June 07, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
200
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
2.3k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
290
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
300
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
140
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
610
クラシルを支える技術と組織
rakutek
0
190
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
790
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
270
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
CSC305 Lecture 02
javiergs
PRO
1
260
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Side Projects
sachag
455
43k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Become a Pro
speakerdeck
PRO
29
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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 Ͱ͋Γ·͢Α͏ʹɻ ϦΫϧʔτςΫϊϩδʔζͰɺ#''ΛͬͯαʔϏε ΛͬͯΈ͍ͨΤϯδχΞΛ΅͠ΎʢҎԼུʣ