O que é BFF? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 02 Min 12 Seg Tempo restante da oferta: 11 02 12 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é BFF? [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) # O que é BFF? Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend). [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF.jpg) Com a popularização de arquiteturas baseadas em [microsserviços](https://www.treinaweb.com.br/blog/o-que-sao-microsservicos "microsserviços"), diferentes conjuntos de contextos e funcionalidades passaram a ser decompostos em unidades menores e autônomas, caracterizando cada uma destas unidades como um microsserviço. Por exemplo, podemos imaginar uma aplicação para gestão de contas bancárias. Poderíamos construir essa aplicação através da divisão de contextos menores e independentes, o que facilitaria a manutenção e o gerenciamento dos processos de escalabilidade de cada contexto. Como exemplo, vamos imaginar a seguinte divisão: ![Divisão de contextos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/divisao.jpg) Com essa divisão, podemos tratar cada um destes contextos como um serviço dedicado, isolado e independente, possibilitando o isolamento das regras de negócio de cada contexto e a criação de serviços mais coesos. Dessa maneira, podemos imaginar que nossa aplicação para gestão de contas bancárias poderia ser dividida em três microsserviços: microsserviço de extrato, microsserviço de gestão de saldo e microsserviço de usuários. Cada um desses serviços poderia funcionar de maneira completamente isolada dos demais serviços envolvidos, diminuindo o impacto no caso de falhas de um ou mais contextos. ![Microsserviços](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/microsservicos.png) Neste exemplo, provavelmente a aplicação bancária terá uma tela inicial onde serão exibidos dados que devem ser providos tanto pelo serviço de extrato quanto pelos serviços de saldo e usuário. E é aqui que o problema pode começar: como estamos utilizando microsserviços, estas informações não estão centralizadas em uma única fonte de dados, mas sim em três fontes de dados completamente distintas. ![Microsserviços para gerar a tela](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/microsservicos-tela.jpg) Para resolver esta situação, poderíamos delegar ao front-end o disparo em paralelo de três requests para cada um dos microsserviços com o intuito de obter as informações para serem renderizadas na tela. Até que é uma solução que resolve o problema de certa forma, porém, colocando uma série de problemas do ponto de vista arquitetural, como: • No caso de o front-end precisar fazer as três requisições em paralelo, há uma penalização do lado do cliente, pois é ele quem será responsável por realizar e coordenar estas três requisições para a montagem da tela ao invés de ser responsável unicamente por cuidar do processo de renderização da tela; • Requisições em geral (como requisições REST HTTP) geralmente possuem um custo técnico considerável. Lidar com o processo para realização de conexões HTTP de maneira segura é geralmente complexo, sendo assim se torna interessante realizar a menor quantidade de requisições possível. Há também o custo monetário nesta questão, já que se imaginarmos um usuário abrindo a tela inicial da conta bancária em uma conexão 4G, por exemplo, os três requests que precisarão serem feitos farão com que o aplicativo de conta bancária consuma mais rapidamente o pacote de dados do cliente (custo que poderia ser diminuído se uma única requisição for feita); • Pode haver também um desperdício de recursos neste cenário no caso de falhas, pois se um dos microsserviços não conseguir devolver a resposta esperada, a tela não poderá ser montada; porém, os demais requests continuarão a serem feitos de maneira desnecessária; • Há uma mistura de responsabilidades: o front-end deixa de ser responsável unicamente por lidar com os processos de renderização e passa a lidar também com o controle de fluxo para a comunicação com os diferentes microsserviços. Isso torna o front-end mais acoplado com o back-end e dificulta a realização de testes, além de poder causar um aumento no tempo necessário para que o front-end seja capaz de finalizar a renderização da tela inicial em nosso exemplo (devido à sobrecarga de responsabilidades). Mas então, como manter uma arquitetura baseada em microsserviços, porém, considerando que os dados necessários para renderização nos front-ends possam ser obtidos a partir de um ponto centralizado? [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ### O pattern BFF BFF é um acrônimo para **Backend For Frontend**. Trata-se de um componente de back-end que tem a missão de prover os dados necessários para cada front-end da aplicação, agindo como um “meio de campo” entre os front-ends e os diferentes back-ends que fazem parte de uma aplicação baseada em microsserviços. Tendo como base o exemplo anterior, ao invés do aplicativo de conta bancária realizar três requisições diferentes para cada um dos microsserviços para conseguir renderizar a página inicial, o aplicativo poderia fazer uma única requisição para um BFF. Este BFF é quem seria responsável na estrutura interna da aplicação por conhecer quais serviços precisam ser invocados para que os dados para montagem da tela inicial possam ser obtidos. ![Microsserviços com BFF](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/microsservicos-bff.jpg) Essa abordagem resolve os problemas que existiam em delegar a responsabilidade pelas requisições para o front-end, além de tornar as fontes de dados completamente transparentes para os componentes que precisarem consumir esta informação. Se em algum momento for necessário mover as informações de extrato para outro serviço (ou compor estas informações com chamadas para outros microsserviços), essa mudança fica completamente transparente para o aplicativo, pois basta realizar a alteração no BFF, fornecendo as mesmas informações esperadas pelo front-end a partir das novas interfaces. É importante ressaltar que os BFFs são altamente orientados às interfaces e jornadas de usuário: sua única responsabilidade deve ser prover os dados necessários para a renderização das interfaces em diferentes front-ends. Como diferentes front-ends podem ter necessidades de informação diferentes para cada cliente, é perfeitamente aceitável termos BFFs segregados até mesmo pelos conjuntos de diferentes clientes que irão consumir as informações. No exemplo da conta bancária, poderíamos ter um BFF voltado para a interface web (pois provavelmente precisaremos de mais informações para renderizar a interface web) e outro BFF voltado para a interface mobile (que provavelmente precisará de menos dados para que as telas possam ser renderizadas). ![Renderização no app e web](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/mobile-web.jpg) Esta possibilidade de segregação por tipo de cliente que o BFF dá é essencial para que seja evitado um efeito chamado over-fetching. Poderíamos criar um único BFF tanto para a interface web quanto para a interface mobile e deixar este BFF devolver as respostas da maneira como somente a interface web espera. Provavelmente, o payload necessário para a interface web é mais extenso, já que a interface web espera mais dados para que seja possível renderizar a página. No caso, bastaria ao front-end mobile consumir estas mesmas informações, desprezando os dados adicionais que seriam retornados – dados estes que seriam utilizados somente pela interface web. Nesta situação, aconteceria um over-fetching: um dos clientes (no caso, a interface mobile) iria receber muitos mais dados do que o necessário para que pudesse ser renderizada. O problema com o over-fetching é que ele acaba por penalizar os front-ends. No nosso exemplo, o aplicativo mobile precisaria de um esforço muito maior para entender uma resposta muito maior que a necessária devolvida pelo BFF unificado. Uma parte desse esforço seria em vão, já que uma parte destas informações processadas simplesmente seria descartada por não ser necessária na interface do aplicativo. Além disso, o aplicativo seria penalizado com uma resposta do BFF unificado muito maior do que o necessário, o que causaria um consumo maior de largura de banda e dados por parte do aplicativo. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-BLOG-2-2.jpg) ](https://api.whatsapp.com/send/?phone=5544988609539&text=Olá,+li+o+artigo+no+blog+e+gostaria+de+saber+mais+sobre+a+TreinaWeb.) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Back-end ](https://www.treinaweb.com.br/blog/tag/back-end) - [ #arquitetura ](https://www.treinaweb.com.br/blog/tag/arquitetura) - [ #microsserviços ](https://www.treinaweb.com.br/blog/tag/microsservicos) - [ #pattern ](https://www.treinaweb.com.br/blog/tag/pattern) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm)## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/sistemas-mensageria-min-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/11/Clean-Architecture-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que vem a ser a Clean Architecture? ](https://www.treinaweb.com.br/blog/o-que-vem-a-ser-a-clean-architecture) Confira nesse artigo uma introdução do que é a Clean Architecture, quais seus componentes e os benefícios ao utilizar essa arquitetura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/code-review-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 3 anos atrás ## [ O que é code review e quais são os benefícios? ](https://www.treinaweb.com.br/blog/o-que-e-code-review-e-quais-sao-os-beneficios) Confira neste artigo o que vem a ser o code review e quais são os benefícios de colocar isso em prática no seu time. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/closure-400x280.jpg) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 4 anos atrás ## [ O que é Closure ](https://www.treinaweb.com.br/blog/o-que-e-closure) Neste artigo, veremos o que é Closure e por que é tão importante entendê-lo para saber o que acontece por debaixo dos panos na linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/O-QUE-E-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html) No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ O que é e como começar com Go (Golang)? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-golang) Neste artigo vamos ter o contato inicial com a linguagem Go (Golag) e aprender um pouco sobre as suas características e como funciona a sua sintaxe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/EVENT-STORMING-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é o Event Storming? ](https://www.treinaweb.com.br/blog/o-que-e-o-event-storming) Em situações complexas, pode ser complicado enxergar as fronteiras entre domínios, subdomínios e bounded contexts. Para auxiliar nessa missão, existe uma técnica que pode ser utilizada: trata-se do Event Storming. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/o-que-preciso-conhecer-antes-de-iniciar-os-estudos-em-uma-linguagem-de-programacao-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ O que preciso conhecer antes de iniciar estudos em uma linguagem de programação? ](https://www.treinaweb.com.br/blog/o-que-preciso-conhecer-antes-de-iniciar-estudos-em-uma-linguagem-de-programacao) Essa é uma pergunta muito comum para quem deseja iniciar na área de programação. Por mais que desejamos já começar com uma linguagem e ver tudo acontecendo na tela, é necessário construir uma base antes. Por isso, existem alguns passos importantes antes mesmo de escolher uma linguagem de programação para estudar e é isso que veremos neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é FastAPI? ](https://www.treinaweb.com.br/blog/o-que-e-fastapi) Neste artigo vamos falar um pouco sobre o funcionamento, história e quais as principais características do framework web FastAPI. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 02min 12s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58