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. #''

  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Ͱͷ ϒϥ΢βඳըʯΛҰؾ௨؏ͰςετͰ͖Δ͸ͣ