BFF and Developer Experience

Inside Frontend 2019

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. #''
   

   View Slide

6. #BDLFOET'PS'SPOUFOET
   

   View Slide

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

   View Slide

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/
   

   View Slide

9. ͳͥ#''ʁ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

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

    View Slide

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

    3FBDU3FEVY
    
    

    View Slide

17. View Slide

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

    View Slide

19. ྑ͍͜ͱ͍ͬͺ͍
    

    View Slide

20. ɾɾɾ
    

    View Slide

21. Ռͨͯ͠ຊ౰͔ʁ
    

    View Slide

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

    View Slide

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

    View Slide

24. ͜ͷ··͡Όμϝͩ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

35. View Slide

36. Πϯλʔηϓλ

    ࡞Ε͹Ͱ͚ͦ͏
    

    View Slide

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

    View Slide

38. $PEFFYBNQMF
    

    View Slide

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

    View Slide

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

    View Slide

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 };
    }
    }
    

    View Slide

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);
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    3FBDU3FEVY
    
    

    View Slide

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

    6*ఏڙͰ͖Δ
    
    

    View Slide

51. ΍ͬͯΈΑ͏
    

    View Slide

52. View Slide

53. %FNPOTUSBUJPO
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. View Slide

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

    View Slide

65. View Slide

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

    View Slide

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

    IUUQTTQFBLFSEFDLDPNRVSBNZMJEFEVPJTJJTUPSZCPPL
    w 7JTVBMSFHSFTTJPOUFTUͷ࿩ɿ

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

    IUUQTHJUIVCDPN2VSBNZFTMJOUQMVHJOUVUPSJBMCMPCNBTUFS
    HVJEF3&"%.&KBNE

    

    View Slide

68. ࠓޙͷల๬
    

    View Slide

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

    View Slide

70. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

74. 5IBOLZPV
    

    View Slide