BFF and Developer Experience

Slide 1

Slide 1 text

#'' %FWFMPQFS&YQFSJFODF :PTVLF,VSBNJ *OTJEF'SPOUFOE

Slide 2

Slide 2 text

"CPVUNF w ૔ݟ༸ีʢ!2VSBNZʣ w ͓͠͝ͱ w ϑϩϯτΤϯυΤϯδχΞBU'0-*0 w ٕज़ސ໰BU'J/$ w ։ൃิॿπʔϧΛ࡞Δͷׂ͕ͱ޷͖

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

#''

Slide 6

Slide 6 text

#BDLFOET'PS'SPOUFOET

Slide 7

Slide 7 text

ϑϩϯτΤϯυͷͨΊͷ αʔόʔ

Slide 8

Slide 8 text

By Sam Newman The BFF is tightly coupled to a speciﬁc user experience, and will typically be maintained by the same team as the user interface. https://samnewman.io/patterns/architectural/bﬀ/

Slide 9

Slide 9 text

ͳͥ#''ʁ

Slide 10

Slide 10 text

ϚΠΫϩαʔϏεͷ౷߹ͷͨΊ

Slide 11

Slide 11 text

6TFSFYQFSJFODF ύϑΥʔϚϯε 6*ʹඞཁॆ෼ͳ"1* ౷Ұ͞Εͨ6* .JDSPTFSWJDFT υϝΠϯʹ஫ྗͨ͠։ൃ γϯϓϧͰ࠶ར༻ੑͷߴ͍"1* αʔϏε͝ͱͷٕज़ಛҟੑ

Slide 12

Slide 12 text

6TFSFYQFSJFODF ύϑΥʔϚϯε 6*ʹඞཁॆ෼ͳ"1* ౷Ұ͞Εͨ6* .JDSPTFSWJDFT υϝΠϯʹ஫ྗͨ͠։ൃ γϯϓϧͰ࠶ར༻ੑͷߴ͍"1* αʔϏε͝ͱͷٕज़ಛҟੑ #''

Slide 13

Slide 13 text

'0-*0ʹ͓͚Δ#''

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ࠓ೔͸ओʹίΠπͷ͓࿩

Slide 16

Slide 16 text

8FC#''ͷ͓͠͝ͱ "1*"HHSFHBUJPO /PEFKTLPB 4FSWFS4JEF3FOEFSJOH  3FBDU3FEVY

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

#''ಋೖͰྑ͍͜ͱ͍ͬͺ͍ όοΫΤϯυ͸υϝΠϯ͝ͱͷαʔϏεͷ։ൃʹ஫ྗ ϑϩϯτΤϯυ͸6*ͷཁٻΛͦͷ··"1*Խ 443ʹΑΔߴ଎ͳॳظඳը

Slide 19

Slide 19 text

ྑ͍͜ͱ͍ͬͺ͍

Slide 20

Slide 20 text

ɾɾɾ

Slide 21

Slide 21 text

Ռͨͯ͠ຊ౰͔ʁ

Slide 22

Slide 22 text

ϑϩϯτͷ࢓ࣄ૿͑ͯΔ w 41"ͷΈͷ৔߹ w 3FBDU3FEVY෦෼Λ࡞Ε͹ऴΘΓ w 41"#''ͷ৔߹ w ࣗ෼ͨͪͰ"1*αʔόʔ΋࡞Δඞཁ͋Γ

Slide 23

Slide 23 text

ʮ#''Λ࠾༻͢Δʯ ʮϨΠϠʔ͕૿͑Δʯ ʮ։ൃʹ͕͔͔࣌ؒΔʯ

Slide 24

Slide 24 text

͜ͷ··͡Όμϝͩ

Slide 25

Slide 25 text

Α͏΍͘ࠓ೔ͷςʔϚ #''ΛαΫαΫ։ൃ͢ΔͨΊʹ

Slide 26

Slide 26 text

όοΫΤϯυͷ։ൃΛ଴ͨͳ͍ #''ͷ։ൃɾվम࣌఺Ͱɺ࣮αʔϏε͕ಈ࡞͠ͳͯ͘ ΋Α͍ ϑϩϯτΤϯυόοΫΤϯυؒͰʮͲͷΑ͏ͳ"1* Ͱ͋Δ΂͖͔ʯͷ߹ҙ͕औΕ͍ͯΕ͹ฒߦ։ൃՄೳ

Slide 27

Slide 27 text

*%-ESJWFOEFWFMPQNFOU w *%- *OUFSGBDF%FpOJUJPO-BOHVBHF w "1*࢓༷Λهड़͢ΔͨΊͷݴޠ w FH4XBHHFS H31$ (SBQI2- 84%- 40"1 FUDʜ w *%-͔Β֤छݴޠͷίʔυΛੜ੒Ͱ͖Δͱخ͍͠

Slide 28

Slide 28 text

5ISJGU w '0-*0Ͱ͸5ISJGUͱ͍͏31$ϑϨʔϜϫʔΫΛ࠾༻ w IUUQTUISJGUBQBDIFPSH w ܕγεςϜΛඋ͑ͨ*%- w *%-͔Β+BWB4DSJQUΫϥΠΞϯτίʔυʢެࣜπʔϧʣ

Slide 29

Slide 29 text

5ISJGU*%- +BWB4DSJQU $MJFOU 8FC.PCJMF#'' /PEFKT 'JOBHMF 4FSWFS 4FSWJDF 4DBMB ࣗಈੜ੒ ϩδοΫΛ࣮૷

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

ࣗಈੜ੒͚ͩͰ͸ ฒߦ։ൃʹ͸·ͩෆे෼

Slide 32

Slide 32 text

αʔϏεͷԾσʔλ͕ඞཁ ։ൃதαʔϏεͷ"1*͸ϞοΫσʔλʹࠩ͠ସ͍͑ͨ ։ൃࡁΈαʔϏεͷ"1*͸ςετ؀ڥΛར༻͍ͨ͠ ʢFHجຊతͳϢʔβʔ৘ใʣ ϞοΫͷར༻ੋඇ͸#''ͷίʔυ͔ΒෆՄ஌ʹ͍ͨ͠

Slide 33

Slide 33 text

͜͏͍͏ͱ͖ͦ͜ ʮؔ৺ࣄͷ෼཭ʯ

Slide 34

Slide 34 text

$SPTTDVUUJOHDPODFSO #''ͷओॲཧɿ  ʮಛఆͷϚΠΫϩαʔϏεʹॲཧΛґཔ͢Δʯ ԣஅతؔ৺ࣄɿ  ʮϚΠΫϩαʔϏεͷ໭Γ஋ΛϞοΫ͢Δʯ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Πϯλʔηϓλ  ࡞Ε͹Ͱ͚ͦ͏

Slide 37

Slide 37 text

ࢀߟɿ"01 w "TQFDU0SJFOUFE1SPHSBNNJOH w ԣஅతؔ৺ࣄΛॲཧຊମ͔Β෼཭͢Δ͜ͱ w ԣஅతؔ৺ࣄͷྫ w ϩΪϯά ྫ֎ϋϯυϦϯά τϨʔγϯά FUDʜ

Slide 38

Slide 38 text

$PEFFYBNQMF

Slide 39

Slide 39 text

5ISJGUJOUFSGBDF *%- include "user_typedef.thrift" include "some_service_struct.thrift" include "common_exceptions.thrift" service SomeService { some_service_struct.UserAssetInfo getUserAsset( 1: required user_typedef.UserId userId ) throws ( 1: common_exceptions.ServerError serverError ) }

Slide 40

Slide 40 text

5ISJGUDMJFOU HFOFSBUFE ˞࣮ࡍ͸5ISJGUπʔϧ͕&4Ͱग़ྗ͢ΔͨΊɺ͔ͳΓಡΈʹ͍͘ class SomeServiceClient { constructor() { this.connection = createConnection(); } getUserAsset(userId) { return new Promise(res => { this.connection.once("res_getUserAsset", res); this.connection.send("getUserAsset", [userId]); }); } }

Slide 41

Slide 41 text

$MJFOUΛར༻͢ΔՕॴʢ#''ʣ class SomeBFFLogic { constructor(someServiceClient, anotherServiceClient) { this.someServiceClient = someServiceClient; this.anotherServiceClient = anotherServiceClient; } async getUserAssetWithDetail(userId) { const summary = await this.someServiceClient.getUserAsset(userId); const detail = await this.anotherServiceClient.getAssetDetail(summary); return { ...summary, ...detail }; } }

Slide 42

Slide 42 text

Πϯλʔηϓτʂ const mockResponseHandler = { get: (target, methodName) => { const delegate = target[methodName]; if (typeof delegate !== "function") return delegate; return (...args) => getMockData(methodName).catch(delegate.bind(target, ...args)); }, }; const someServiceClient = process.env.NODE_ENV === "production" ? new SomeServiceClient() : new Proxy(new SomeServiceClient(), mockResponseHandler);

Slide 43

Slide 43 text

%JSFDU1SPYZͷར఺ w ҆৺ײ w #''ओॲཧʢ5ISJGU$MJFOUͷݺͼग़͠ʣͷมߋෆཁ w ࣗಈੜ੒͞Εͨ5ISJGU$MJFOUͷίʔυ΋ͦͷ·· w IBOEMFSHFUτϥοϓͷҾ਺͔Β"1*໊শΛऔಘͰ͖ΔͨΊɺIBOEMFS ͷ಺෦ॲཧ͕۩ମతͳ"1*໊শΛؾʹ͢Δඞཁ͕ͳ͍

Slide 44

Slide 44 text

*OUFSDFQUPSDIBJO w OFX1SPYZ ͷ໭Γ஋Λ࠶౓OFX1SPYZʹ༩͑Ε͹ɺෳ਺ͷΠϯ λʔηϓλʢIBOEMFSʣΛ࿈࠯Ͱ͖Δ w '0-*0ͷ#''Ͱ͸ϞοΫҎ֎ʹ΋ෳ਺ͷΠϯλʔηϓλΛ߹੒ w ࣮"1*ݺͼग़݁͠ՌͷϞοΫσʔλԽɺϦτϥΠɺ 2VFSZܥͷॲཧ ݶఆͰʣDBDIFɺFUDʜ

Slide 45

Slide 45 text

%ZOBNJDWT4UBUJD w %ZOBNJD1SPYZҎ֎Ͱ΋ΠϯλʔηϓλΛ࣮ݱ͢Δ͜ͱ΋Մೳ w ྫɿ#BCFMQMVHJO΍5ZQF4DSJQUDVTUPNUSBOTGPSNFSʹΑΓɺࣗಈ ੜ੒͞ΕͨίʔυΛ੩తղੳͯ͠ɺΞεϖΫτΛ৫ΓࠐΉΑ͏ʹ͢ Δʢ"45USBOTGPSNBUJPOʣ w ͜ͷ৔߹ɺϏϧυ࣌ʹ৫ΓࠐΈੋඇ͕֬ఆ͢Δ w σϓϩΠޙʹ؀ڥม਺Ͱ৫ΓࠐΈͷ༗ޮແޮΛ੍ޚͰ͖ΔΑ͏ʹɺಈ తͳํࣜΛબ୒ͨ͠

Slide 46

Slide 46 text

༨ஊ w ࣮ͷͱ͜ΖϞοΫͷͨΊʹΠϯλʔηϓλͷ࢓૊ΈΛ༻ҙͨ͠Θ͚Ͱ ͸ͳ͍ w ౰ॳʹ௚໘͍ͯͨ͠໰୊͸ʮϦΫΤετ͕׬ྃ͠ͳ͍αʔϏε"1*ίʔ ϧ͕كʹൃੜ͢Δʯͩͬͨ w ʮ൚༻తͳλΠϜΞ΢τػߏΛ͢΂ͯͷϚΠΫϩαʔϏεݺͼग़͠ʹ ৫ΓࠐΉʯ࢓૊Έ͕ඞཁʹ w ʮλΠϜΞ΢τϋϯυϦϯά͞ΕΔΑ͏ʹQSPNJTFΛϥοϓ͢Δʯ΋ ԣஅతؔ৺ࣄͰ͋Γɺ͜ΕΛղܾ͢ΔͨΊͷ࢓૊ͱͯ͠։ൃ

Slide 47

Slide 47 text

͜͜·Ͱͷ͓͞Β͍ *%-͕ܾ·Ε͹#''ͷ։ൃʹணखͰ͖Δ w5ISJGU*%-/PEFKTΫϥΠΞϯτͷੜ੒ w։ൃ࣌༻ͷϞοΫσʔλࠩ͠ସ͑

Slide 48

Slide 48 text

ં֯ͳͷͰ΋͏গ͠ศརʹ

Slide 49

Slide 49 text

8FC#''ͷ͓͠͝ͱʢ࠶ʣ "1*"HHSFHBUJPO /PEFKTLPB 4FSWFS4JEF3FOEFSJOH  3FBDU3FEVY

Slide 50

Slide 50 text

#''Ͱ%FW޲͚ͷ6*࡞ΕΔ ϑϩϯτ։ൃ౎߹Ͱ "1*࡞ΕΔ 3FBDU 443 Ͱ  6*ఏڙͰ͖Δ

Slide 51

Slide 51 text

΍ͬͯΈΑ͏

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

%FNPOTUSBUJPO

Slide 54

Slide 54 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ྫɿ঎඼ͷ஫จ֬ೝը໘ w ϞοΫΛར༻͍ͯ͠ͳ͍ঢ়ଶ w εςʔδϯάͷόοΫΤϯυαʔ Ϗε͕ར༻͞ΕΔ w Ωϟϓνϟ͸஫จՄೳঢ়ଶͷਤ  ࣌ؒଳʹΑͬͯՄ൱͕ҟͳΔ

Slide 55

Slide 55 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ։ൃऀϩʔΧϧ΍ςετ؀ڥͰ͸ɺ σόοά༻ͷϑολʔ͕ଘࡏͯ͠ ͍Δ

Slide 56

Slide 56 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w σόοά༻ϑολʔͷϦϯΫ͔Β ͸ɺϞοΫͷڍಈΛίϯτϩʔϧ ͢ΔͨΊͷ։ൃઐ༻ը໘΁ભҠ w ༗ޮʹ͍ͨ͠ϞοΫΛબ୒͢Δ w ͦͷϒϥ΢βͰͷΈɺબ୒ͨ͠Ϟο Ϋ͕ద༻͞ΕΔΑ͏ʹͳΔ

Slide 57

Slide 57 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ΞϓϦέʔγϣϯͷը໘ʹ΋ͲΓ Ϧϩʔυ͢Δͱʜ w ϞοΫ͕༗ޮԽ͞Εɺ஫จෆՄೳ ঢ়ଶͱಉ༷ͷσʔλΛ#''͕ड͚ औͬͨঢ়ଶʹͳ͍ͬͯΔ

Slide 58

Slide 58 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ద༻͞ΕͨϞοΫσʔλ͸:".- ܗࣜͰදࣔ͞Εɺը໘͔Β΋֬ೝ ͕Ͱ͖Δ w ΞυϗοΫʹϞοΫͷσʔλΛฤ ू͢Δ͜ͱ΋Մೳ

Slide 59

Slide 59 text

˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ϞοΫͷσʔλΛ্ॻ͖ͨ͠ޙʹ ࠶౓ը໘ΛಡΈࠐΉͱʜ w ্ॻ͖ฤूͨ͠಺༰͕൓ө͞ΕΔ

Slide 60

Slide 60 text

6*GPSEFWͷԸܙ ඇϑϩϯτΤϯδχΞʢFH2"୲౰ʣ΋ɺ࠶ݱ೉қ ౓ͷߴ͍ը໘ঢ়ଶΛ༰қʹ֬ೝͰ͖ΔΑ͏ʹͳͬͨ

Slide 61

Slide 61 text

ͦͷଞ%9޲্ͷ޻෉

Slide 62

Slide 62 text

4DB⒎PMEJOH w 3FBDUDPNQPOFOU4UPSZCPPL਽ܗͷੜ੒εΫϦϓτ w 3FEVYؔ࿈ʢBDUJPO SFEVDFS NJEEMFXBSFʣ਽ܗͷੜ੒εΫϦϓτ

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

7JTVBMSFHSFTTJPOUFTUJOH w 4$.QVTI࣌ʹ$*Ͱ4UPSZCPPLͷΩϟϓνϟΛऔಘ w લճΩϟϓνϟը૾܊ͱࠓճΩϟϓνϟը૾܊Λൺֱ w ൺֱ݁ՌͷϨϙʔτΛ.FSHF3FRVFTUͷίϝϯτ΁

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

ಠࣗͷ&4-JOUϧʔϧ w ίʔυϨϏϡʔͰΑ͋͘Γ͕ͪͳࢦఠΛগͣͭ͠ϧʔϧԽ w ʮYYYͷ$PNQPOFOU͸ੜͰ࢖ΘͣʹZZZͱ͍͏ϥούʔΛ࢖͓͏ʯ w ʮ͜ͷσΟϨΫτϦ͸ʓʓ૚ͷॲཧ͕ϝΠϯ͔ͩΒɺ[[[ΛJNQPSU͢ ΔΑ͏ͳॲཧ͸ॻ͔ͳ͍Ͱʯ w ଞͷϑϩϯτΤϯδχΞͰ΋&4-JOUϧʔϧΛ։ൃͰ͖ΔΑ͏ʹϋϯζ ΦϯΛ࣮ࢪ

Slide 67

Slide 67 text

ଓ͖͸8FCͰ w 4UPSZCPPLपΓͷ࿩ɿ  IUUQTTQFBLFSEFDLDPNRVSBNZMJEFEVPJTJJTUPSZCPPL w 7JTVBMSFHSFTTJPOUFTUͷ࿩ɿ  IUUQTNFEJVNDPN!2VSBNZGPMJPͷը૾ճؼςετͷཪଆ DCD w &4-JOUͷϋϯζΦϯ࿩ɿ  IUUQTHJUIVCDPN2VSBNZFTMJOUQMVHJOUVUPSJBMCMPCNBTUFS HVJEF3&"%.&KBNE 

Slide 68

Slide 68 text

ࠓޙͷల๬

Slide 69

Slide 69 text

#''443ͷGFBUVSFUFTU w ࠓ͍࣋ͬͯΔ࢓૊Έ w ೚ҙͷϚΠΫϩαʔϏεͷϞοΫࠩ͠ସ͑ JOUFSDFQUPS w 3FBDU$PNQPOFOUΛඳը݁Ռͷ7JTVBMUFTUJOH w ྆ํ࢖͑͹ʮϚΠΫϩαʔϏε΁ͷϦΫΤετऔಘʙ443$43Ͱͷ ϒϥ΢βඳըʯΛҰؾ௨؏ͰςετͰ͖Δ͸ͣ

Slide 70

Slide 70 text

·ͱΊ

Slide 71

Slide 71 text

ࠓ೔࿩ͨ͜͠ͱ w '0-*0ʹ͓͚Δ8FC#''ͷ֓ཁ w ͪΐͬͱָͯ͠#''Λ։ൃ͢ΔͨΊͷۤ࿑࿩ w *%-ϕʔεͰͷ։ൃ w ΠϯλʔηϓλʹΑΔΫϥΠΞϯτͷࠩ͠ସ͑ w FUD

Slide 72

Slide 72 text

఻͍͑ͨ͜ͱ ࡢࠓͷϑϩϯτΤϯυ͸༷ʑͳٕज़ཁૉͷͨΊʹɺ ։ൃ͕ෳࡶʹͳΓ͕ͪ ʮෆศʯͱײͨ͡Βগͣͭ͠ΤϯδχΞϦϯάͰղܾ ͢Ε͹Α͍ ։ൃελοΫΛඥղ͚͹͖ͬͱԿ͔ݟ͔ͭΔ͸ͣʂ