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

BFF and Developer Experience

BFF and Developer Experience

Inside Frontend 2019

Avatar for Yosuke Kurami

Yosuke Kurami

May 18, 2019
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. #''

  2. 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/
  3. *%-ESJWFOEFWFMPQNFOU w *%- *OUFSGBDF%FpOJUJPO-BOHVBHF  w "1*࢓༷Λهड़͢ΔͨΊͷݴޠ w FH4XBHHFS H31$

    (SBQI2- 84%- 40"1 FUDʜ w *%-͔Β֤छݴޠͷίʔυΛੜ੒Ͱ͖Δͱخ͍͠
  4. 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 ) }
  5. 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]); }); } }
  6. $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 }; } }
  7. Πϯλʔηϓτʂ 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);
  8. #''443ͷGFBUVSFUFTU w ࠓ͍࣋ͬͯΔ࢓૊Έ w ೚ҙͷϚΠΫϩαʔϏεͷϞοΫࠩ͠ସ͑ JOUFSDFQUPS  w 3FBDU$PNQPOFOUΛඳը݁Ռͷ7JTVBMUFTUJOH w

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