Backends For Frontends (AWS Dev Day)

Backends For Frontends (AWS Dev Day)

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

November 02, 2018
Tweet

Transcript

  1. BFF introduction 2018/11/2 @ AWS Dev Day

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. None
  4.  /PEFֶԂࡇ։࠵͠·͢ʂʂʂ

  5. !*5Ͱ#''ͷهࣄΛॻ͖·ͨ͠ʂʂʂʂ

  6. BFFͱ͸

  7. Backends For Frontends

  8. Backends For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό

  9. Backends For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ

    • ϑϩϯτΤϯυͷͨΊͷόοΫΤϯυαʔό
  10. Backends For Frontends • Sam Newman ΞʔΩςΫνϟύλʔϯΛఏএ

  11. Backends For Frontends • ֤छΫϥΠΞϯτ͝ͱʹઐ༻ͷΞμϓλʔΛ ༻ҙ͢Δ

  12. BFF͕΍Δ͜ͱ͍͔ͭ͘঺հ

  13. BFF use-cases (1) • API Aggregation #'' 6TFS .JDSP4FSWJDF "SUJDMF

    .JDSP4FSWJDF $PNNFOU .JDSP4FSWJDF 3FRVFTUUPCMPH QBHF 3FRVFTUUPTPNFЖ4FSWJDFT DPODVSSFOUMZ $PODBU&WFSZ+40/ 3FTQPOTF
  14. • Session Management BFF use-cases (2) #'' 3FRVFTUXJUI TFTTJPOJE (FU5PLFOGSPN

    4FTTJPO 4FTTJPO4UPSF JE VTFSOBNF UPLFO 0UIFS"1* 3FRVFTUXJUIUPLFO
  15. • (Server Side) Rendering BFF use-cases (3) #'' 1BHF3FRVFTU $PNQPOFOUT

    5FNQMBUFT 'FUDI%BUB "1* 3FOEFS)5.-
  16. • File Upload BFF use-cases (4) #'' 'JMF$IVOLFE 6QMPBE "1*

    4UPSF'JMF 'JMF4UPSBHF 4 (FU'JMF1BUI "1*3FRVFTUXJUI 'JMF1BUI
  17. • WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF2VFVF

    1VCMJTI
  18. BFF CaseStudy: Twitter

  19. BFF CaseStudy: Twitter

  20. Mobile Twitter Stack #SPXTFS #'' /PEFKT &YQSFTT3FBDU .JDSP4FSWJDF 4DBMB .JDSP4FSWJDF

    4DBMB .JDSP4FSWJDF 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* 4FTTJPO4UPSF 3FEJT

    /'4 )5518FC4PDLFU 4FTTJPO .BOBHFNFOU 'JMF4UPSBHF 3&45"1* 4FSWFS4JEF 3FOEFSJOH
  31. BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖

  32. BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛ෼ۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯε଎౓Λ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ

    • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
  33. ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛ଎Ί͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍

    etc)
  34. BFFΞϯνύλʔϯ

  35. None
  36. ௒༁όοΫΤϯυͱϑϩϯτΤϯυΛ෼͚Δࣄͦͷ΋ ͷ͕Ξϯνύλʔϯ

  37. BFFΛ2೥࣮ؒફͯ͠ ࣮ࡍʹؕͬͨ
 ΞϯνύλʔϯΛ঺հ

  38. BFF ͸ϑϩϯτΤϯυͱόο ΫΤϯυͷՍ͚ڮͰ͋Γɺ ૊৫ͷ઀߹఺

  39. BFFΞϯνύλʔϯ ͦͷ1 εύʔείϛϡχέʔγϣϯ

  40. BFF͸ΞʔΩςΫνϟಉ͕࢜ ૄʹͳΔ͕ɺ ίϛϡχέʔγϣϯ·Ͱૄ(sparse) ʹͳͬͯ͠·͏έʔε

  41. None
  42. ྫ1: ςʔϒϧؙݟ͑ API JE OBNF BHF    

  43. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP  MBTU@OBNFCBS  SPMFIPHF

     SPMFGVHB ^
  44. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF \ pSTU@OBNFGPP  MBTU@OBNFCBS  SPMFIPHF

     SPMFGVHB ^ %#ͷεΩʔϚ͕ಁ͚ͯݟ͑Δʂʂʂʂ
  45. SELECTจ͕ಁ͚ͯݟ͑Δɻ ୯७ͳέʔεͳΒͦΕͰ΋ྑ͍͕ɺ snake => camelͷม׵΍JOIN͠ ͨεΩʔϚ͕ͦͷ··ݟ͑ͯΔͷ͸ NGɻɻɻ

  46. ྫ2: N+1 Query API

  47. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF (&5VTFST RGPP JEͷϦετ͚ͩฦΔ \ JE< 

      > ^
  48. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JE͔ΒৄࡉΛऔΔʢ˞/ ճ"1*Λ࣮ߦ͍ͯ͠Δɻʣ (&5VTFST (&5VTFST (&5VTFST (&5VTFST

    (&5VTFST
  49. #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF JET<    > /ճΫΤϦʔ౤͛ͯΔɻɻɻɻ

    VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFCBS ^ VTFS\ JE OBNFGPP ^
  50. ϚΠΫϩαʔϏε͔ͩΒͱ͍ͬͯ APIΛ؆ૉʹ͍͍ͯ͠༁͡Όͳ͍ɻ ݁Ռ:1ϖʔδදࣔ͢Δͷʹ3secͱ ͔͔͔Δ

  51. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱཉ͠ ͍ʢαϘΒͳ͍Ͱ͘Εʣ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ͪΌ ΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ཉ͍͠ ʢΩϟϝϧ͕ཉ͍͠ͱ͔͜͜͸arrayͰ΄͍͠ͱ͔

    ͸ͪ͜ΒଆͰͪΌΜͱݴ͏΂͖ʣ
  52. શ෦ίϛϡχέʔγϣϯΛͪΌ Μͱऔͬͯͳ͍͔Βى͖Δ • όοΫΤϯυ͸BFF͔ͩΒͱݴͬͯϏδωεϩ δοΫ͸αʔόαΠυʹ͋ΔͷΛ๨Εͳ͍Ͱ ཉ͍͠ • ϑϩϯτΤϯυ͸Ͳ͏͍͏API͕΄͍͠ͷ͔ ͪΌΜͱόοΫΤϯυʹཁٻ͢ΔΑ͏ʹͯ͠ ཉ͍͠

    ΞʔΩςΫνϟ͸ૄͰ΋ؔ܎͸ର౳Ͱ͋Γɺ ίϛϡχέʔγϣϯ͸ີͰͳ͚Ε͹ͳΒͳ͍
  53. ๻Β͸Ͳ͏ͯ͠Δ͔

  54. ๻Β͸Ͳ͏ͯ͠Δ͔

  55. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ

  56. None
  57. ϑϩϯτΤϯυͱόοΫΤϯ υͷର࿩͢ΔͨΊͷϞοΫαʔ όΛ࡞Γɺ౎౓ೝࣝᴥᴪΛੜ ·ͳ͍Α͏ʹ͍ͯ͘͠ɻ

  58. DEMO

  59. ͞Βʹ࠷ۙͰ͸ Mock Λॻ͍ ͨΒ Swagger Λੜ੒͢Δࣄ ͰAPI docs΋ࣗಈੜ੒͢Δ࢓ ૊ΈΛ։ൃத

  60. None
  61. DEMO

  62. BFFΞϯνύλʔϯ ͦͷ2 ΠϯϑϥϨεϙϯγϏϦςΟ

  63. BFF͸ϑϩϯτΤϯυͷͨΊͷαʔ όͳͷʹɺΠϯϑϥɾӡ༻͸όοΫ Τϯυʹԡ͠෇͚ͯ͠·͏έʔε

  64. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ͦ΋ͦ΋͜ͷαʔό͸୭͕ ݟΔͷʁϑϩϯτʁόοΫ Τϯυʁ

  65. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ৽͍͠΋ͷΛ࡞Δͷʹӡ༻ ͸όοΫΤϯυ೚ͤʁ

  66. A. શһ

  67. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔

    Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍
  68. Πϯϑϥɾӡ༻ • ӡ༻ͳΜͯͲ͔͚͕ͬͪͩ͢ΔΑ͏ͳ΋Μ͡Όͳ ͍ • ϑϩϯτ͸։ൃ͢ΔͳΒαʔϏεͷো֐ʹ͸හײ ʹͳΔ΂͖ͩ͠ɺམͪͨΓͨ͠ΒݟΕΔΑ͏ʹͳ Δ΂͖ • όοΫΤϯυ͸ϑϩϯτͷίʔυ͕Θ͔Βͳ͍͔

    Βͱݴͬͯܟԕͪ͠Ό͍͚ͳ͍ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚͔ͨΒͱݴͬͯαʔ Ϗε͸ҰͭɻαʔϏεͷ඼࣭Λ্͛Δͷ͸શһ໺ٿ
  69. BFFΞϯνύλʔϯ ͦͷ3 ϏοάόϯδϣΠϯτ

  70. ࠷ޙͷ࠷ޙʹͳ͔ͬͯΒόοΫΤϯ υͱϑϩϯτΤϯυΛ݁߹͢Δͱ େମࢮ͵

  71. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυ͸NPDL"1* Ͱಈ͍ͯΔΑ͏ʹͳ͖ͬͯ ͨɻ

  72. Πϯϑϥɾӡ༻ #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF όοΫΤϯυ΋૝ఆ͍ͯ͠ ΔϦΫΤετ͸ύε͢ΔΑ ͏ʹͳͬͨɻ

  73. ظؒ΋͋ͱͪΐͬͱɺ࠷ޙͷ࠷ޙʹ ݁߹ͩʂʂʂʂ

  74. ʊਓਓਓਓਓਓʊ ʼɹ౰વͷࢮɹʻ ʉ^Y^Y^Y^Y^ʉ

  75. ϏοάόϯδϣΠϯτ • ઈରʹAPIͷϦΫΤετɾϨεϙϯε͸૝ఆ௨ Γ͡Όͳ͍ɻ • ࣮֬ʹ૝ఆ֎ͷ໰୊͸ى͖Δɻ • ϦΫΤετͷܕ͕string, integer, Ϩεϙϯεͷ

    status code͕ҧ͏ etc
  76. ๻Β͸Ͳ͏ͯ͠Δ͔

  77. + Proxy

  78. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .PDL 'BLF .PDL 'BLF

  79. ग़དྷ͍ͯΔͱ͜Ζ͔Βঃʑʹ ຊ෺ʹ͍ͯ͘͠ #SPXTFS #'' 3FBM.JDSP4FSWJDF .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Ͱ΋͋Γ·͢Α͏ʹɻ