Microservices Meetup で話した step by step BFF の話です。
Step by Step BFF2017, Mar, 30th @ Microservices Meetup in FiNC
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
Re-Engineering LegacySoftware• Chapter 5: Re-ArchitectingϞϊϦεతͳΞʔΩςΫνϟͰνʔϜͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩϯτΤϯυͱόοΫΤϯυʹ͚ΔɺΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩαʔϏεԽ͢ΔͷΛݕ౼͢Δ
Re-Engineering LegacySoftware• Chapter 5: Re-ArchitectingϞϊϦεతͳΞʔΩςΫνϟͰνʔϜͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩϯτΤϯυͱόοΫΤϯυʹ͚ΔɺΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩαʔϏεԽ͢ΔͷΛݕ౼͢ΔϑϩϯτΤϯυͱόοΫΤϯυʹ͚ΔɺϚΠΫϩαʔϏεΛҙࣝ͢Δ
BFF is …• Backend For Frontends#SPXTFS #''.JDSP4FSWJDF.JDSP4FSWJDF.JDSP4FSWJDF
BFF is …• Backend For Frontends#SPXTFS #''.JDSP4FSWJDF.JDSP4FSWJDF.JDSP4FSWJDFϑϩϯτΤϯυͱόοΫΤϯυʹ͚ΔɺϚΠΫϩαʔϏεΛҙࣝ͢Δ
BFF is …• Sam Newman introduces the architecture.
BFF use-cases (1)• API Aggregation#''6TFS.JDSP4FSWJDF"SUJDMF.JDSP4FSWJDF$PNNFOU.JDSP4FSWJDF3FRVFTUUPCMPHQBHF3FRVFTUUPTPNFЖ4FSWJDFTDPODVSSFOUMZ$PODBU&WFSZ+40/3FTQPOTF
• Session ManagementBFF use-cases (2)#''3FRVFTUXJUITFTTJPOJE(FU5PLFOGSPN4FTTJPO4FTTJPO4UPSFJE VTFSOBNF UPLFO0UIFS"1*3FRVFTUXJUIUPLFO
• (Server Side) RenderingBFF use-cases (3)#''1BHF3FRVFTU$PNQPOFOUT5FNQMBUFT'FUDI%BUB"1*3FOEFS)5.-
• File UploadBFF use-cases (4)#'''JMF$IVOLFE6QMPBE"1*4UPSF'JMF'JMF4UPSBHF 4(FU'JMF1BUI"1*3FRVFTUXJUI'JMF1BUI
• WebSocket/LongPolling/SSEBFF use-cases (5)#''8FC4PDLFU"1*4VC4DSJCF.FTTBHF2VFVF1VCMJTI
Why BFF ?#SPXTFS #''.JDSP4FSWJDF.JDSP4FSWJDF.JDSP4FSWJDF
Previous BFF pattern• since 1990 ~: 3 tier Client-Server Systemhttps://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern• since 1990 ~ 2000: Monolithic Architecturehttps://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern• since 2010: Single Page Applicationhttps://speakerdeck.com/koichik/isomorphic-survival-guide
Previous BFF pattern• since 2013-?: Single Page Application withMicroServiceshttps://speakerdeck.com/yosuke_furukawa/25
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTBackendFor Frontend#BDLFOE-PHJDT
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTBackendFor Frontend#BDLFOE-PHJDTΫϥΠΞϯτຊདྷͷ6*ͷॲཧʹྗͰ͖Δ
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTBackendFor Frontend#BDLFOE-PHJDTը໘Λߏங͢Δखॿ͚Λ͢Δ"1*ฒྻݺͼग़͠$BDIFͨ͘͞Μ࣋ͯΔ'JMF6QMPBE8FC4PDLFUFUD
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTBackendFor Frontend using Node.js#BDLFOE-PHJDT͜͜Λ/PEFKTʹ͢Δͱͬͱ৭ΜͳϝϦοτ͕
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTҰ෦ͷ'SPOUFOE-PHJDΛڞ௨ԽͰ͖Δ'SPOUFOE-PHJDTBackendFor Frontend using Node.js
ClientServermicro servicesRich Single Page Web Apps with MicroServices'SPOUFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDT#BDLFOE-PHJDTը໘ͷWBMJEBUJPO)5.-ੜFUD'SPOUFOE-PHJDTBackendFor Frontend using Node.js
Backend For Frontend• υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛܨ͙ௐఀ• ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ• APIͷ·ͱΊ• Cache͜͜ͷͰΔͱBackend Friendly• BFF Λ Node.js ʹ͢Δͱ͞Βʹ• ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ• Server Side Rendering / validation logic etc
BFF CaseStudy: Twitter
Mobile Twitter Stack#SPXTFS#'' /PEFKT&YQSFTT3FBDU.JDSP4FSWJDF4DBMB.JDSP4FSWJDF4DBMB.JDSP4FSWJDF4DBMB
BFF CaseStudy: Twitter• ࠷ॳ Monolith• ్த͔ΒScalaԽͯ͠MicroServices• ࠷ۙMobileͷϑϩϯτ͚ͩ BFF ʹ
BFF CaseStudy: Netflix
http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html
Many Devices : Many APIs
BFF CaseStudy: Netflix• ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFFʢClient Adapter CodeʣΛஔ͘• σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ• OSFA - One Size Fit All - ͳ REST API Λ࡞Βͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ
BFF CaseStudy: RecruitTech
Recruit Technologies• BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ• API Aggregation• Server Side Rendering (React)• Session Management• File Upload• WebSocket
Recruit Technologies• Example: booking table
Recruit Technologies• Example: raico#SPXTFS #''#BDLFOE"1*4FTTJPO4UPSF3FEJT/'4)5518FC4PDLFU4FTTJPO.BOBHFNFOU'JMF4UPSBHF3&45"1*4FSWFS4JEF3FOEFSJOH
BFFಋೖ͢Δͱ͖ಋೖ͠ͳ͍ͱ͖
BFFΛಋೖ͢Δ࣌• ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛۀͤ͞Δ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯεΛ্͍͛ͨ• ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEOͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ• ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
ٯʹBFFΛಋೖ͠ͳ͍࣌• ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧελοΫΤϯδχΞ͕ଟ͍ʣ• ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠϯΛΊ͍ͨ• ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍(ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍ etc)
step by step BFF
step by step BFF• طଘͷγεςϜ͕͋ΔͳΒɺҰ୴ͨͩͷProxyͱͯ͠ߏங͢Δ• ϨϯμϦϯά͢ΔϨΠϠ͚ͩ୲͢Δ• ෦ͷॲཧΛϦΞʔΩςΫςΟϯά͢ΔɺطଘͷAPIΛঃʑʹஔ͖͍͑ͯ͘
step by step BFF#SPXTFS .POPMJUI4FSWJDF
step by step BFF#SPXTFS #'' .POPMJUI4FSWJDF
step by step BFF#SPXTFS #'' .POPMJUI4FSWJDF4FSWFS4JEF3FOEFSJOH.PEFSOJ[F'SPOUFOE
step by step BFF#SPXTFS #''.POPMJUI4FSWJDF4FSWFS4JEF3FOEFSJOH.PEFSOJ[F'SPOUFOE /FX4FSWJDF4FQBSBUFOFXTFSWJDF
Thank you