Upgrade to Pro — share decks privately, control downloads, hide ads and more …

step-by-step BFF

step-by-step BFF

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

Yosuke Furukawa

March 30, 2017
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    (FU'JMF1BUI
    "1*3FRVFTUXJUI
    'JMF1BUI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  27. BFF CaseStudy: Twitter

    View full-size slide

  28. BFF CaseStudy: Twitter

    View full-size slide

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

    .JDSP4FSWJDF
    4DBMB

    .JDSP4FSWJDF
    4DBMB

    .JDSP4FSWJDF
    4DBMB

    View full-size slide

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

    View full-size slide

  31. BFF CaseStudy: Netflix

    View full-size slide

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

    View full-size slide

  33. Many Devices : Many APIs

    View full-size slide

  34. Many Devices : Many APIs

    View full-size slide

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

    View full-size slide

  36. BFF CaseStudy: RecruitTech

    View full-size slide

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

    View full-size slide

  38. Recruit Technologies
    • Example: booking table

    View full-size slide

  39. Recruit Technologies
    • Example: raico
    #SPXTFS #''
    #BDLFOE"1*
    4FTTJPO4UPSF
    3FEJT

    /'4
    )5518FC4PDLFU
    4FTTJPO
    .BOBHFNFOU
    'JMF4UPSBHF
    3&45"1*
    4FSWFS4JEF
    3FOEFSJOH

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. step by step BFF

    View full-size slide

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

    View full-size slide

  45. step by step BFF
    #SPXTFS .POPMJUI4FSWJDF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide