Backend for Frontend diagram template

Builds a new scene in your browser. Your existing scenes are not touched.

About this design

A mobile app, a web app and a partner API rarely want the same data in the same shape, and forcing one general API to serve them all leads to over-fetching and constant compromise. The Backend for Frontend pattern gives each client its own thin backend, owned by the team that owns the client. Each BFF calls the shared domain services, trims and combines their responses into exactly what its screen needs, and handles concerns specific to that client such as token handling or payload size on a slow connection. The domain services stay clean and reusable behind it. This template makes the shape obvious. Discuss the risk of duplicated logic across BFFs, when GraphQL is a better answer, caching responses per client type, and how to keep each BFF thin enough that business rules do not creep into it.

Diagram as text

This is the source of the diagram, in the ArchBoard diagram DSL. Paste it into Tools, Diagram from text to rebuild or change it.

title "Backend for frontend"
direction LR
browser "Web app" -> service webbff "Web BFF"
mobile "Mobile app" -> service mobilebff "Mobile BFF"
external "Partner" -> service partnerbff "Partner API"
webbff -> microservice catalog "Catalog service"
mobilebff -> catalog
partnerbff -> catalog
webbff -> microservice orders "Orders service"
mobilebff -> orders