BFF and Developer Experience

BFF and Developer Experience

Inside Frontend 2019

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

May 18, 2019
Tweet

Transcript

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

  2. "CPVUNF w ૔ݟ༸ีʢ!2VSBNZʣ w ͓͠͝ͱ w ϑϩϯτΤϯυΤϯδχΞBU'0-*0 w ٕज़ސ໰BU'J/$ w

    ։ൃิॿπʔϧΛ࡞Δͷׂ͕ͱ޷͖
  3. None
  4. None
  5. #''

  6. #BDLFOET'PS'SPOUFOET

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

  8. By Sam Newman The BFF is tightly coupled to a

    specific user experience, and will typically be maintained by the same team as the user interface. https://samnewman.io/patterns/architectural/bff/
  9. ͳͥ#''ʁ

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

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

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

  13. '0-*0ʹ͓͚Δ#''

  14. None
  15. ࠓ೔͸ओʹίΠπͷ͓࿩

  16. 8FC#''ͷ͓͠͝ͱ "1*"HHSFHBUJPO /PEFKTLPB 4FSWFS4JEF3FOEFSJOH
 3FBDU 3FEVY

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

  19. ྑ͍͜ͱ͍ͬͺ͍

  20. ɾɾɾ

  21. Ռͨͯ͠ຊ౰͔ʁ

  22. ϑϩϯτͷ࢓ࣄ૿͑ͯΔ w 41"ͷΈͷ৔߹ w 3FBDU 3FEVY෦෼Λ࡞Ε͹ऴΘΓ w 41" #''ͷ৔߹ w

    ࣗ෼ͨͪͰ"1*αʔόʔ΋࡞Δඞཁ͋Γ
  23. ʮ#''Λ࠾༻͢Δʯ ʮϨΠϠʔ͕૿͑Δʯ ʮ։ൃʹ͕͔͔࣌ؒΔʯ

  24. ͜ͷ··͡Όμϝͩ

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

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

  27. *%-ESJWFOEFWFMPQNFOU w *%- *OUFSGBDF%FpOJUJPO-BOHVBHF  w "1*࢓༷Λهड़͢ΔͨΊͷݴޠ w FH4XBHHFS H31$

    (SBQI2- 84%- 40"1 FUDʜ w *%-͔Β֤छݴޠͷίʔυΛੜ੒Ͱ͖Δͱخ͍͠
  28. 5ISJGU w '0-*0Ͱ͸5ISJGUͱ͍͏31$ϑϨʔϜϫʔΫΛ࠾༻ w IUUQTUISJGUBQBDIFPSH w ܕγεςϜΛඋ͑ͨ*%- w *%-͔Β+BWB4DSJQUΫϥΠΞϯτίʔυʢެࣜπʔϧʣ

  29. 5ISJGU*%- +BWB4DSJQU $MJFOU 8FC.PCJMF#'' /PEFKT 'JOBHMF 4FSWFS 4FSWJDF 4DBMB ࣗಈੜ੒

    ϩδοΫΛ࣮૷
  30. None
  31. ࣗಈੜ੒͚ͩͰ͸ ฒߦ։ൃʹ͸·ͩෆे෼

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

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

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

  35. None
  36. Πϯλʔηϓλ
 ࡞Ε͹Ͱ͚ͦ͏

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

    τϨʔγϯά FUDʜ
  38. $PEFFYBNQMF

  39. 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 ) }
  40. 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]); }); } }
  41. $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 }; } }
  42. Πϯλʔηϓτʂ 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);
  43. %JSFDU1SPYZͷར఺ w ҆৺ײ w #''ओॲཧʢ5ISJGU$MJFOUͷݺͼग़͠ʣͷมߋෆཁ w ࣗಈੜ੒͞Εͨ5ISJGU$MJFOUͷίʔυ΋ͦͷ·· w IBOEMFSHFUτϥοϓͷҾ਺͔Β"1*໊শΛऔಘͰ͖ΔͨΊɺIBOEMFS ͷ಺෦ॲཧ͕۩ମతͳ"1*໊শΛؾʹ͢Δඞཁ͕ͳ͍

  44. *OUFSDFQUPSDIBJO w OFX1SPYZ  ͷ໭Γ஋Λ࠶౓OFX1SPYZʹ༩͑Ε͹ɺෳ਺ͷΠϯ λʔηϓλʢIBOEMFSʣΛ࿈࠯Ͱ͖Δ w '0-*0ͷ#''Ͱ͸ϞοΫҎ֎ʹ΋ෳ਺ͷΠϯλʔηϓλΛ߹੒ w ࣮"1*ݺͼग़݁͠ՌͷϞοΫσʔλԽɺϦτϥΠɺ

    2VFSZܥͷॲཧ ݶఆͰʣDBDIFɺFUDʜ
  45. %ZOBNJDWT4UBUJD w %ZOBNJD1SPYZҎ֎Ͱ΋ΠϯλʔηϓλΛ࣮ݱ͢Δ͜ͱ΋Մೳ w ྫɿ#BCFMQMVHJO΍5ZQF4DSJQUDVTUPNUSBOTGPSNFSʹΑΓɺࣗಈ ੜ੒͞ΕͨίʔυΛ੩తղੳͯ͠ɺΞεϖΫτΛ৫ΓࠐΉΑ͏ʹ͢ Δʢ"45USBOTGPSNBUJPOʣ w ͜ͷ৔߹ɺϏϧυ࣌ʹ৫ΓࠐΈੋඇ͕֬ఆ͢Δ w

    σϓϩΠޙʹ؀ڥม਺Ͱ৫ΓࠐΈͷ༗ޮແޮΛ੍ޚͰ͖ΔΑ͏ʹɺಈ తͳํࣜΛબ୒ͨ͠
  46. ༨ஊ w ࣮ͷͱ͜ΖϞοΫͷͨΊʹΠϯλʔηϓλͷ࢓૊ΈΛ༻ҙͨ͠Θ͚Ͱ ͸ͳ͍ w ౰ॳʹ௚໘͍ͯͨ͠໰୊͸ʮϦΫΤετ͕׬ྃ͠ͳ͍αʔϏε"1*ίʔ ϧ͕كʹൃੜ͢Δʯͩͬͨ w ʮ൚༻తͳλΠϜΞ΢τػߏΛ͢΂ͯͷϚΠΫϩαʔϏεݺͼग़͠ʹ ৫ΓࠐΉʯ࢓૊Έ͕ඞཁʹ

    w ʮλΠϜΞ΢τϋϯυϦϯά͞ΕΔΑ͏ʹQSPNJTFΛϥοϓ͢Δʯ΋ ԣஅతؔ৺ࣄͰ͋Γɺ͜ΕΛղܾ͢ΔͨΊͷ࢓૊ͱͯ͠։ൃ
  47. ͜͜·Ͱͷ͓͞Β͍ *%-͕ܾ·Ε͹#''ͷ։ൃʹணखͰ͖Δ w5ISJGU*%-/PEFKTΫϥΠΞϯτͷੜ੒ w։ൃ࣌༻ͷϞοΫσʔλࠩ͠ସ͑

  48. ં֯ͳͷͰ΋͏গ͠ศརʹ

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

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

  51. ΍ͬͯΈΑ͏

  52. None
  53. %FNPOTUSBUJPO

  54. ˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ྫɿ঎඼ͷ஫จ֬ೝը໘ w ϞοΫΛར༻͍ͯ͠ͳ͍ঢ়ଶ w εςʔδϯάͷόοΫΤϯυαʔ Ϗε͕ར༻͞ΕΔ w Ωϟϓνϟ͸஫จՄೳঢ়ଶͷਤ


    ࣌ؒଳʹΑͬͯՄ൱͕ҟͳΔ
  55. ˞ը૾ɾσʔλ͸ٕज़આ໌Λ໨తͱͨ͠αϯϓϧͰ͢ w ։ൃऀϩʔΧϧ΍ςετ؀ڥͰ͸ɺ σόοά༻ͷϑολʔ͕ଘࡏͯ͠ ͍Δ

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

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

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

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

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

  61. ͦͷଞ%9޲্ͷ޻෉

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

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

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

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


    IUUQTHJUIVCDPN2VSBNZFTMJOUQMVHJOUVUPSJBMCMPCNBTUFS HVJEF3&"%.&KBNE

  68. ࠓޙͷల๬

  69. #''443ͷGFBUVSFUFTU w ࠓ͍࣋ͬͯΔ࢓૊Έ w ೚ҙͷϚΠΫϩαʔϏεͷϞοΫࠩ͠ସ͑ JOUFSDFQUPS  w 3FBDU$PNQPOFOUΛඳը݁Ռͷ7JTVBMUFTUJOH w

    ྆ํ࢖͑͹ʮϚΠΫϩαʔϏε΁ͷϦΫΤετऔಘʙ443$43Ͱͷ ϒϥ΢βඳըʯΛҰؾ௨؏ͰςετͰ͖Δ͸ͣ
  70. ·ͱΊ

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

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

  73. Α͍ϑϩϯτΤϯυ։ൃΛ

  74. 5IBOLZPV