Super fast client application is the need of current digital era, personalisation in the client application is icing on the cake.

At Goibibo, Hotels Business is very much focussed, as much as we care about customers’ experience for booking the hotel on our B2C platform, we also care about the experience for the hoteliers while using our platform to manage their Hotel.

For Hoteliers we have a very vast application to manage their property, the application is built using React.js at frontend and Django at backend and it is well known as Extranet in Hotels domain.

Challenges

We follow micro-service architecture at the core and all the client applications catering hoteliers, directly get data from those micro-services, this started influencing engineers to debate on where to keep the representation logic like, if we keep it at frontend then all the client applications (web, iOS, android and mobile-web) have to write the same logic 3 times, and keeping it in backend is never a good idea. Moreover, getting data from more than one service is again an overhead for client apps and it also exposes all backend services to client applications, that is why we need a Backend For Frontend or BFF.

UI processing on Client

Most of the UI processing logic resides on the client, so there is always chance of duplicity in the UI rendering logic for different screen size client application.

The Payload Variance

For different screen size clients we can keep the payload size as per the client requirement, which will eventually help in optimising system performance.

Collective Response

Different micro services, returns response as per their implementation, so client application needs to process that response every time as per their requirement.

BFF implementation

BFF is again a micro service, which listens to client request and figures out from which backend micro-service it has to fetch the data to serve client application.

We have implemented BFF in Express.js, we chose express because of default non-blocking IO behaviour, following is the tech stack:

• Express.js — Server
• Mongo DB — For caching API Data
• PM2 — Process Manager
• Redis — For caching user token

BFF Responsibilities

BFF act as the main source of truth for all the frontend clients, following the major responsibilities for BFF layer:

• Authenticated response for client side applications
• Merge response from various backend services and provide the response as per the client requirement
• Trim response as per client app requirement, dynamic pagination
• Support GRPC enabled micro-services by exposing http APIs as proxy
• Caching frequent static API calls
• Personalisation for rendering selective UI for the varied sized client application
• Multi language support for different client applications Support Client-Server Socket connection for realtime updates