BFF and Developer Experience

893f54413c2bd9ba41d11d753aacaf2c?s=47 Yosuke Kurami
May 18, 2019
Programming
15
2.2k

BFF and Developer Experience

Inside Frontend 2019

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

May 18, 2019
Tweet

Want more?

893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
0
120
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
4
940
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
5
1.9k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
2
160
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
83
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
74
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
150
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
4
160
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
440
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

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

  2. 2.

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

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

    #''

  6. 6.

    #BDLFOET'PS'SPOUFOET

  7. 7.

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

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

    ͳͥ#''ʁ

  10. 10.

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

  11. 11.

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

  12. 12.

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

  13. 13.

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

  14. 14.
    None
  15. 15.

    ࠓ೔͸ओʹίΠπͷ͓࿩

  16. 16.

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

  17. 17.
    None
  18. 18.

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

  19. 19.

    ྑ͍͜ͱ͍ͬͺ͍

  20. 20.

    ɾɾɾ

  21. 21.

    Ռͨͯ͠ຊ౰͔ʁ

  22. 22.

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

    ࣗ෼ͨͪͰ"1*αʔόʔ΋࡞Δඞཁ͋Γ
  23. 23.

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

  24. 24.

    ͜ͷ··͡Όμϝͩ

  25. 25.

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

  26. 26.

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

  27. 27.

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

    (SBQI2- 84%- 40"1 FUDʜ w *%-͔Β֤छݴޠͷίʔυΛੜ੒Ͱ͖Δͱخ͍͠
  28. 28.

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

  29. 29.

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

    ϩδοΫΛ࣮૷
  30. 30.
    None
  31. 31.

    ࣗಈੜ੒͚ͩͰ͸ ฒߦ։ൃʹ͸·ͩෆे෼

  32. 32.

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

  33. 33.

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

  34. 34.

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

  35. 35.
    None
  36. 36.

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

  37. 37.

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

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

    $PEFFYBNQMF

  39. 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. 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. 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. 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. 43.

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

  44. 44.

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

    2VFSZܥͷॲཧ ݶఆͰʣDBDIFɺFUDʜ
  45. 45.

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

    σϓϩΠޙʹ؀ڥม਺Ͱ৫ΓࠐΈͷ༗ޮແޮΛ੍ޚͰ͖ΔΑ͏ʹɺಈ తͳํࣜΛબ୒ͨ͠
  46. 46.

    ༨ஊ w ࣮ͷͱ͜ΖϞοΫͷͨΊʹΠϯλʔηϓλͷ࢓૊ΈΛ༻ҙͨ͠Θ͚Ͱ ͸ͳ͍ w ౰ॳʹ௚໘͍ͯͨ͠໰୊͸ʮϦΫΤετ͕׬ྃ͠ͳ͍αʔϏε"1*ίʔ ϧ͕كʹൃੜ͢Δʯͩͬͨ w ʮ൚༻తͳλΠϜΞ΢τػߏΛ͢΂ͯͷϚΠΫϩαʔϏεݺͼग़͠ʹ ৫ΓࠐΉʯ࢓૊Έ͕ඞཁʹ

    w ʮλΠϜΞ΢τϋϯυϦϯά͞ΕΔΑ͏ʹQSPNJTFΛϥοϓ͢Δʯ΋ ԣஅతؔ৺ࣄͰ͋Γɺ͜ΕΛղܾ͢ΔͨΊͷ࢓૊ͱͯ͠։ൃ
  47. 47.

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

  48. 48.

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

  49. 49.

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

  50. 50.

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

  51. 51.

    ΍ͬͯΈΑ͏

  52. 52.
    None
  53. 53.

    %FNPOTUSBUJPO

  54. 54.

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


    ࣌ؒଳʹΑͬͯՄ൱͕ҟͳΔ
  55. 55.

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

  56. 56.

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

  57. 57.

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

  58. 58.

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

  59. 59.

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

  60. 60.

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

  61. 61.

    ͦͷଞ%9޲্ͷ޻෉

  62. 62.

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

  63. 63.
    None
  64. 64.

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

  65. 65.
    None
  66. 66.

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

    ΦϯΛ࣮ࢪ
  67. 67.

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


    IUUQTHJUIVCDPN2VSBNZFTMJOUQMVHJOUVUPSJBMCMPCNBTUFS HVJEF3&"%.&KBNE

  68. 68.

    ࠓޙͷల๬

  69. 69.

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

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

    ·ͱΊ

  71. 71.

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

    FUD
  72. 72.

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

  73. 73.

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

  74. 74.

    5IBOLZPV