step-by-step BFF

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

Transcript

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

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. BFF is …
   • Sam Newman introduces the architecture.
   

   View Slide

8. BFF is …
   • Sam Newman introduces the architecture.
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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*૚ͷ
    ॲཧʹ஫ྗͰ͖Δ
    

    View Slide

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
    

    View Slide

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
    ʹ͢Δͱ΋ͬͱ৭ΜͳϝϦοτ͕
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

27. BFF CaseStudy: Twitter
    

    View Slide

28. BFF CaseStudy: Twitter
    

    View Slide

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

    View Slide

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

    View Slide

31. BFF CaseStudy: Netflix
    

    View Slide

32. http://techblog.netflix.com/2012/07/embracing-differences-inside-netflix.html
    

    View Slide

33. Many Devices : Many APIs
    

    View Slide

34. Many Devices : Many APIs
    

    View Slide

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

    View Slide

36. BFF CaseStudy: RecruitTech
    

    View Slide

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

    View Slide

38. Recruit Technologies
    • Example: booking table
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. step by step BFF
    

    View Slide

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

    View Slide

45. step by step BFF
    #SPXTFS .POPMJUI4FSWJDF
    

    View Slide

46. step by step BFF
    #SPXTFS #'' .POPMJUI4FSWJDF
    

    View Slide

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

    View Slide

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

    View Slide

49. Thank you
    

    View Slide