step-by-step BFF

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

step-by-step BFF

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

March 30, 2017
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
3
800
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
66
20k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
0
2.1k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
0
73
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
0
26
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
0
2.1k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
23
12k
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
2
320
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
11
4.5k

Other Decks in Programming

See All in Programming
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
400
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
150
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
5
1.3k
E387c487b4fea568909cf805f91afe92?s=48 yuta24
4
350
7a4968fbcd56e81f95a4f3c186141b52?s=48 kateinoigakukun
5
250
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
350
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
0
110
E586b46d5b09f8109beb66bb146e4f20?s=48 tamappe
1
330
35761e3936deba2f8189c2d20982c771?s=48 getify
1
430
1405a601755e5fcbfdc93a2560368bb1?s=48 freddi
2
210
3295d80faee461db1093982361256fe4?s=48 panini
0
160
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
8
2.1k

Featured

See All Featured
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
53
6k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
3
190
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9.1k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.8k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
870
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
70
7k

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