step-by-step BFF - Speaker Deck

step-by-step BFF

by Yosuke Furukawa

Slide 1

Slide 1 text

Step by Step BFF 2017, Mar, 30th @ Microservices Meetup in FiNC

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ

Slide 4

Slide 4 text

Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ

Slide 5

Slide 5 text

BFF is … • Backend For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF

Slide 6

Slide 6 text

BFF is … • Backend For Frontends #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ϚΠΫϩαʔϏεΛҙࣝ͢Δ

Slide 7

Slide 7 text

BFF is … • Sam Newman introduces the architecture.

Slide 8

Slide 8 text

BFF is … • Sam Newman introduces the architecture.

Slide 9

Slide 9 text

BFF use-cases (1) • API Aggregation #'' 6TFS .JDSP4FSWJDF "SUJDMF .JDSP4FSWJDF $PNNFOU .JDSP4FSWJDF 3FRVFTUUPCMPH QBHF 3FRVFTUUPTPNFЖ4FSWJDFT DPODVSSFOUMZ $PODBU&WFSZ+40/ 3FTQPOTF

Slide 10

Slide 10 text

• Session Management BFF use-cases (2) #'' 3FRVFTUXJUI TFTTJPOJE (FU5PLFOGSPN 4FTTJPO 4FTTJPO4UPSF JE VTFSOBNF UPLFO 0UIFS"1* 3FRVFTUXJUIUPLFO

Slide 11

Slide 11 text

• (Server Side) Rendering BFF use-cases (3) #'' 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB "1* 3FOEFS)5.-

Slide 12

Slide 12 text

• File Upload BFF use-cases (4) #'' 'JMF$IVOLFE 6QMPBE "1* 4UPSF'JMF 'JMF4UPSBHF 4 (FU'JMF1BUI "1*3FRVFTUXJUI 'JMF1BUI

Slide 13

Slide 13 text

• WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF2VFVF 1VCMJTI

Slide 14

Slide 14 text

Why BFF ? #SPXTFS #'' .JDSP4FSWJDF .JDSP4FSWJDF .JDSP4FSWJDF

Slide 15

Slide 15 text

Previous BFF pattern • since 1990 ~: 3 tier Client-Server System https://speakerdeck.com/koichik/isomorphic-survival-guide

Slide 16

Slide 16 text

Previous BFF pattern • since 1990 ~ 2000: Monolithic Architecture https://speakerdeck.com/koichik/isomorphic-survival-guide

Slide 17

Slide 17 text

Previous BFF pattern • since 2010: Single Page Application https://speakerdeck.com/koichik/isomorphic-survival-guide

Slide 18

Slide 18 text

Previous BFF pattern • since 2013-?: Single Page Application with MicroServices https://speakerdeck.com/yosuke_furukawa/25

Slide 19

Slide 19 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT

Slide 20

Slide 20 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT

Slide 21

Slide 21 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend #BDLFOE -PHJDT ΫϥΠΞϯτ͸ຊདྷͷ6*૚ͷ ॲཧʹ஫ྗͰ͖Δ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Backend For Frontend using Node.js #BDLFOE -PHJDT ͜͜Λ/PEFKT ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕

Slide 24

Slide 24 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT Ұ෦ͷ'SPOUFOE-PHJDΛڞ ௨ԽͰ͖Δ 'SPOUFOE -PHJDT Backend For Frontend using Node.js

Slide 25

Slide 25 text

Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT #BDLFOE -PHJDT ը໘ͷWBMJEBUJPO )5.-ੜ੒FUD 'SPOUFOE -PHJDT Backend For Frontend using Node.js

Slide 26

Slide 26 text

Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾ • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc

Slide 27

Slide 27 text

BFF CaseStudy: Twitter

Slide 28

Slide 28 text

BFF CaseStudy: Twitter

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

BFF CaseStudy: Twitter • ࠷ॳ͸ Monolith • ్த͔ΒScalaԽͯ͠MicroServices • ࠷ۙ͸Mobileͷϑϩϯτ͚ͩ͸ BFF ʹ

Slide 31

Slide 31 text

BFF CaseStudy: Netﬂix

Slide 32

Slide 32 text

http://techblog.netﬂix.com/2012/07/embracing-differences-inside-netﬂix.html

Slide 33

Slide 33 text

Many Devices : Many APIs

Slide 34

Slide 34 text

Many Devices : Many APIs

Slide 35

Slide 35 text

BFF CaseStudy: Netﬂix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ • OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ

Slide 36

Slide 36 text

BFF CaseStudy: RecruitTech

Slide 37

Slide 37 text

Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation • Server Side Rendering (React) • Session Management • File Upload • WebSocket

Slide 38

Slide 38 text

Recruit Technologies • Example: booking table

Slide 39

Slide 39 text

Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE"1* 4FTTJPO4UPSF 3FEJT /'4 )5518FC4PDLFU 4FTTJPO .BOBHFNFOU 'JMF4UPSBHF 3&45"1* 4FSWFS4JEF 3FOEFSJOH

Slide 40

Slide 40 text

BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖

Slide 41

Slide 41 text

BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛ෼ۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯε଎౓Λ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠

Slide 42

Slide 42 text

ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛ଎Ί͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍ etc)

Slide 43

Slide 43 text

step by step BFF

Slide 44

Slide 44 text

step by step BFF • طଘͷγεςϜ͕͋ΔͳΒɺҰ୴ͨͩͷProxy ͱͯ͠ߏங͢Δ • ϨϯμϦϯά͢ΔϨΠϠ͚ͩ୲౰͢Δ • ಺෦ͷॲཧΛϦΞʔΩςΫςΟϯά͢Δɺط ଘͷAPIΛঃʑʹஔ͖׵͍͑ͯ͘

Slide 45

Slide 45 text

step by step BFF #SPXTFS .POPMJUI4FSWJDF

Slide 46

Slide 46 text

step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF

Slide 47

Slide 47 text

step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF 4FSWFS4JEF 3FOEFSJOH .PEFSOJ[F'SPOUFOE

Slide 48

Slide 48 text

step by step BFF #SPXTFS #'' .POPMJUI4FSWJDF 4FSWFS4JEF 3FOEFSJOH .PEFSOJ[F'SPOUFOE /FX4FSWJDF 4FQBSBUFOFX TFSWJDF

Slide 49

Slide 49 text

Thank you