step-by-step BFF

Transcript

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