BFF Pattern: Backend-for-Frontend (Mobile vs Web)

The BFF Pattern

A desktop website has a giant screen and a high-speed fiber connection. A mobile app has a tiny screen and a spotty 3G connection. Sending the exact same massive JSON to both is a waste. The Backend-for-Frontend (BFF) pattern creates specialized gateways for each type of device.

1. Why use specialized gateways?

Mobile BFF: Strips out unnecessary data to save cellular bandwidth. Returns smaller images. Uses long-polling or WebSockets for battery efficiency.
Web BFF: Returns full, high-fidelity metadata. Handles complex session cookies.
External API BFF: Strictly rate-limited and documented for third-party partners.

2. Separation of Concerns

The BFF pattern prevents your internal microservices from being "Polluted" with UI concerns. Your User service should just return user data; it shouldn't have to care if the Caller wants a 'Mobile View' or a 'Admin View'.

4. Interview Mastery

Q: "How does the BFF pattern improve security for Single Page Applications (SPA)?"

Architect Answer: "The BFF allows you to implement the **'Same-Site Cookie'** strategy. Instead of the browser (Javascript) handling sensitive JWT tokens, the BFF handles the OIDC login. It stores the token in an **Http-Only, Secure, Same-Site cookie**. The browser's Javascript never sees the token, making it 100% immune to Cross-Site Scripting (XSS) token-theft attacks. The BFF acts as a secure 'Bridge' between the untrusted browser and the trusted internal microservice network."

Interview Q&A for this course