{"id":44,"date":"2023-06-03T11:37:00","date_gmt":"2023-06-03T14:37:00","guid":{"rendered":"https:\/\/dumba.dev.br\/?p=44"},"modified":"2026-01-13T11:41:42","modified_gmt":"2026-01-13T14:41:42","slug":"bff-o-melhor-amigo-do-seu-frontend","status":"publish","type":"post","link":"https:\/\/dumba.dev.br\/index.php\/2023\/06\/03\/bff-o-melhor-amigo-do-seu-frontend\/","title":{"rendered":"BFF &#8211; O melhor amigo do seu Frontend"},"content":{"rendered":"\n<p>Atualmente, com a necessidade de solu\u00e7\u00f5es mais escal\u00e1veis e distribu\u00eddas tem se utilizado a arquitetura de&nbsp;<a href=\"https:\/\/cloud.google.com\/learn\/what-is-microservices-architecture?hl=pt-br\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Microsservi\u00e7os<\/strong><\/a>, ou seja, estruturas com contextos m\u00ednimos e independentes.&nbsp;<\/p>\n\n\n\n<p>Imagine a estrutura para finalizar a compra de uma aplica\u00e7\u00e3o de Ecommerce. Ter\u00edamos a parte de identifica\u00e7\u00e3o do usu\u00e1rio, produtos e pagamento. Isso em uma estrutura de Microservices ficaria mais ou menos dessa forma.<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"444\" src=\"http:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-1.png\" alt=\"\" class=\"wp-image-54\" srcset=\"https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-1.png 705w, https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-1-300x189.png 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<p><strong>Mas qual seria o problema dessa estrutura?<br><\/strong>Dessa forma funciona, por\u00e9m\u2026&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>O seu APP teria que fazer tr\u00eas requisi\u00e7\u00f5es para o servidor e caso tenha uma internet pode consumir mais de seu pacote de dados.\u00a0<\/li>\n\n\n\n<li>O Front-end teria mais responsabilidades, tendo que lidar tamb\u00e9m com controle de fluxo de comunica\u00e7\u00e3o com os Microservices.\u00a0<\/li>\n\n\n\n<li>Consumo de recursos desnecess\u00e1rios, voltemos a banda, se um Microservice cair vai processar os outros sem necessidade.<\/li>\n\n\n\n<li>APIS n\u00e3o customizadas podem apresentar contratos com informa\u00e7\u00f5es a mais do que se realmente precisa (Over Fetching), causando desperd\u00edcio de trafego de dados.<\/li>\n\n\n\n<li>Qualquer altera\u00e7\u00e3o nos Microservices, seja por exemplo para atender um Site Web pode quebrar seu APP.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ent\u00e3o o que \u00e9 o BFF?<\/h3>\n\n\n\n<p>BFF significa,&nbsp;<strong><a href=\"https:\/\/samnewman.io\/patterns\/architectural\/bff\/\" target=\"_blank\" rel=\"noreferrer noopener\">Backend For Frontend<\/a>,&nbsp;<\/strong>ou seja, um Microservice respons\u00e1vel em prover os dados espec\u00edficos de um caso de uso para seu Frontend.&nbsp;<\/p>\n\n\n\n<p>Esse padr\u00e3o foi descrito por Sam Newman, percebendo que para diferentes dispositivos (APP, Site Web, Desktop) temos diferentes apresenta\u00e7\u00f5es de dados.&nbsp;<\/p>\n\n\n\n<p>Veja como ficaria o exemplo anterior.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"396\" src=\"http:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-2.png\" alt=\"\" class=\"wp-image-53\" srcset=\"https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-2.png 768w, https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-2-300x155.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div>\n\n\n<p>Nesse cen\u00e1rio, colocamos um BFF para orquestrar todas as requisi\u00e7\u00f5es que a pagina de Compra necessita. Ao inv\u00e9s de tr\u00eas chamadas para o servidor temos somente uma.<\/p>\n\n\n\n<p>Assim temos:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maior resili\u00eancia, ja que ao mudar qualquer informa\u00e7\u00e3o ou trocar uma fonte de informa\u00e7\u00e3o nos Microservices, mudamos somente o BFF.\u00a0<\/li>\n\n\n\n<li>Menos responsabilidade no Frontend com rela\u00e7\u00e3o as requisi\u00e7\u00f5es.\u00a0<\/li>\n\n\n\n<li>Diferentes Frontend podem precisar de informa\u00e7\u00f5es diferentes, como APP ou um Site Web, assim cada BFF fornece as informa\u00e7\u00f5es necess\u00e1rias para cada Front evitando o Over Fetching.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"641\" src=\"http:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-3.png\" alt=\"\" class=\"wp-image-52\" srcset=\"https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-3.png 768w, https:\/\/dumba.dev.br\/wp-content\/uploads\/2026\/01\/bff-1-3-300x250.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Lembrando sempre que \u00e9 bom avaliar cada caso. Nenhuma arquitetura resolve todos os problemas. Adicionar um BFF \u00e9 adicionar mais complexidade e complexidade \u00e9 custo.<\/strong><\/p>\n\n\n\n<p>N\u00e3o concorda? Manda ai seu argumento.\u00a0<br><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Software perfeito \u00e9 o que deixa seu cliente satisfeito.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Bibliografia<\/h3>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/samnewman.io\/patterns\/architectural\/bff\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Atualmente, com a necessidade de solu\u00e7\u00f5es mais escal\u00e1veis e distribu\u00eddas tem se utilizado a arquitetura de&nbsp;Microsservi\u00e7os, ou seja, estruturas com contextos m\u00ednimos e independentes.&nbsp; Imagine a estrutura para finalizar a compra de uma aplica\u00e7\u00e3o de Ecommerce. Ter\u00edamos a parte de identifica\u00e7\u00e3o do usu\u00e1rio, produtos e pagamento. Isso em uma estrutura de Microservices ficaria mais ou [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":51,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,7],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arquitetura","category-microsservicos"],"_links":{"self":[{"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":1,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/posts\/44\/revisions\/56"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/media\/51"}],"wp:attachment":[{"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dumba.dev.br\/index.php\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}