Backend for Frontend Design Pattern
API Development

Backend for Frontend Design Pattern

improving end-user experience on User Interfaces by implementing the Backend for Frontend pattern

Gary Woodfine

Gary Woodfine

10 June 2023

The backend for frontend (BFF) is a software architecture pattern relevant for microservices & domain-driven design to simplify the communication between the frontend and backend. The pattern was first introduced by Phil Calcado and colleagues at SoundCloud in 2011, and has also been discussed further by Sam Newman in his book Building Microservices and Chris Richardson in his book Microservices Patterns.

The BFF pattern has also been referred to as the API Gateway pattern, but this is not strictly correct. The API Gateway pattern is a more general pattern that can be used to aggregate multiple backend services into a single API. The BFF pattern is a specific type of API Gateway that is used to aggregate multiple backend services into a single API for a specific frontend application or client.

The BFF pattern has been widely adopted by companies such as Netflix, Spotify, SoundCloud, Zalando, Amazon, Uber, and Twitter, and is often regarded as a key pattern for implementing microservices.

What is the Backend for Frontend (BFF) Pattern?

The BFF pattern is a software architecture pattern that is used to simplify the communication between the frontend and backend. The (BFF) pattern refers to having one backend per user experience, instead of having only one general-purpose API backend. This is because the traditional approach to accommodating more than one type of UI is to provide a single, server-side API, and add more functionality as required over time to support new types of mobile interaction.

The BFF is typically tightly coupled to a specific frontend application or client, and will typically be implemented by a dedicated team that are responsible for both backend and frontend development, therefor making it easier to implement, maintain, define and adapt the API contract between the frontend and backend.

We have briefly discussed the Backends for Frontends pattern in relation to the API Template Pack and it is a fairly common pattern that is used in within the Enterprise API space.

image

Need help with API Development?

threenine.co.uk can help you with your API Development. We have experience in building APIs for a range of clients, from small startups to large multi-national enterprises. We can help you with your API Development, whether you need a new API or need to improve an existing one.

Backend for Frontend (BFF) Pattern Example

Let's consider a simple example of a BFF pattern in action.

A Backend for Frontend (BFF) is a type of API gateway that is used to aggregate multiple backend services into a single API for a specific frontend applications or clients. For instance, a BFF can be used to aggregate multiple backend microservices into a single API for web and mobile applications.

A single BFF can be focused and targeted towards single User Interface (UI). As a result, it will help keep the codebase for the frontends simple and enabling a unified view of data through the BFF.

Backend for frontend pattern example

In the above example, we have a simple BFF that is used to aggregate data from two backend services. The BFF is used to aggregate data from the two backend services and provide a single API for the frontend application to consume.

Benefits of the Backend for Frontend (BFF) Pattern

  • Separation of concerns: Your application is easier to maintain when the front-end and back-end applications are disentangled.
  • Improved security: The BFF pattern can conceal sensitive information and send the response back to clients.
  • Shared team responsibility: As front-end and back-end applications are isolated; several teams may work on different aspects of the application. The front-end team doesn't have to wait till another team has completed the BFF code.
  • Better security: You can take advantage of the BFF pattern to hide certain sensitive information while sending the response back to the client. Additionally, this abstraction makes it extremely difficult for intruders, and your sensitive data won't be compromised.
  • Rapid development: The BFF pattern encourages having a back-end API for each client and having the front-end development team control the development, thus increasing development velocity.
  • Request aggregator: BFF can function as a request aggregator, reducing the chattiness of your client applications by acting as a front-end for downstream services.
  • Consistent error management: BFF can play a crucial role in implementing consistent error handling in your application.
  • Better Autonomy and Agility: Instead of waiting for the back-end team to build the API, the client development team has complete control, allowing it to be at the forefront of the delivery schedule.

When to use the Backend for Frontend (BFF) Pattern

  • The user interfaces need to consume data that requires a lot of aggregation on the back-end code.
  • When teams find themselves incorporating customizations to the general-purpose back-end code to serve multiple interfaces.
  • optimising the back-end code to satisfy the requirements of specific client interfaces.
Gary Woodfine
Gary Woodfine

Back-end software engineer

Experienced software developer, specialising in API Development, API Design API Strategy and Web Application Development. Helping companies thrive in the API economy by offering a range of consultancy services, training and mentoring.

Need help starting your API project?

We'll help you with your API First strategy, Design & Development