Decathlon established the Backend For Frontend (BFF) architectural pattern as a company-wide recommendation and provided guidelines for its adoption among engineering teams. The four-part series introduces the pattern and explores its benefits and potential pitfalls. The company also shares available alternatives to using the BFF pattern and reviews architectural considerations.
Decathlon established the Backend For Frontend (BFF) architectural pattern as a company-wide recommendation and provided guidelines for its adoption among engineering teams. The four-part series introduces the pattern and explores its benefits and potential pitfalls. The company also shares alternatives to using the BFF pattern and reviews architectural considerations.
Decathlon is a global retail company with a large technology platform that combines a customer-facing e-commerce platform with many back-office systems. With many web and mobile front-end applications, the company needed help to support the needs of different user experiences on top of its microservices-based backend architecture.
In response to these challenges, the company introduced a Backend For Frontend (BFF) pattern, where a frontend team owns and maintains a backend middleware service, handling orchestration and aggregation specific to supporting its needs. This new abstraction layer allows for a better separation of concerns and greater flexibility with reduced coupling between the system’s components.
Backend For Frontend Pattern (Source: Decathlon Digital Blog)
The BFF layer can accommodate many considerations, including data manipulation/adaptation (API data but also, for instance, image resizing), protocol flexibility (WebSockets, GraphQL, etc.), security (authentication), and support for server-side rendering (SSR). Introducing BFFs allows FE teams to avoid pushing data fetching, denormalization, and aggregation logic into the FE apps, which reduces the risk of spaghetti code in the frontend, network usage for code and data, JavaScript bundle sizes, and compute resources used in the browser.
