step-by-step BFF

Microservices Meetup で話した step by step BFF の話です。

1. Step by Step BFF 2017, Mar, 30th @ Microservices Meetup in FiNC
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ
4. Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ
   ϚΠΫϩαʔϏεΛҙࣝ͢Δ
5. BFF is … • Backend For Frontends #SPXTFS #'' .JDSP
   4FSWJDF .JDSP
   4FSWJDF .JDSP
   4FSWJDF
6. BFF is … • Backend For Frontends #SPXTFS #'' .JDSP
   4FSWJDF .JDSP
   4FSWJDF .JDSP
   4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ
   ϚΠΫϩαʔϏεΛҙࣝ͢Δ
7. BFF is … • Sam Newman introduces the architecture.
8. BFF is … • Sam Newman introduces the architecture.
9. 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
10. • Session Management BFF use-cases (2) #'' 3FRVFTU
    XJUI
    TFTTJPO
    JE (FU
    5PLFO
    GSPN
    4FTTJPO 4FTTJPO
    4UPSF
    JE VTFSOBNF
    UPLFO 0UIFS
    "1* 3FRVFTU
    XJUI
    UPLFO
11. • (Server Side) Rendering BFF use-cases (3) #'' 1BHF
    3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI
    %BUB "1* 3FOEFS
    )5.-
12. • File Upload BFF use-cases (4) #'' 'JMF
    $IVOLFE
    6QMPBE "1* 4UPSF
    'JMF 'JMF
    4UPSBHF
    4 (FU
    'JMF1BUI "1*
    3FRVFTU
    XJUI
    'JMF1BUI
13. • WebSocket/LongPolling/SSE BFF use-cases (5) #'' 8FC4PDLFU "1* 4VC4DSJCF .FTTBHF
    2VFVF 1VCMJTI
14. Why BFF ? #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF
15. Previous BFF pattern • since 1990 ~: 3 tier Client-Server System https://speakerdeck.com/koichik/isomorphic-survival-guide
16. Previous BFF pattern • since 1990 ~ 2000: Monolithic Architecture https://speakerdeck.com/koichik/isomorphic-survival-guide
17. Previous BFF pattern • since 2010: Single Page Application https://speakerdeck.com/koichik/isomorphic-survival-guide
18. Previous BFF pattern • since 2013-?: Single Page Application with MicroServices https://speakerdeck.com/yosuke_furukawa/25
19. Client Server micro services Rich Single Page Web Apps with MicroServices 'SPOUFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT #BDLFOE
    -PHJDT
20. 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
21. 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*૚ͷ ॲཧʹ஫ྗͰ͖Δ
22. 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 ը໘Λߏங͢Δखॿ͚Λ͢Δ
    "1*ฒྻݺͼग़͠
    $BDIF΋ͨ͘͞Μ࣋ͯΔ
    'JMF6QMPBE8FC4PDLFUFUD
23. 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
    
    ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕
24. 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
25. 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
26. Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾ • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
27. BFF CaseStudy: Twitter
28. BFF CaseStudy: Twitter
29. Mobile Twitter Stack #SPXTFS #''
    /PEFKT
    
    &YQSFTT
    
    3FBDU .JDSP
    4FSWJDF
    4DBMB .JDSP
    4FSWJDF
    4DBMB .JDSP
    4FSWJDF
    4DBMB
30. BFF CaseStudy: Twitter • ࠷ॳ͸ Monolith • ్த͔ΒScalaԽͯ͠MicroServices • ࠷ۙ͸Mobileͷϑϩϯτ͚ͩ͸ BFF ʹ
31. BFF CaseStudy: Netflix
32. http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html
33. Many Devices : Many APIs
34. Many Devices : Many APIs
35. BFF CaseStudy: Netflix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ • OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ
36. BFF CaseStudy: RecruitTech
37. Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation • Server Side Rendering (React) • Session Management • File Upload • WebSocket
38. Recruit Technologies • Example: booking table
39. Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE
    "1* 4FTTJPO
    4UPSF
    3FEJT /'4 )5518FC4PDLFU 4FTTJPO
    .BOBHFNFOU 'JMF
    4UPSBHF 3&45
    "1* 4FSWFS
    4JEF
    3FOEFSJOH
40. BFFಋೖ͢Δͱ͖ ಋೖ͠ͳ͍ͱ͖
41. BFFΛಋೖ͢Δ࣌ • ϑϩϯτΤϯυͱόοΫΤϯυͰ։ൃऀΛ෼ۀͤ͞Δ ͜ͱͰૄ݁߹ʹͯ͠ࠓޙͷΤϯϋϯε଎౓Λ্͍͛ͨ • ઌఔ͋͛ͨϢʔεέʔεͷΑ͏ͳॲཧ͕ඞཁʢྫɿ SEO ͷͨΊʹαʔόαΠυϨϯμϦϯά͕ඞཁɺϦΞϧλ ΠϜΞϓϦͳͷͰWebSocket͕ඞཁ etcʣ • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
42. ٯʹBFFΛಋೖ͠ͳ͍࣌ • ϑϩϯτͱόοΫ྆ํΛ։ൃͰ͖Δਓ͕ଟ͍ʢϑϧ ελοΫΤϯδχΞ͕ଟ͍ʣ • ϞϊϦγοΫʹαʔϏε։ൃ্ͨ͠ͰϚʔέοτΠ ϯΛ଎Ί͍ͨ • ্ड़ͨ͠Ϣʔεέʔε͕ٻΊΒΕΔ͜ͱ͕গͳ͍ (ྫɿSEOཁΒͳ͍ɺϦΞϧλΠϜͳॲཧ͕ͳ͍ etc)
43. step by step BFF
44. step by step BFF • طଘͷγεςϜ͕͋ΔͳΒɺҰ୴ͨͩͷProxy ͱͯ͠ߏங͢Δ • ϨϯμϦϯά͢ΔϨΠϠ͚ͩ୲౰͢Δ • ಺෦ͷॲཧΛϦΞʔΩςΫςΟϯά͢Δɺط ଘͷAPIΛঃʑʹஔ͖׵͍͑ͯ͘
45. step by step BFF #SPXTFS .POPMJUI
    4FSWJDF
46. step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF
47. step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF 4FSWFS
    4JEF
    3FOEFSJOH .PEFSOJ[F
    'SPOUFOE
48. step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF 4FSWFS
    4JEF
    3FOEFSJOH .PEFSOJ[F
    'SPOUFOE /FX
    4FSWJDF 4FQBSBUF
    OFX
    TFSWJDF
49. Thank you