BFF - Backend for Frontend - Pattern in Microservices

Say, we are launching an e-commerce website that people can use from their desktop and place orders. We want to render the product details that include - name, description, sellers, variants, reviews, and FAQs. The site did well, and now we decide to launch a mobile app.

Given that the mobile has limited real estate, it is very hard to render the same information that we do on the Web. Hence, we choose not to render Reviews and FAQs. Thus, even if we receive the reviews and FAQs in the response, while rendering we choose not to render them.

This is a waste of user bandwidth, data, and processing power. Ideally, we should not be sending unnecessary fields from the backend. So, how do we implement this?

Backend for Frontend

BFF is a layer that sits between the clients and the backend. Every type of client has a dedicated BFF; for example, Desktop Web has its own BFF, while Mobile has its own.

Depending on the request, the BFF then talks to the backend, grabs the data, filters out the unnecessary fields, and responds. It can also optionally transform the data in a client-specific format.

This way, we keep the backend simple and apply all presentation-level hacks and tweaks to BFF.

BFF and Microservices

BFF acts as a perfect abstraction for underlying microservices. For an API, it can connect to necessary microservices, gather the responses, and respond. This ensures that we are not fetching data that we don't need.

For example, Given compatibility and constraints, a Desktop BFF can talk to Orders, Sellers, and Reviews Services, while a Mobile BFF can talk to Orders, Sellers, and AR services to respond to the same API endpoint.

Advantages

• we can add client-specific tweaks and hacks on BFF
• we can hide sensitive information from specific clients
• we can patch client-specific vulnerabilities on respective BFF
• we can pick the best communication stack for the client and BFFs
• we can have a general-purpose backend supporting all kinds of clients

Disadvantages

• a large chunk of code would be duplicated
• needs to support high fan-out, hence pick a stack that suits
• there is a slight increase in latency with the new network hop
• by adding BFFs we are adding more moving parts that need to be managed, maintained, monitored, and deployed

Adopting BFF

We should adopt BFF when

• the interface between different clients varies significantly
• the communication format/protocol is different from what your backend supports (e.g.: legacy integration might need XML while your backend serves JSON)

Here's the video of my explaining this in-depth ?? do check it out

Thank you so much for reading ?? If you found this helpful, do spread the word about it on social media; it would mean the world to me.

If you liked this short essay, you might also like my courses on

• System Design
• Hash Table Internals
• Designing Microservices
• GitHub Outage Dissections

I teach an interactive course on System Design where you'll learn how to intuitively design scalable systems. The course will help you

• become a better engineer
• ace your technical discussions
• get you acquainted with a spectrum of topics ranging from Storage Engines, High-throughput systems, to super-clever algorithms behind them.

I have compressed my ~10 years of work experience into this course, and aim to accelerate your engineering growth 100x. To date, the course is trusted by 800+ engineers from 11 different countries and here you can find what they say about the course.

Together, we will dissect and build some amazing systems and understand the intricate details. You can find the week-by-week curriculum and topics, testimonials, and other information at https://arpitbhayani.me/masterclass.