Backends For Frontends (AWS Dev Day)

AWS Dev Day で発表した Backends For Frontends の話です。

1. BFF introduction 2018/11/2 @ AWS Dev Day
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
4. 
   
   /PEFֶԂࡇ։࠵͠·͢ʂʂʂ
5. !*5
   Ͱ
   #''
   ͷهࣄΛॻ͖·ͨ͠ʂʂʂʂ
6. BFFͱ͸
7. Backends For Frontends
8. Backends For Frontends #SPXTFS #'' .JDSP
   4FSWJDF .JDSP
   4FSWJDF .JDSP
   4FSWJDF • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό
9. Backends For Frontends #SPXTFS #'' .JDSP
   4FSWJDF .JDSP
   4FSWJDF .JDSP
   4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ
   ϚΠΫϩαʔϏεΛҙࣝ͢Δ • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό
10. Backends For Frontends • Sam Newman ΞʔΩςΫνϟύλʔϯΛఏএ
11. Backends For Frontends • ֤छΫϥΠΞϯτ͝ͱʹઐ༻ͷΞμϓλʔΛ ༻ҙ͢Δ
12. BFF͕΍Δ͜ͱ͍͔ͭ͘঺հ
13. BFF use-cases (1) • API Aggregation #'' 6TFS
    .JDSP
    4FSWJDF "SUJDMF
    .JDSP
    4FSWJDF $PNNFOU
    .JDSP
    4FSWJDF 3FRVFTU
    UP
    CMPH
    QBHF 3FRVFTU
    UP
    TPNF
    Ж4FSWJDFT
    DPODVSSFOUMZ $PODBU
    &WFSZ
    +40/
    3FTQPOTF
14. • Session Management BFF use-cases (2) #'' 3FRVFTU
    XJUI
    TFTTJPO
    JE (FU
    5PLFO
    GSPN
    4FTTJPO 4FTTJPO
    4UPSF
    JE VTFSOBNF
    UPLFO 0UIFS
    "1* 3FRVFTU
    XJUI
    UPLFO
15. • (Server Side) Rendering BFF use-cases (3) #'' 1BHF
    3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
    %BUB "1* 3FOEFS
    )5.-
16. • File Upload BFF use-cases (4) #'' 'JMF
    $IVOLFE
    6QMPBE "1* 4UPSF
    'JMF 'JMF
    4UPSBHF
    4 (FU
    'JMF1BUI "1*
    3FRVFTU
    XJUI
    'JMF1BUI
17. • WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF
    2VFVF 1VCMJTI
18. BFF CaseStudy: Twitter
19. BFF CaseStudy: Twitter
20. Mobile Twitter Stack #SPXTFS #''
    /PEFKT
    
    &YQSFTT
    
    3FBDU .JDSP
    4FSWJDF
    4DBMB .JDSP
    4FSWJDF
    4DBMB .JDSP
    4FSWJDF
    4DBMB
21. BFF CaseStudy: Twitter • ࠷ॳ͸ Monolith • ్த͔ΒScalaԽͯ͠MicroServices • ࠷ۙ͸Mobileͷϑϩϯτ͚ͩ͸ BFF ʹ
22. BFF CaseStudy: Netflix
23. http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html
24. Many Devices : Many APIs
25. Many Devices : Many APIs
26. BFF CaseStudy: Netflix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ • OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ
27. BFF CaseStudy: RecruitTech
28. Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation • Server Side Rendering (React) • Session Management • File Upload • WebSocket
29. Recruit Technologies • Example: booking table
30. Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE
    "1* 4FTTJPO
    4UPSF
    3FEJT /'4 )5518FC4PDLFU 4FTTJPO
    .BOBHFNFOU 'JMF
    4UPSBHF 3&45
    "1* 4FSWFS
    4JEF
    3FOEFSJOH
31. BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖
32. BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛ෼ۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯε଎౓Λ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
33. ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛ଎Ί͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍ etc)
34. BFFΞϯνύλʔϯ
36. ௒༁
    όοΫΤϯυͱϑϩϯτΤϯυΛ෼͚Δࣄͦͷ΋ ͷ͕Ξϯνύλʔϯ
37. BFFΛ2೥࣮ؒફͯ͠ ࣮ࡍʹؕͬͨ
 ΞϯνύλʔϯΛ঺հ
38. BFF ͸ϑϩϯτΤϯυͱόο ΫΤϯυͷՍ͚ڮͰ͋Γɺ ૊৫ͷ઀߹఺
39. BFFΞϯνύλʔϯ ͦͷ1 εύʔείϛϡχέʔγϣϯ
40. BFF͸ΞʔΩςΫνϟಉ͕࢜ ૄʹͳΔ͕ɺ ίϛϡχέʔγϣϯ·Ͱૄ(sparse) ʹͳͬͯ͠·͏έʔε
42. ྫ1: ςʔϒϧؙݟ͑ API JE OBNF BHF    
43. #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF \
    
    
    pSTU@OBNF
    GPP
    
    
    MBTU@OBNF
    CBS
    
    
    SPMF
    IPHF
    
    
    SPMF
    GVHB
    ^
44. #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF \
    
    
    pSTU@OBNF
    GPP
    
    
    MBTU@OBNF
    CBS
    
    
    SPMF
    IPHF
    
    
    SPMF
    GVHB
    ^ %#ͷεΩʔϚ͕ಁ͚ͯݟ͑Δʂʂʂʂ
45. SELECTจ͕ಁ͚ͯݟ͑Δɻ ୯७ͳέʔεͳΒͦΕͰ΋ྑ͍͕ɺ snake => camelͷม׵΍JOIN͠ ͨεΩʔϚ͕ͦͷ··ݟ͑ͯΔͷ͸ NGɻɻɻ
46. ྫ2: N+1 Query API
47. #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF (&5
    VTFST RGPP
    
    JE
    ͷϦετ͚ͩฦΔ
    \
    
    
    JE
    <
    
    
    
    >
    ^
48. #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF 
    JE
    ͔ΒৄࡉΛऔΔʢ˞/ ճ"1*Λ࣮ߦ͍ͯ͠Δɻʣ
    (&5
    VTFST
    (&5
    VTFST
    (&5
    VTFST
    (&5
    VTFST
    (&5
    VTFST
49. #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF JET
    <
    
    
    
    > /ճΫΤϦʔ౤͛ͯΔɻɻɻɻ VTFS
    \
    
    
    JE
    
    OBNF
    CBS
    ^ VTFS
    \
    
    
    JE
    
    OBNF
    CBS
    ^ VTFS
    \
    
    
    JE
    
    OBNF
    CBS
    ^ VTFS
    \
    
    
    JE
    
    OBNF
    CBS
    ^ VTFS
    \
    
    
    JE
    
    OBNF
    CBS
    ^ VTFS
    \
    
    
    JE
    
    OBNF
    GPP
    ^
50. ϚΠΫϩαʔϏε͔ͩΒͱ͍ͬͯ APIΛ؆ૉʹ͍͍ͯ͠༁͡Όͳ͍ɻ ݁Ռ:1ϖʔδදࣔ͢Δͷʹ3secͱ ͔͔͔Δ
51. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱཉ͠ ͍ʢαϘΒͳ͍Ͱ͘Εʣ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ͪΌ ΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ཉ͍͠ ʢΩϟϝϧ͕ཉ͍͠ͱ͔͜͜͸arrayͰ΄͍͠ͱ͔ ͸ͪ͜ΒଆͰͪΌΜͱݴ͏΂͖ʣ
52. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱ ཉ͍͠ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ ͪΌΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ ཉ͍͠ ΞʔΩςΫνϟ͸ૄͰ΋ؔ܎͸ର౳Ͱ͋Γɺ ίϛϡχέʔγϣϯ͸ີͰͳ͚Ε͹ͳΒͳ͍
53. ๻Β͸Ͳ͏ͯ͠Δ͔
54. ๻Β͸Ͳ͏ͯ͠Δ͔
55. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ
57. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ
58. DEMO
59. ͞Βʹ࠷ۙͰ͸ Mock Λॻ͍ ͨΒ Swagger Λੜ੒͢Δࣄ ͰAPI docs΋ࣗಈੜ੒͢Δ࢓ ૊ΈΛ։ൃத
61. DEMO
62. BFFΞϯνύλʔϯ ͦͷ2 ΠϯϑϥϨεϙϯγϏϦςΟ
63. BFF͸ϑϩϯτΤϯυͷͨΊͷαʔ όͳͷʹɺΠϯϑϥɾӡ༻͸όοΫ Τϯυʹԡ͠෇͚ͯ͠·͏έʔε
64. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF ͦ΋ͦ΋͜ͷαʔό͸୭͕ ݟΔͷʁϑϩϯτʁόοΫ Τϯυʁ
65. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF ৽͍͠΋ͷΛ࡞Δͷʹӡ༻ ͸όοΫΤϯυ೚ͤʁ
66. A. શһ
67. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔ Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍
68. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔ Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚͔ͨΒͱݴͬͯαʔ Ϗε͸ҰͭɻαʔϏεͷ඼࣭Λ্͛Δͷ͸શһ໺ٿ
69. BFFΞϯνύλʔϯ ͦͷ3 ϏοάόϯδϣΠϯτ
70. ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒόοΫΤϯ υͱϑϩϯτΤϯυΛ݁߹͢Δͱ େମࢮ͵
71. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF ϑϩϯτΤϯυ͸NPDL
    "1* Ͱಈ͍ͯΔΑ͏ʹͳ͖ͬͯ ͨɻ
72. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF όοΫΤϯυ΋૝ఆ͍ͯ͠ ΔϦΫΤετ͸ύε͢ΔΑ ͏ʹͳͬͨɻ
73. ظؒ΋͋ͱͪΐͬͱɺ࠷ޙͷ࠷ޙʹ ݁߹ͩʂʂʂʂ
74. ʊਓਓਓਓਓਓʊ ʼɹ౰વͷࢮɹʻ ʉ^Y^Y^Y^Y^ʉ
75. ϏοάόϯδϣΠϯτ • ઈରʹAPIͷϦΫΤετɾϨεϙϯε͸૝ఆ௨ Γ͡Όͳ͍ɻ • ࣮֬ʹ૝ఆ֎ͷ໰୊͸ى͖Δɻ • ϦΫΤετͷܕ͕string, integer, Ϩεϙϯεͷ status code͕ҧ͏ etc
76. ๻Β͸Ͳ͏ͯ͠Δ͔
77. + Proxy
78. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM
    .JDSP
    4FSWJDF .PDL
    'BLF .PDL
    'BLF
79. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM
    .JDSP
    4FSWJDF .PDL
    'BLF .PDL
    'BLF ͋Δఔ౓ϑϩϯτઌߦͯ͠ɺը໘Λঃʑʹຊ෺ʹ͍ͯ͠ ͘ελΠϧɻͦ͏͢Δͱاըʹ΋ಈ͖Λ఻͑΍͍͢
80. ·ͱΊ
81. ·ͱΊ • BFFͱ͸ • Backends For Frontends • ϑϩϯτΤϯυͷͨΊͷαʔό • ར༻ྫ: API ू໿, Server Side Rendering, WebSocket, File Upload, Session Management
82. ·ͱΊ • BFF ʹ͸Ξϯνύλʔϯ΋͋Δ • εύʔείϛϡχέʔγϣϯʢίϛϡχέʔγϣϯ͕ૄ͔ʹͳΔέʔεʣ • ΞʔΩςΫνϟ͸ૄʹͯ͠΋Α͍͕ɺίϛϡχέʔγϣϯ͸ૄʹͯ͠͸ ͍͚ͳ͍ • ΠϯϑϥϨεϙϯγϏϦςΟʢΠϯϑϥͷ੹຿Λ࣋ͭʣ • ΠϯϑϥΛݟΔͷ͸όοΫΤϯυ͚ͩʹ͋ΒͣɺશһͰݟΔඞཁ͕͋Δ • ϏοάόϯδϣΠϯτʢ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒ݁߹ςετʣ • ࠷ޙͷ࠷ޙʹ݁߹ɻͰ͸ͳ͘ग़དྷ্͕Γ࣍ୈɺঃʑʹ݁߹͍ͯ͘͠
83. ·ͱΊ • DevOps͕Dev/Ops͡Όͳͯ͘DevὑOpsͷΑ ͏ʹ • ϑϩϯτΤϯυ/όοΫΤϯυͰ͸ͳ͘ɺ • ϑϩϯτΤϯυὑόοΫΤϯυ • BFF ͸ Backend For Frontend Ͱ͸ͳ͘ɺ
84. ·ͱΊ • DevOps͕Dev/Ops͡Όͳͯ͘DevὑOpsͷΑ ͏ʹ • ϑϩϯτΤϯυ/όοΫΤϯυͰ͸ͳ͘ɺ • ϑϩϯτΤϯυὑόοΫΤϯυ • BFF ͸ Backend For Frontend Ͱ͸ͳ͘ɺ #FTU
    'SJFOE
    'PSFWFS
    Ͱ΋͋Γ·͢Α͏ʹɻ