1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{2666:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return i(4173)}])},6242:function(e,t,i){"use strict";var a=i(1527);let n={logo:(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",height:"115",viewBox:"0 0 700 391",children:[(0,a.jsx)("path",{fill:"#fff",d:"M0 0h700v391H0z"}),(0,a.jsx)("path",{stroke:"#000",strokeOpacity:".8",d:"M87 55.063A68.499 68.499 0 0 1 203.937 103.5 68.502 68.502 0 0 1 87 151.937"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:"4",d:"M54.5 129.5H78m82.5 0H78M157 268H53.5c-13.2 0-19.5-9-19.5-19.5v-194c0-12 6.5-19.5 19.5-19.5H136M54.5 174H78m86 0H78m0 0v49h86M135 80H78v49.5"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:"4",d:"M133 129.5c13.902 0 26.265-10.227 26.265-24.2 0-13.973-11.269-25.3-25.171-25.3M55.5 129.5c-11.644 0-21.5 9.591-21.5 22.011S43.44 174 55.083 174M163.094 223c13.902 0 25.171-9.727 25.171-23.7 0-13.973-11.269-25.3-25.171-25.3"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:"4",d:"M157 268c39.166 0 74-28.219 74-67.456 0-39.236-31.75-71.044-70.917-71.044"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:"4",d:"M131 174c39.166 0 74-28.719 74-67.956C205 66.808 173.25 35 134.083 35"}),(0,a.jsx)("circle",{cx:"55.5",cy:"57.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"136.5",cy:"104.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"165.5",cy:"198.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"55.5",cy:"246.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"56.5",cy:"152.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("path",{stroke:"#000",strokeOpacity:".8",d:"M165.69 192v6.809M165.69 198.19V205M165.19 198.309H172M159 198.309h6.81M136.69 98v6.81M136.69 104.19V111M136.19 104.31H143M130 104.31h6.81"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:".5",d:"m136.823 103.823 47-47M165.823 197.823l46-46"}),(0,a.jsx)("path",{stroke:"#000",d:"M116.324 251.167a69.999 69.999 0 0 0 110.507-80.9 70.001 70.001 0 0 0-118.443-15.057 70.002 70.002 0 0 0-15.387 44.144M55.5 56v191"}),(0,a.jsx)("rect",{width:"196",height:"42",x:"250",y:"37",stroke:"#000",strokeWidth:"4",rx:"21"}),(0,a.jsx)("rect",{width:"230",height:"42",x:"292",y:"37",fill:"#fff",stroke:"#000",strokeWidth:"4",rx:"21",transform:"rotate(90 292 37)"}),(0,a.jsx)("rect",{width:"123",height:"42",x:"250",y:"160",stroke:"#000",strokeWidth:"4",rx:"21"}),(0,a.jsx)("circle",{cx:"425.5",cy:"58.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"271.5",cy:"57.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"271.5",cy:"244.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"269.5",cy:"180.5",r:"19",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"353.5",cy:"181.5",r:"19",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("path",{stroke:"#000",d:"M271.5 59v187M212 59.5h214M354 181.5H212"}),(0,a.jsx)("rect",{width:"196",height:"42",x:"468",y:"37",stroke:"#000",strokeWidth:"4",rx:"21"}),(0,a.jsx)("rect",{width:"230",height:"42",x:"510",y:"37",fill:"#fff",stroke:"#000",strokeWidth:"4",rx:"21",transform:"rotate(90 510 37)"}),(0,a.jsx)("rect",{width:"123",height:"42",x:"468",y:"160",stroke:"#000",strokeWidth:"4",rx:"21"}),(0,a.jsx)("circle",{cx:"643.5",cy:"58.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"489.5",cy:"57.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"489.5",cy:"244.5",r:"22",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"487.5",cy:"180.5",r:"19",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("circle",{cx:"571.5",cy:"181.5",r:"19",stroke:"#000",strokeOpacity:".8"}),(0,a.jsx)("path",{stroke:"#000",d:"M489.5 59v187M430 59.5h214M572 181.5H430"}),(0,a.jsx)("path",{fill:"#000",d:"M42.32 296.384c1.47-.051 4.256-.076 8.36-.076 4.155 0 6.967.025 8.436.076 5.219.101 9.323 1.495 12.312 4.18 2.99 2.685 4.484 6.409 4.484 11.172 0 3.395-.76 6.409-2.28 9.044-1.52 2.584-3.673 4.585-6.46 6.004-2.736 1.419-5.852 2.128-9.348 2.128h-4.94V347H42.32v-50.616Zm15.048 23.56c2.483 0 4.408-.709 5.776-2.128 1.419-1.419 2.128-3.344 2.128-5.776 0-4.459-2.457-6.688-7.372-6.688h-5.016v14.592h4.484Zm74.874-23.56h13.224L164.238 347h-11.4l-4.104-11.552h-19.912L124.946 347h-11.248l18.544-50.616Zm13.224 29.64-6.84-19.38-6.612 19.38h13.452Zm69.182-20.064h-13.832v-9.576h38.608v9.576h-13.68V347h-11.096v-41.04Zm83.662 0h-13.832v-9.576h38.608v9.576h-13.68V347H298.31v-41.04Zm71.163-9.576h30.78v9.576h-19.912v10.108h16.492v9.272h-16.492v12.084h19.912V347h-30.78v-50.616Zm78.757 0c1.52-.051 4.357-.076 8.512-.076 4.205 0 7.068.025 8.588.076 5.776.203 10.083 1.621 12.92 4.256 2.837 2.584 4.256 6.08 4.256 10.488 0 3.749-.963 6.941-2.888 9.576-1.875 2.584-4.509 4.281-7.904 5.092 1.064.861 2.153 2.052 3.268 3.572 1.115 1.469 2.66 3.775 4.636 6.916A215.393 215.393 0 0 1 485.926 347h-12.768l-8.588-15.96c-.912-1.672-1.748-2.711-2.508-3.116-.709-.456-1.799-.684-3.268-.684V347H448.23v-50.616Zm15.276 22.42c2.584 0 4.611-.659 6.08-1.976 1.52-1.317 2.28-3.091 2.28-5.32 0-2.027-.659-3.572-1.976-4.636s-3.243-1.596-5.776-1.596h-5.32v13.528h4.712Zm66.315-22.42h12.92l20.976 35.492v-35.492h10.108V347h-12.768l-21.128-35.72V347h-10.108v-50.616Zm106.761 51.604c-2.938 0-5.75-.329-8.436-.988-2.634-.659-4.914-1.545-6.84-2.66l.912-10.184a32.712 32.712 0 0 0 7.144 3.344c2.534.76 4.864 1.14 6.992 1.14 2.432 0 4.408-.507 5.928-1.52 1.52-1.013 2.28-2.356 2.28-4.028 0-1.368-.506-2.407-1.52-3.116-1.013-.76-2.609-1.571-4.788-2.432l-1.824-.76a15.113 15.113 0 0 0-.836-.304 11.084 11.084 0 0 0-1.064-.456c-2.837-1.165-5.117-2.255-6.84-3.268-1.722-1.064-3.217-2.533-4.484-4.408-1.216-1.875-1.824-4.307-1.824-7.296 0-4.864 1.647-8.689 4.94-11.476 3.294-2.787 7.879-4.18 13.756-4.18 4.459 0 9.019.912 13.68 2.736l-1.672 10.032a26.905 26.905 0 0 0-6.08-2.508c-2.128-.608-4.154-.912-6.08-.912-2.381 0-4.23.481-5.548 1.444-1.317.912-1.976 2.153-1.976 3.724 0 1.368.456 2.432 1.368 3.192.912.76 2.382 1.571 4.408 2.432l3.116 1.216c2.939 1.115 5.371 2.204 7.296 3.268 1.926 1.064 3.572 2.609 4.94 4.636 1.368 1.976 2.052 4.56 2.052 7.752 0 4.915-1.672 8.74-5.016 11.476-3.344 2.736-8.005 4.104-13.984 4.104Z"}),(0,a.jsx)("path",{stroke:"#000",strokeWidth:"3",d:"M35.5 287.5h629v69h-629z"})]})}),darkMode:!1,editLink:!1,feedback:!1,nextThemes:{defaultTheme:"light"},footer:{text:(0,a.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[(0,a.jsxs)("p",{children:[(0,a.jsx)("span",{children:"Related Projects: \xa0"}),(0,a.jsx)("a",{href:"https://open-federation.org",children:"Open Federation"})," \xa0 | \xa0"," ",(0,a.jsx)("a",{href:"https://graphql-api-gateway.com",children:"GraphQL API Gateway"})," ","\xa0 | \xa0 ",(0,a.jsx)("a",{href:"https://wundergraph.com",children:"WunderGraph"})]}),(0,a.jsxs)("p",{children:["\xa9 ",new Date().getFullYear()," bff-patterns.com. All rights reserved. \xa0 | \xa0",(0,a.jsx)("a",{href:"/terms-of-use",children:"Terms of Use"})," \xa0 | \xa0"," ",(0,a.jsx)("a",{href:"/privacy-policy",children:"Privacy Policy"})]})]})},head:()=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"57x57",href:"/apple-icon-57x57.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"60x60",href:"/apple-icon-60x60.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"72x72",href:"/apple-icon-72x72.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"76x76",href:"/apple-icon-76x76.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"114x114",href:"/apple-icon-114x114.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"120x120",href:"/apple-icon-120x120.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"144x144",href:"/apple-icon-144x144.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"152x152",href:"/apple-icon-152x152.png"}),(0,a.jsx)("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-icon-180x180.png"}),(0,a.jsx)("link",{rel:"icon",type:"image/png",sizes:"192x192",href:"/android-icon-192x192.png"}),(0,a.jsx)("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),(0,a.jsx)("link",{rel:"icon",type:"image/png",sizes:"96x96",href:"/favicon-96x96.png"}),(0,a.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),(0,a.jsx)("link",{rel:"manifest",href:"/manifest.json"}),(0,a.jsx)("meta",{name:"msapplication-TileColor",content:"#ffffff"}),(0,a.jsx)("meta",{name:"msapplication-TileImage",content:"/ms-icon-144x144.png"}),(0,a.jsx)("meta",{name:"theme-color",content:"#ffffff"}),(0,a.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}
1),(0,a.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,a.jsx)("meta",{name:"description",content:"BFF Patterns - Backend for Frontend"}),(0,a.jsx)("meta",{property:"og:title",content:"BFF Patterns - Backend for Frontend"}),(0,a.jsx)("meta",{property:"og:description",content:"BFF Patterns - Backend for Frontend"}),(0,a.jsx)("meta",{name:"apple-mobile-web-app-title",content:"BFF Patterns"}),(0,a.jsx)("script",{defer:!0,"data-domain":"bff-patterns.com",src:"https://plausible.io/js/script.js"}),(0,a.jsx)("link",{rel:"stylesheet",href:"/style.css"})]}),useNextSeoProps:()=>({titleTemplate:"%s - BFF Patterns"})};t.Z=n},4173:function(e,t,i){"use strict";i.r(t);var a=i(1527),n=i(680),r=i(9713),s=i(6242);i(8634);var o=i(6736);function c(e){let t=Object.assign({h1:"h1",p:"p",ol:"ol",li:"li",strong:"strong",h2:"h2",a:"a"},(0,o.ah)(),e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h1,{children:"Backend for Frontend"}),"\n",(0,a.jsx)(t.p,{children:"Backend for Frontend (BFF) is an effective solution for building composable architectures in software development. This pattern addresses the unique requirements of various client platforms, such as web, mobile, and IoT devices, while preserving the benefits of a microservices architecture."}),"\n",(0,a.jsx)(t.p,{children:"First introduced by Phil Calcado at SoundCloud, the BFF pattern suggests creating a custom backend service tailored for each client platform. These backend services act as intermediaries between frontends and underlying microservices, aggregating and transforming data to meet the specific requirements of each platform. As a result, frontend development is simplified, performance is improved, and maintainability is enhanced."}),"\n",(0,a.jsx)(t.p,{children:"The BFF pattern is often preferred over alternative solutions when building composable architectures due to several reasons:"}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Adaptability to Platform Requirements:"})," The BFF pattern allows developers to create backend services that cater to each platform's unique requirements, data formats, and interaction patterns, leading to better user experiences and more efficient resource usage."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Decoupling of Concerns:"})," By delegating data aggregation and transformation tasks to the backend, the BFF pattern promotes a clear separation of concerns between frontend and backend development."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Flexibility and Maintainability:"})," The BFF pattern enables independent development, deployment, and scaling of backend services for each client platform, fostering faster adaptation to changing requirements without affecting other platforms or services."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Optimized Performance:"})," By providing a dedicated backend for each frontend, the BFF pattern can optimize data aggregation, transformation, and caching, resulting in reduced latency, smaller payload sizes, and better overall performance."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Streamlined API Evolution:"})," The BFF pattern simplifies API evolution management, as developers can introduce new features, make changes, or deprecate outdated functionality without impacting other platforms."]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"While the BFF pattern offers numerous advantages, it may not be suitable for all situations. In cases where client platforms are highly similar or few in number, alternative solutions like API Gateway or GraphQL might be more appropriate. However, for diverse client platforms requiring tailored experiences, the BFF pattern proves to be a valuable asset in creating adaptable, maintainable, and performant composable architectures."}),"\n",(0,a.jsx)(t.h2,{id:"what-is-bff",children:"What is BFF?"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Backend for Frontend"})," (BFF) is a pattern that tailors APIs for different clients or user interfaces, such as web, mobile, or other platforms. Instead of having a single API for all clients, BFFs provide customized APIs that cater to the unique needs and requirements of each client, ensuring efficient communication and an optimized user experience."]}),"\n",(0,a.jsx)(t.h2,{id:"what-is-cbff",children:"What is cBFF?"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Composable Backend for Frontend"})," (cBFF) is a way of implementing the BFF patterns that leverages a API Repository to compose each BFF API by combining multiple Service APIs, Vendor APIs and data sources into a unified BFF API. This allows for a more flexible and scalable way of implementing BFFs when working towards a composable architecture."]}),"\n",(0,a.jsxs)(t.p,{children:["When using ",(0,a.jsx)(t.strong,{children:"BFF"})," on the site, we are referring to ",(0,a.jsx)(t.strong,{children:"cBFF"})," typically."]}),"\n",(0,a.jsx)(t.h2,{id:"how-can-i-implement-a-bff-architecture",children:"How can I implement a BFF Architecture?"}),"\n",(0,a.jsx)(t.p,{children:"You can create a BFF architecture by implementing a unique API for each service you want to expose to each client. This can be done by creating a unique API for each client, or by creating a unique API for each service and then composing those APIs into a single API for each client. The latter is the recommended approach, as it allows for a more flexible and scalable way of implementing BFFs when working towards a composable architecture."}),"\n",(0,a.jsx)(t.p,{children:"One tihng to be aware of is that you do not want to create an API per device (iOS, Android, Web) but rather per device type (Mobile, Web, Public API)."}),"\n",(0,a.jsx)(t.h2,{id:"when-should-i-start-using-a-bff",children:"When should I start using a BFF?"}),"\n",(0,a.jsxs)(t.p,{children:["You can simply start creating your API using ",(0,a.jsx)(t.a,{href:"wundergraph.com",children:"WunderGraph"})," and create multiple WunderNode configurations as your use case requires. This eliminates the need to create customized serivce level APIs or have cross client api duplication."]}),"\n",(0,a.jsx)(t.p,{children:"Alternatively, You would start using a BFF when you have multiple clients that need to consume the same service. This is typically the case when you have a web application and a mobile application that both need to consume the same service. To start, you would create an API for each service, and then compose those APIs into a single API for each client."})]})}i(6595);let l={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/index.mdx",route:"/",frontMatter:{title:"Introduction"},headings:[{depth:1,value:"Backend for Frontend",id:"backend-for-frontend"},{depth:2,value:"What is BFF?",id:"what-is-bff"},{depth:2,value:"What is cBFF?",id:"what-is-cbff"},{depth:2,value:"How can I implement a BFF Architecture?",id:"how-can-i-implement-a-bff-architecture"},{depth:2,value:"When should I start using a BFF?",id:"when-should-i-start-using-a-bff"}],pageMap:[{kind:"Meta",data:{index:"Introduction",patterns:"Patterns","use-cases":"Use Cases",considerations:"Considerations",terms:"Glossary of Terms","privacy-policy":{display:"hidden",title:"Website Privacy Policy"},"terms-of-use":{display:"hidden",title:"Website Terms of Use"}}},{kind:"MdxPage",name:"considerations",route:"/considerations"},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Introduction"}},{kind:"Folder",name:"patterns",route:"/patterns",children:[{kind:"MdxPage",name:"api-adapter",route:"/patterns/api-adapter"},{kind:"MdxPage",name:"api-composition",route:"/patterns/api-composition"},{kind:"MdxPage",name:"api-coordination",route:"/patterns/api-coordination"},{kind:"MdxPage",name:"api-evolution",route:"/patterns/api-evolution"},{kind:"MdxPage",name:"api-facade",route:"/patterns/api-facade"},{kind:"MdxPage",name:"api-lens",route:"/patterns/api-lens"},{kind:"MdxPage",name:"api-namespacing",route:"/patterns/api-namespacing"},{kind:"MdxPage",name:"api-sia",route:"/patterns/api-sia",frontMatter:{title:"API Single Integration Architecture"}},{kind:"MdxPage",name:"api-token-handler",route:"/patterns/api-token-handler"},{kind:"MdxPage",name:"api-transformation-bridge",route:"/patterns/api-transformation-bridge",frontMatter:{title:"API Transformation Bridge"}},{kind:"Meta",data:{"api-adapter":"API Adapter","api-composition":"API Composition","api-coordination":"API Coordination","api-evolution":"API Evolution","api-facade":"API Facade","a
1pi-lens":"API Lens","api-namespacing":"API Namespacing","api-sia":"API Single Integration Architecture","api-token-handler":"API Token Handler","api-transformation-bridge":"API Transformation Bridge"}}]},{kind:"MdxPage",name:"privacy-policy",route:"/privacy-policy",frontMatter:{title:"Website Privacy Policy",tags:[],date:"2023-04-13T00:00:00.000Z",description:"Website Privacy Policy.",sidebarLink:!1}},{kind:"MdxPage",name:"terms-of-use",route:"/terms-of-use",frontMatter:{title:"Website Terms of Use",tags:[],date:"2023-04-12T00:00:00.000Z",description:"The terms you agree to when accessing this website."}},{kind:"MdxPage",name:"terms",route:"/terms"},{kind:"Folder",name:"use-cases",route:"/use-cases",children:[{kind:"Meta",data:{"api-consolidation":"API Consolidation","universal-sdk":"Universal SDK","api-upscaling":"API Upscaling"}},{kind:"MdxPage",name:"api-consolidation",route:"/use-cases/api-consolidation"},{kind:"MdxPage",name:"api-upscaling",route:"/use-cases/api-upscaling"},{kind:"MdxPage",name:"universal-sdk",route:"/use-cases/universal-sdk"}]}],flexsearch:{codeblocks:!0},title:"Introduction"},pageNextRoute:"/",nextraLayout:r.ZP,themeConfig:s.Z};t.default=(0,n.j)(l)}},function(e){e.O(0,[774,35,888,179],function(){return e(e.s=2666)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.