BFFを導入しなかった理由

 BFFを導入しなかった理由

UIT#3 The “Backends for Frontends” sharing

20451aa93aace2f5279f5ea2e7a9c89d?s=128

Kento Moriwaki

June 07, 2018
Tweet

Transcript

  1. 3.

    ©2018 Wantedly, Inc. ϓϩδΣΫτ֓ཁ ձࣾϖʔδϦχϡʔΞϧ • ͍ΘΏΔWYSIWYGͰΠϯλϥΫςΟϒੑߴ͍ • ͍ͭ΋௨ΓReact࢖͍͍ͨ •

    SEOͷཁɻॳظମݧͱͯ͠εϐʔυ΋େࣄ • SSR͸ඞਢ͔ͳ • 2ਓͰ2ϲ݄ • TypeScriptಋೖͳͲɺελοΫΛಉ࣌ʹݟ௚͢͜ ͱ΋ܾ·͍ͬͯΔ • ༨༟͸ͳ͍ʂ
  2. 4.

    ©2018 Wantedly, Inc. ҰຕؠͷRailsͰɺMicroserviceԽΛਐΊ͍ͯΔ • ·ͩ·ͩMicroserviceͱ͸ݺ΂ͳ͍ • όοΫΤϯυͱϑϩϯτΤϯυͷ੹຿͸෼͚͍͖͍ͯͨ RESTful API͕͋Δ

    • ΞϓϦͰ࢖ΘΕ͍ͯΔͷͰɺࠓճͷϓϩδΣΫτͰ΋͜ΕΛ࢖͍͍ͨɻ • Rails ΞϓϦʹ RESTful API ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩ WantedlyͷΞʔΩςΫνϟ(Wantedly Visitͷ৔߹)
  3. 6.
  4. 8.

    ©2018 Wantedly, Inc. શϖʔδڞ௨ͷύʔπ: Rails + jQuery ϖʔδίϯςϯπ: React (SSR)

    as-you-typeͳݕࡧ ௨஌(όοδ΍ະಡ؅ཧ) ϝοηʔδ؅ཧ ͭͳ͕Γ؅ཧ ΞΧ΢ϯτ੾Γସ͑ ݸਓϞʔυͱձࣾϞʔυͰσβΠϯ΍ػೳ͕ҧ͏
  5. 9.

    ©2018 Wantedly, Inc. 1. ReactόʔδϣϯΛ࡞Δʁ • Rails + jQuery൛ͱ2ॏͰ؅ཧ͢Δ͜ͱʹͳΔ 2.

    શ෦React࣮૷ʹ౷Ұ͢Ε͹ʁ • ୯७ͳ΄΅੩తϖʔδʹ΋ReactೖΕͪΌ͏ʁ -> ແବʹେ͖ͳJSಡΈࠐΈ͸Α͘ͳ͍ • ·ͩAngular͕࢒ͬͯΔϖʔδͱ͔͋Δɻ -> Reactͱڞଘͱ͔ຊ౰ʹΑ͘ͳ͍ ՝୊1: ڞ௨ύʔπ໰୊
  6. 10.

    ©2018 Wantedly, Inc. Ͳ͏΍ͬͯdeploy͢Δʁ • ݱঢ়͸ɺwebpackͰbuildͯ͠ɺdeploy͸Railsʹࡌ͍ͤͯΔ • طଘͷCSR onlyͷReactͱ׬શʹ෼͚ΔʁBFFͷߋ৽ͱRailsଆͷmanifestߋ৽ΛҰॹʹߦ ͏ʁͲͪΒʹͤΑdeployϑϩʔΛݟ௚͢ඞཁ͕͋Γͦ͏

    ஈ֊తʹಋೖ͍ͨ͠ • Ұ෦اۀ͔Βͱ͔ɺւ֎͸ޙͰͱ͔ɺ༷ʑͳ৚݅Ͱ৽چͷϏϡʔΛ੾Γସ͍͑ͨ • BFFͰ΍ΔͳΒɺALB(Reverse Proxy)Ͱ΍ΔʁͦΕͱ΋BFFͰProxyతʹ΍Δʁ ՝୊2: Πϯϑϥઃܭ໰୊
  7. 12.

    ©2018 Wantedly, Inc. 1. Server side rendering • Ϣʔβʔମݧͷ޲্ͱ҆ఆͨ͠SEOͷͨΊʹඞཁͩͬͨ •

    BFF͡Όͳͯ͘΋ɺςϯϓϨʔτͷڞ௨Խ͕Ͱ͖Ε͹͍͍ 2. Aggregate data • SSRʹඞཁͳσʔλΛޮ཰తΛूΊ͍ͨ • طଘͷRESTful API͕࢖͍͔ͨͬͨͷ͸ɺίʔυͷॏෳΛආ͚͔͔ͨͬͨΒ • ࠓ͸APIαʔόʔ͸ҰͭͳͷͰɺSSR͡Όͳ͍৔߹͸௚઀RESTful APIୟ͍ͯ΋໰୊ͳ͍ ΋ͱ΋ͱBFFͰ΍Γ͔ͨͬͨ͜ͱ͸2ͭ
  8. 14.

    ©2018 Wantedly, Inc. )ZQFSOPWB #SPXTFS %# 3BJMT 3FBDUϖʔδ "1* 3BJMTϖʔδ

    ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ ૿͑ͨͷ͸͍͚ͭͩ͜
  9. 17.

    ©2018 Wantedly, Inc. SSRʹඞཁͳσʔλΛޮ཰Α͘ूΊ͍ͨ • RESTful APIΛୟ͍ͯɺෳ਺ͷσʔλΛूΊ͍ͨ • Railsͷத͔Βɺࣗ਎ͷRESTful APIʹϦΫΤετ౤͛Δʁ

    • γϯάϧεϨου/γϯάϧϓϩηεͰ͸Ͱ͖ͳ͍ɻ։ൃ͕೉͘͠ͳΔ • RESTful APIͱୟ͘ͷͱಉ͡Α͏ͳॲཧ͕಺෦ͰͰ͖Ε͹͍͍ • Ͱ͖Δ͚ͩॏෳͨ͠ίʔυΛॻ͔ͣʹ Aggregate data
  10. 18.

    ©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεͷModelΛಡΈࠐΉ • ϦΫΤετύϥϝʔλ͔ΒN+1Λղܾ͢Δ ← ಺෦ϥΠϒϥϦԽ͞Ε͍ͯΔ •

    ModelΛJSONʹม׵͢Δ ← Serializerʹ੾Γग़͞Ε͍ͯΔ • ͨ·ʹෳࡶͳॲཧ ← Serviceʹ੾Γग़͞Ε͍ͯΔ ControllerΛബ͓͍͓͔ͯͨ͛͘͠Ͱɺ΄ͱΜͲͷ ॲཧΛڞ௨ԽͰ͖Δ RESTful API͕΍͍ͬͯͨ͜ͱ
  11. 19.

    ©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεΛಡΈࠐΉ͚ͩ • render_reactͰɺHypernovaʹϦΫΤ ετ౤͛ͯɺ݁ՌΛLayoutʹ͸ΊࠐΉ͜ ͱΛ͍ͯ͠Δ •

    ͲͷϑΟʔϧυ͕ඞཁ͔ͳͲ͸ɺ show.ymlͱ͍͏ϑΝΠϧʹผͰॻ͘ • RESTful APIͱಉ͡࢓૊ΈͰࣗಈతʹN+1 Λղܾͯ͘͠ΕΔ ControllerͰ࣮ࡍʹ΍ͬͨ͜ͱ
  12. 23.

    ©2018 Wantedly, Inc. 1. ϨΠΞ΢τΛRails͔ΒҾ͖ണ͕͢ • ϔομʔ΍ϑολʔΛReact࣮૷ʹஔ͖׵͑Δ • શϖʔδΛReactड͚ೖΕՄೳʹ͢ΔɻAngular͝ΊΜͳ͍͞ɻ •

    Layout͚ͩ૊ΉBFFΛ͍ΕͯɺRailsଆ͸Layoutͳ͠Ͱฦ͢ɻ͜ͷ࣌఺Ͱ͸·ͩHypernova ࢖͓ͬͯ͘ 2. ControllerͷॲཧΛBFFʹҠ͢ • ୤Hypernova͸೉͘͠ͳ͍ BFF΁ͷಓͷΓ(૝ఆ)
  13. 24.