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
170
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.6k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
280
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.8k
Other Decks in Programming
See All in Programming
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
2
9.5k
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
490
仕様がそのままテストになる!Javaで始める振る舞い駆動開発
ohmori_yusuke
8
4.7k
Feature Flags Suck! - KubeCon Atlanta 2025
phodgson
0
170
Honoを技術選定したAI要件定義プラットフォームAcsimでの意思決定
codenote
0
270
Flutterアプリ運用の現場で役立った監視Tips 5選
ostk0069
1
520
Phronetic Team with AI - Agile Japan 2025 closing
hiranabe
2
680
Atomics APIを知る / Understanding Atomics API
ssssota
1
210
Agentに至る道 〜なぜLLMは自動でコードを書けるようになったのか〜
mackee
5
2.1k
チーム開発の “地ならし"
konifar
8
6.1k
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
east_takumi
0
230
AIの弱点、やっぱりプログラミングは人間が(も)勉強しよう / YAPC AI and Programming
kishida
13
5.4k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Making Projects Easy
brettharned
120
6.5k
How to Ace a Technical Interview
jacobian
280
24k
Site-Speed That Sticks
csswizardry
13
970
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
6.1k
Thoughts on Productivity
jonyablonski
73
4.9k
Bash Introduction
62gerente
615
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How to train your dragon (web standard)
notwaldorf
97
6.4k
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 Ͱ͋Γ·͢Α͏ʹɻ ϦΫϧʔτςΫϊϩδʔζͰɺ#''ΛͬͯαʔϏε ΛͬͯΈ͍ͨΤϯδχΞΛ΅͠ΎʢҎԼུʣ