When Frontend loves Backend : BFF Pattern Explained

As platforms evolve from monolithic architectures to distributed systems, the variety and number of clients—ranging from mobile and web to various API consumers—also increase. With this diversification, the one-size-fits-all API contract of traditional microservices becomes less effective. Each client has unique requirements and faces distinct challenges when rendering their user interfaces, necessitating a more tailored approach.

BFF - Backend For Frontend

Consider a scenario involving a hypothetical version of Shopify, an e-commerce giant, which we'll use as our example to illustrate this concept. As "Shopify" grows, it is accessed by an increasing number of mobile and web clients. These clients interact with backend microservices for fetching product catalog details, order management, and payment processing.

When retrieving product catalog details, both mobile and web clients currently use the same API provided by the catalog service. While the core information required by each client remains the same, significant challenges arise due to their differing needs:

• Mobile App Requirements:

  • Speed: Essential for user satisfaction, requiring quick load times.
  • Data Efficiency: Crucial for users on limited data plans, necessitating smaller image URLs.
  • Performance: Important to minimize on-device computation to save battery life.

• Web Application Requirements:

  • Rich Data: Users on larger screens need more detailed information and higher resolution images.
  • Complex Features: Capabilities like additional product recommendations and interactive elements to enhance user engagement.
  • Resource Utilization: Desktops can handle more data and complex features without the constraints of mobile devices.

To address these distinct needs effectively, the BFF (Backend for Frontend) pattern comes into play, creating specialized backend services tailored specifically for each type of client.

• Web Catalog Service: Delivers rich content and interactive experiences suitable for desktop browsing.
• Mobile Catalog Service: Ensures speed and efficiency for mobile users.

Considering API Design Alternatives

Instead of two separate backend services, another approach might involve creating two distinct sets of APIs within the same service that cater to different frontends. This method would still align with the BFF philosophy by tailoring API responses to the needs of each client type, though it would maintain a single service architecture. This could simplify deployment and maintenance but might require more sophisticated internal logic to manage the different API behaviors effectively.

Both approaches aim to optimize the user experience by addressing specific frontend needs, leveraging the BFF pattern's flexibility to enhance service delivery.