0
0
Microservicessystem_design~12 mins

Backend for Frontend (BFF) pattern in Microservices - Architecture Diagram

Choose your learning style9 modes available
LearnWhyDeepArchPracticeChallengeDesignRecallScale
System Overview - Backend for Frontend (BFF) pattern

The Backend for Frontend (BFF) pattern creates a dedicated backend service for each user interface or client type, such as web or mobile. This helps tailor APIs to the specific needs of each frontend, improving performance and simplifying frontend logic.

Key requirements include handling different data formats, aggregating data from multiple microservices, and reducing over-fetching or under-fetching of data.

Architecture Diagram
User (Web)   User (Mobile)
   |             |
   v             v
+--------+   +--------+
|  BFF   |   |  BFF   |
| Web BFF|   |Mobile BFF|
+--------+   +--------+
    |            |
    v            v
+---------------------+
|    API Gateway      |
+---------------------+
    |       |       |
    v       v       v
+-------+ +-------+ +-------+
|Service| |Service| |Service|
|   A   | |   B   | |   C   |
+-------+ +-------+ +-------+
    |        |        |
    v        v        v
+--------------------------------+
|          Databases              |
+--------------------------------+
Components
User (Web)
client
Web browser user interface
User (Mobile)
client
Mobile app user interface
Web BFF
service
Backend tailored for web frontend, aggregates and formats data
Mobile BFF
service
Backend tailored for mobile frontend, optimizes data for mobile usage
API Gateway
api_gateway
Routes requests from BFFs to appropriate microservices
Service A
microservice
Handles specific business logic and data
Service B
microservice
Handles specific business logic and data
Service C
microservice
Handles specific business logic and data
Databases
database
Stores persistent data for microservices
Request Flow - 10 Hops
User (Web) → Web BFF
Web BFF → API Gateway
API Gateway → Service A
API Gateway → Service B
Service A → Databases
Service B → Databases
Service A → API Gateway
Service B → API Gateway
API Gateway → Web BFF
Web BFF → User (Web)
Failure Scenario
Component Fails:Web BFF
Impact:Web users cannot get tailored data; frontend may fail or show errors
Mitigation:Implement redundancy with multiple Web BFF instances behind a load balancer; fallback to generic API Gateway if needed
Architecture Quiz - 3 Questions
Test your understanding
What is the main purpose of the Backend for Frontend (BFF) service?
ATo store user data persistently
BTo replace the API Gateway entirely
CTo tailor backend responses specifically for each frontend client
DTo act as a database cache
Design Principle
The BFF pattern improves frontend performance and developer experience by creating backend services tailored to each client type. This reduces unnecessary data transfer and complexity on the frontend, while keeping microservices focused on business logic.