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
160
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.5k
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.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
440
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Webサーバーサイド言語としてのRustについて
kouyuume
1
5k
ネストしたdata classの面倒な更新にさようなら!Lensを作って理解するArrowのOpticsの世界
shiita0903
1
140
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Software Architecture
hschwentner
6
2.4k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
350
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
220
Ktorで簡単AIアプリケーション
tsukakei
0
120
CSC509 Lecture 07
javiergs
PRO
0
250
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
120
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
790
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
How to Ace a Technical Interview
jacobian
280
24k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
The Invisible Side of Design
smashingmag
302
51k
Making Projects Easy
brettharned
120
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Producing Creativity
orderedlist
PRO
348
40k
Automating Front-end Workflow
addyosmani
1371
200k
Six Lessons from altMBA
skipperchong
29
4k
Context Engineering - Making Every Token Count
addyosmani
8
310
Faster Mobile Websites
deanohume
310
31k
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 Ͱ͋Γ·͢Α͏ʹɻ ϦΫϧʔτςΫϊϩδʔζͰɺ#''ΛͬͯαʔϏε ΛͬͯΈ͍ͨΤϯδχΞΛ΅͠ΎʢҎԼུʣ