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
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
220
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.1k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.6k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
320
Removing Corepack
yosuke_furukawa
PRO
9
1.9k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.1k
Strip Types と Storage
yosuke_furukawa
PRO
4
490
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
LTのやり方
yosuke_furukawa
PRO
16
2.9k
Other Decks in Programming
See All in Programming
Feature Toggle は捨てやすく使おう
gennei
0
510
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
830
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
230
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
190
AIエージェントで業務改善してみた
taku271
0
500
ファインチューニングせずメインコンペを解く方法
pokutuna
0
280
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
o0h
PRO
0
200
ふりがな Deep Dive try! Swift Tokyo 2026
watura
0
170
Smarter Angular mit Transformers.js & Prompt API
christianliebel
PRO
1
120
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
6.1k
AI時代のPhpStorm最新事情 #phpcon_odawara
yusuke
0
140
「効かない!」依存性注入(DI)を活用したAPI Platformのエラーハンドリング奮闘記
mkmk884
0
320
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.3k
My Coaching Mixtape
mlcsv
0
97
Color Theory Basics | Prateek | Gurzu
gurzu
0
290
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.6k
Code Review Best Practice
trishagee
74
20k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
93
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Tell your own story through comics
letsgokoyo
1
890
Making Projects Easy
brettharned
120
6.6k
KATA
mclloyd
PRO
35
15k
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 Ͱ͋Γ·͢Α͏ʹɻ ϦΫϧʔτςΫϊϩδʔζͰɺ#''ΛͬͯαʔϏε ΛͬͯΈ͍ͨΤϯδχΞΛ΅͠ΎʢҎԼུʣ