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

step-by-step BFF

D76231a2114896dfcc7b79ac69558b79?s=47 Yosuke Furukawa
PRO
March 30, 2017
Programming
17
9.5k

step-by-step BFF

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

March 30, 2017
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
0
46
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
2
1.6k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
1
780
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
59
18k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
15
8.7k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
3
6.2k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
69
26k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
0
2.2k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
0
91

Other Decks in Programming

See All in Programming
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
3.2k
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
320
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
6
820
F86d970e452f844b2849522cf3cc7e5f?s=48 hedgehognoodle
2
210
655e620122d83015d6363506970a71d5?s=48 haruu_iq
0
470
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
1
470
832534770705425fc1f64ad60cb875a2?s=48 show_kanamaru
6
3.4k
8d7983d03db1fb756ccdbcbf7b760f98?s=48 yamada1826
0
330
2b67c3578e104daca8c6609e5be43d8d?s=48 balconia
0
140
47e8496b5cc69a2ac8bf5e99d03fd8cf?s=48 yasuohosotani
0
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
3
600

Featured

See All Featured
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.1k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
239
23k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
334
29k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
98
5.6k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
39
1.3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.8k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
269
17k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k

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 #'' .JDSP4FSWJDF

    .JDSP4FSWJDF .JDSP4FSWJDF

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

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

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

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

  9. BFF use-cases (1) • API Aggregation #'' 6TFS .JDSP4FSWJDF "SUJDMF

    .JDSP4FSWJDF $PNNFOU .JDSP4FSWJDF 3FRVFTUUPCMPH QBHF 3FRVFTUUPTPNFЖ4FSWJDFT DPODVSSFOUMZ $PODBU&WFSZ+40/ 3FTQPOTF

  10. • Session Management BFF use-cases (2) #'' 3FRVFTUXJUI TFTTJPOJE (FU5PLFOGSPN

    4FTTJPO 4FTTJPO4UPSF JE VTFSOBNF UPLFO 0UIFS"1* 3FRVFTUXJUIUPLFO

  11. • (Server Side) Rendering BFF use-cases (3) #'' 1BHF3FRVFTU $PNQPOFOUT

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

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

    4UPSF'JMF 'JMF4UPSBHF 4 (FU'JMF1BUI "1*3FRVFTUXJUI 'JMF1BUI

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

    1VCMJTI

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

  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 &YQSFTT3FBDU .JDSP4FSWJDF 4DBMB .JDSP4FSWJDF

    4DBMB .JDSP4FSWJDF 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* 4FTTJPO4UPSF 3FEJT

    /'4 )5518FC4PDLFU 4FTTJPO .BOBHFNFOU 'JMF4UPSBHF 3&45"1* 4FSWFS4JEF 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 .POPMJUI4FSWJDF

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

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

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

    /FX4FSWJDF 4FQBSBUFOFX TFSWJDF

  49. Thank you