step-by-step BFF

Transcript

1. 1.

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

   in FiNC
2. 2.

   Twitter: @yosuke_furukawa Github: yosuke-furukawa

3. 3.

   Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ

   ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ
4. 4.

   Re-Engineering Legacy Software • Chapter 5: Re-Architecting ϞϊϦεతͳΞʔΩςΫνϟͰ͸νʔϜ ͱͯ͠εέʔϧ͠ͳ͍ͱࢥͬͨΒɺϑϩ ϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ

   ΑΓίϯςΫετΛҙࣝͯ͠ϚΠΫϩ αʔϏεԽ͢ΔͷΛݕ౼͢Δ ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ
   ϚΠΫϩαʔϏεΛҙࣝ͢Δ
5. 5.

   BFF is … • Backend For Frontends #SPXTFS #'' .JDSP
   4FSWJDF

   .JDSP
   4FSWJDF .JDSP
   4FSWJDF
6. 6.

   BFF is … • Backend For Frontends #SPXTFS #'' .JDSP
   4FSWJDF

   .JDSP
   4FSWJDF .JDSP
   4FSWJDF ϑϩϯτΤϯυͱόοΫΤϯυʹ෼͚Δɺ
   ϚΠΫϩαʔϏεΛҙࣝ͢Δ
7. 7.

   BFF is … • Sam Newman introduces the architecture.

8. 8.

   BFF is … • Sam Newman introduces the architecture.

9. 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. 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. 11.

    • (Server Side) Rendering BFF use-cases (3) #'' 1BHF
    3FRVFTU $PNQPOFOUT

    5FNQMBUFT 'FUDI
    %BUB "1* 3FOEFS
    )5.-
12. 12.

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

    4UPSF
    'JMF 'JMF
    4UPSBHF
    4 (FU
    'JMF1BUI "1*
    3FRVFTU
    XJUI
    'JMF1BUI
13. 13.

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

    1VCMJTI
14. 14.

    Why BFF ? #SPXTFS #'' .JDSP
    4FSWJDF .JDSP
    4FSWJDF .JDSP
    4FSWJDF

15. 15.

    Previous BFF pattern • since 1990 ~: 3 tier Client-Server

    System https://speakerdeck.com/koichik/isomorphic-survival-guide
16. 16.

    Previous BFF pattern • since 1990 ~ 2000: Monolithic Architecture

    https://speakerdeck.com/koichik/isomorphic-survival-guide
17. 17.

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

18. 18.

    Previous BFF pattern • since 2013-?: Single Page Application with

    MicroServices https://speakerdeck.com/yosuke_furukawa/25
19. 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. 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. 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. 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. 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. 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. 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. 26.

    Backend For Frontend • υϝΠϯಛԽͨ͠αʔϏεͱϦονͳΫϥΠΞϯτΛ ܨ͙ௐఀ໾ • ը໘Λ࡞ΔͨΊͷิࠤΛ͢Δ • APIͷ·ͱΊ໾

    • Cache΋͜͜ͷ૚Ͱ΍ΔͱBackend Friendly • BFF Λ Node.js ʹ͢Δͱ͞Βʹ • ϑϩϯτͷ࡞ۀΛڞ௨ԽͰ͖Δ • Server Side Rendering / validation logic etc
27. 27.

    BFF CaseStudy: Twitter

28. 28.

    BFF CaseStudy: Twitter

29. 29.

    Mobile Twitter Stack #SPXTFS #''
    /PEFKT
    
    &YQSFTT
    
    3FBDU .JDSP
    4FSWJDF
    4DBMB .JDSP
    4FSWJDF
    

    4DBMB .JDSP
    4FSWJDF
    4DBMB
30. 30.

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

    BFF ʹ
31. 31.

    BFF CaseStudy: Netflix

32. 32.

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

33. 33.

    Many Devices : Many APIs

34. 34.

    Many Devices : Many APIs

35. 35.

    BFF CaseStudy: Netflix • ଟछଟ༷ͳσόΠεʹରͯ͠ҰݸҰݸʹBFF ʢClient Adapter CodeʣΛஔ͘ • σόΠεؒͷҧ͍ΛBFFͰٵऩ͢Δ

    • OSFA - One Size Fit All - ͳ REST API Λ࡞Β ͣʹ֤σόΠεຖʹ࠷దԽ͢Δͱ͍͏ߟ͑ํ
36. 36.

    BFF CaseStudy: RecruitTech

37. 37.

    Recruit Technologies • BFFΛNode.js (Express) Ͱߏங͍ͯ͠Δ • API Aggregation •

    Server Side Rendering (React) • Session Management • File Upload • WebSocket
38. 38.

    Recruit Technologies • Example: booking table

39. 39.

    Recruit Technologies • Example: raico #SPXTFS #'' #BDLFOE
    "1* 4FTTJPO
    4UPSF
    3FEJT

    /'4 )5518FC4PDLFU 4FTTJPO
    .BOBHFNFOU 'JMF
    4UPSBHF 3&45
    "1* 4FSWFS
    4JEF
    3FOEFSJOH
40. 40.

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

41. 41.

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

    • ϨΨγʔͳγεςϜ͕طʹଘࡏ͓ͯ͠ΓɺͦΕΛ্ʹ ͔Ϳͤͯஈ֊తʹϦΞʔΩςΫτ͍ͨ͠
42. 42.

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

    etc)
43. 43.

    step by step BFF

44. 44.

    step by step BFF • طଘͷγεςϜ͕͋ΔͳΒɺҰ୴ͨͩͷProxy ͱͯ͠ߏங͢Δ • ϨϯμϦϯά͢ΔϨΠϠ͚ͩ୲౰͢Δ •

    ಺෦ͷॲཧΛϦΞʔΩςΫςΟϯά͢Δɺط ଘͷAPIΛঃʑʹஔ͖׵͍͑ͯ͘
45. 45.

    step by step BFF #SPXTFS .POPMJUI
    4FSWJDF

46. 46.

    step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF

47. 47.

    step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF 4FSWFS
    4JEF
    3FOEFSJOH .PEFSOJ[F
    'SPOUFOE

48. 48.

    step by step BFF #SPXTFS #'' .POPMJUI
    4FSWJDF 4FSWFS
    4JEF
    3FOEFSJOH .PEFSOJ[F
    'SPOUFOE

    /FX
    4FSWJDF 4FQBSBUF
    OFX
    TFSWJDF
49. 49.

    Thank you