O Papel do Back-end no Desenvolvimento Front-end: Introdução à Arquitetura BFF
Published: 2024-01-25 21:37:11

Como um entusiasta do front-end, sempre encontrei alegria e desafios em equal medida ao trabalhar com interfaces de usuário e a experiência do usuário. No entanto, recentemente me deparei com um desafio intrigante: mergulhar no mundo do back-end, especificamente no desenvolvimento de um BFF (Back For Front-end). Inicialmente, me vi confuso, questionando o que exatamente seria um BFF e como ele se encaixaria no ecossistema do desenvolvimento web. À medida que me aventurei neste novo território, percebi que estava não só expandindo minhas habilidades, mas também ganhando uma compreensão mais profunda de como o back-end pode potencializar e transformar experiências no front-end. Este artigo é um relato dessa jornada, uma introdução à arquitetura BFF e um olhar sobre como ela redefine o papel do back-end no desenvolvimento front-end.

## Mas afinal, o que é um BFF?

Acompanhe-me nesta exploração e vamos descobrir juntos. BFF é um acrônimo para Backend For Frontend. Essencialmente, 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. Funcionando como um 'meio de campo', ele facilita a comunicação entre os front-ends e os diferentes back-ends em uma aplicação baseada em microsserviços. Isso otimiza a comunicação e o processamento de dados entre o servidor e o cliente, simplificando o desenvolvimento no front-end e contribuindo para uma experiência de usuário mais fluida e eficiente.

A arquitetura BFF vai além de simplesmente fornecer dados; ela permite uma customização fina e adaptativa das respostas para diferentes tipos de front-end, seja um aplicativo móvel, uma web app ou até mesmo dispositivos IoT. Isso significa que, em vez de um front-end ter que se adaptar a uma variedade de serviços de back-end, é o BFF que se molda para atender às necessidades específicas de cada interface. Esta abordagem resulta em um código mais limpo e modular no front-end, reduzindo a complexidade e aumentando a eficiência do desenvolvimento. Além disso, o BFF pode desempenhar um papel vital na implementação de políticas de segurança, autenticação e autorização, agindo como um guardião que assegura que apenas os dados apropriados sejam entregues a cada cliente. A adesão à arquitetura BFF não apenas melhora o desempenho e a usabilidade das aplicações, mas também potencializa uma arquitetura de software mais sustentável e escalável a longo prazo.

## Mas onde exatamente o BFF se encaixa no panorama do desenvolvimento de software? 

Agora que compreendemos o que é um BFF, seu propósito e os problemas que ele resolve, vamos ilustrar seu uso com um exemplo concreto. Imaginemos, por exemplo, uma aplicação para gestão de contas bancárias. Esta aplicação poderia ser estruturada dividindo-se em contextos menores e independentes, o que facilita a manutenção e aprimora o gerenciamento da escalabilidade de cada parte do sistema.

Vamos imaginar a seguinte divisão:


![Um retângulo com o título conta bancaria e dentro dele três eclipses representando a conta, saldo e usuário](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujjj9zup15yupa6etv71.png)

Nessa estrutura, cada aspecto da aplicação é tratado como um serviço distinto, caracterizado por sua autonomia e independência. Isso permite o isolamento efetivo das regras de negócio pertinentes a cada área, resultando em serviços mais focados e coesos.

Neste cenário, a nossa aplicação de gestão de contas bancárias poderia ser segmentada em três principais microsserviços: um para o extrato bancário, outro dedicado à gestão de saldo e um terceiro para gerenciamento de usuários. Essa separação permite que cada microsserviço opere de maneira independente, o que é uma grande vantagem, especialmente em termos de estabilidade e manutenção. Se um serviço enfrenta problemas, isso não afeta diretamente os outros, minimizando interrupções e melhorando a resiliência geral do sistema.


![Um retângulo com o título conta bancaria e dentro dele três eclipses representando a conta, saldo e usuário e cada eclipse com uma seta que aponta para um retângulo que representa o banco de dados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxowqn1941ev58memfko.png)

Neste exemplo de aplicação bancária, consideremos a tela inicial onde informações cruciais são exibidas - informações estas que são fornecidas por diferentes serviços: extrato, saldo e usuário. Aqui surge um desafio comum em arquiteturas baseadas em microsserviços: ao invés de uma fonte de dados centralizada, temos dados vitais dispersos em três fontes distintas. Cada serviço opera independentemente, armazenando e gerenciando suas próprias informações, o que pode complicar a coleta e a exibição harmoniosa desses dados na interface do usuário.

Uma abordagem para lidar com os dados dispersos em nossa aplicação bancária seria fazer com que o front-end execute simultaneamente três requisições para os respectivos microsserviços, buscando as informações necessárias para a tela inicial. Embora esta solução possa parecer viável, ela introduz uma série de complicações arquiteturais.

Primeiramente, isso resulta em uma confusão de responsabilidades: o front-end, que deveria focar apenas na renderização, acaba assumindo também o controle de fluxo das comunicações com os diversos microsserviços. Isso não só aumenta o acoplamento entre front-end e back-end, dificultando os testes, como também pode retardar a renderização da tela inicial devido à sobrecarga de tarefas.

Além disso, ao exigir que o front-end gerencie três requisições paralelas, impõe-se uma carga adicional ao lado do cliente. Ele precisa não apenas renderizar a tela, mas também coordenar essas múltiplas requisições, o que pode afetar a performance e a eficiência da aplicação.

Aqui é onde o BFF se torna essencial. Em vez de o aplicativo bancário realizar três requisições separadas para cada microsserviço a fim de construir a página inicial, ele poderia simplesmente fazer uma única requisição a um BFF. O BFF, então, se encarrega de comunicar-se com os microsserviços necessários, coletando e compilando os dados para a montagem da tela.

Esta solução supera os desafios de sobrecarregar o front-end com múltiplas requisições. Ela mantém as fontes de dados ocultas e indistintas para os componentes de front-end, simplificando a estrutura de consumo de dados.

Além disso, se for necessário reestruturar onde os dados, como os detalhes do extrato, são armazenados ou combiná-los com informações de outros microsserviços, essa mudança ocorre de forma transparente para o aplicativo. O ajuste é feito apenas no BFF, que continua entregando as informações ao front-end da mesma forma, independentemente das mudanças internas nos serviços de back-end.


![Um retângulo com o título conta bancaria e dentro dele três eclipses representando a conta, saldo e usuário e cada eclipse com uma seta que aponta para um retângulo que representa o banco de dados e um retângulo representando o BFF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqdqc26ah8x1jqpn37nx.png)

## Considerações Finais: Navegando Pelos Detalhes e Desafios do BFF

Os BFFs são essenciais para fornecer dados específicos para diferentes interfaces de usuário, como web e mobile, em uma aplicação. Eles permitem customizar as informações conforme a necessidade de cada cliente, podendo haver BFFs distintos para diferentes tipos de front-end. No exemplo de uma aplicação bancária, um BFF poderia ser projetado especificamente para a web, necessitando de mais dados, enquanto outro seria para mobile, com menos dados requeridos. No entanto, usar um BFF único para ambas as interfaces pode levar ao over-fetching, onde, por exemplo, a interface mobile recebe mais dados do que necessita. Isso resulta em esforços desnecessários para processar dados irrelevantes e um consumo excessivo de banda larga e dados, afetando a eficiência do aplicativo.

## Conclusão

Espero que este artigo tenha sido útil e inspirador para você. Embora explorar o back-end tenha sido um desafio, a jornada tem sido extremamente gratificante e cheia de aprendizados. Nos artigos futuros, estou ansioso para compartilhar mais de minhas experiências com vocês, continuando a aprimorar nosso conhecimento juntos. Em breve, trarei também conteúdo sobre acessibilidade na web, um tema igualmente importante e fascinante. Agradeço a todos que acompanharam este artigo. Estou sempre aberto a sugestões e dúvidas; afinal, o aprendizado é um caminho que trilhamos juntos. Até a próxima, e que a força esteja com você na sua própria aventura no mundo do desenvolvimento!

## Referências

- [The Back-end for Front-end Pattern (BFF)](https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html)

- [BFF Patterns](https://bff-patterns.com/)

- [Back-end for Front-end Connectorto Reduce Development Time: A Proof of Concept Project]
(https://www.diva-portal.org/smash/record.jsf?pid=diva2%3A1776124&dswid=612)