Backend For Frontend (BFF)

In the world of software development, the terms “frontend” and “backend” refer to the separation of concerns between the presentation layer of a website or application and the underlying logic and data storage. The frontend, or client-side, is responsible for how the application looks and feels to the user, while the backend, or server-side, handles the data processing and business logic.

While the separation of frontend and backend can be beneficial for building scalable and maintainable applications, it can also introduce complexity when it comes to communication between the two layers. This is where the concept of “backend for frontend” (BFF) comes into play.

A backend for frontend is essentially a middleman between the frontend and the various backend services of an application. It acts as a facade, exposing a unified and simplified interface for the frontend to consume, while abstracting away the complexity of the underlying backend systems.

The Flow

The frontend of a web application (such as a mobile app or a web browser) would send requests to the BFF, which acts as a bridge between the frontend and the overall backend system. The BFF would then retrieve the necessary data from the backend and return it to the frontend in a format that is easily consumable by the UI.

Here is a simple example of how a BFF might fit into the architecture of a web application:

Frontend (Mobile App or Web Browser) -> BFF -> Backend (Databases, Microservices, etc.)

The BFF sits between the frontend and the backend and handles communication between the two. It can also perform tasks such as data transformation, authentication, and authorization.

Advantages

There are several benefits to using a backend for frontend:

• Reduced complexity: By providing a single point of entry for the frontend, a backend for frontend can greatly simplify the communication between the frontend and the various backend services. This makes it easier to add new features and maintain the application.
• Improved performance: A backend for frontend can optimize the communication between the frontend and the backend by reducing the number of round trips and by caching frequently used data. It can act as a layer of abstraction that simplifies the data model for the frontend and only retrieves the necessary data. This can improve the overall performance and user experience of the application.
• Enhanced security: By acting as a gatekeeper between the frontend and the backend, a backend for frontend can help to secure the application by enforcing authentication and authorization policies. It can also help to prevent cross-site scripting (XSS) attacks by sanitizing and validating user input.

There are several considerations to keep in mind when implementing a BFF, such as ensuring that the backend and frontend are loosely coupled, making sure that the BFF is maintainable and scalable, and properly handling errors and exceptions.

Using General Architecture

Generally a general web architecture we see all the frontend application like desktop, android, ios making multiple APIs and then binding them together at the frontend to serve a single purpose. For example in the above image we can see that each frotend calls 3 APIs like getProducts, getProductMetadat and getProductThumbnail to show the list of products in the UI.

To serve a single purpose to show list of products we have these many APIs, now just imagine in the whole applications there would be much more API calls and API bindings which adds the unnnecessary complexity in the frontend.

Using BFF Architecture

To help us from this complexity BFF comes into picture, for example in the above image we can see that all the binding logic is now moved to the BFF layer. So all the frontend apps like desktop, andoid and ios will just call a single API i.e. getProducts from the BFF server. BFF server on receing the request will fetch all the details using multiple APIs like getProducts, getProductMetadat and getProductThumbnail then will do all the necessary binding and ship it back to the frontend Apps as a single response.

You see how single the frontend API calls look now, also this reduces the rountrip time for API calls and makes the overall response time much better for frontend Apps.