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

BFF and Developer Experience

BFF and Developer Experience

Inside Frontend 2019

Yosuke Kurami

May 18, 2019
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. #BDLFOET'PS'SPOUFOET

    View full-size slide

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

    View full-size slide

  5. 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/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ࠓ೔͸ओʹίΠπͷ͓࿩

    View full-size slide

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

    3FBDU3FEVY

    View full-size slide

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

    View full-size slide

  13. ྑ͍͜ͱ͍ͬͺ͍

    View full-size slide

  14. Ռͨͯ͠ຊ౰͔ʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. ͜ͷ··͡Όμϝͩ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. *%-ESJWFOEFWFMPQNFOU
    w *%- *OUFSGBDF%FpOJUJPO-BOHVBHF

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

    View full-size slide

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

    View full-size slide

  22. 5ISJGU*%-
    +BWB4DSJQU
    $MJFOU
    8FC.PCJMF#'' /PEFKT

    'JOBHMF
    4FSWFS
    4FSWJDF 4DBMB

    ࣗಈੜ੒ ϩδοΫΛ࣮૷

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. $SPTTDVUUJOHDPODFSO
    #''ͷओॲཧɿ

    ʮಛఆͷϚΠΫϩαʔϏεʹॲཧΛґཔ͢Δʯ
    ԣஅతؔ৺ࣄɿ

    ʮϚΠΫϩαʔϏεͷ໭Γ஋ΛϞοΫ͢Δʯ

    View full-size slide

  27. Πϯλʔηϓλ

    ࡞Ε͹Ͱ͚ͦ͏

    View full-size slide

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

    View full-size slide

  29. 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
    )
    }

    View full-size slide

  30. 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]);
    });
    }
    }

    View full-size slide

  31. $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 };
    }
    }

    View full-size slide

  32. Πϯλʔηϓτʂ
    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);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    3FBDU3FEVY

    View full-size slide

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

    6*ఏڙͰ͖Δ

    View full-size slide

  41. ΍ͬͯΈΑ͏

    View full-size slide

  42. %FNPOTUSBUJPO

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. ଓ͖͸8FCͰ
    w 4UPSZCPPLपΓͷ࿩ɿ

    IUUQTTQFBLFSEFDLDPNRVSBNZMJEFEVPJTJJTUPSZCPPL
    w 7JTVBMSFHSFTTJPOUFTUͷ࿩ɿ

    IUUQTNFEJVNDPN!2VSBNZGPMJPͷը૾ճؼςετͷཪଆ
    DCD
    w &4-JOUͷϋϯζΦϯ࿩ɿ

    IUUQTHJUIVCDPN2VSBNZFTMJOUQMVHJOUVUPSJBMCMPCNBTUFS
    HVJEF3&"%.&KBNE


    View full-size slide

  55. ࠓޙͷల๬

    View full-size slide

  56. #''443ͷGFBUVSFUFTU
    w ࠓ͍࣋ͬͯΔ࢓૊Έ
    w ೚ҙͷϚΠΫϩαʔϏεͷϞοΫࠩ͠ସ͑ JOUFSDFQUPS

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide