{"id":30388,"date":"2024-10-14T17:30:54","date_gmt":"2024-10-14T17:30:54","guid":{"rendered":"https:\/\/building.nubank.com\/?p=30388"},"modified":"2024-10-14T17:31:40","modified_gmt":"2024-10-14T17:31:40","slug":"do-micro-ao-macro-escalando-front-ends","status":"publish","type":"post","link":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/","title":{"rendered":"Do micro ao macro: escalando front-ends"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Voc\u00ea est\u00e1 enfrentando desafios ao escalar seu front-end para atender a um n\u00famero crescente de usu\u00e1rios? Com o aumento da complexidade das aplica\u00e7\u00f5es web modernas, estrat\u00e9gias como micro front-ends, monoreposit\u00f3rios, gerenciamento de estados globais e otimiza\u00e7\u00e3o de cache s\u00e3o essenciais.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, exploramos as melhores pr\u00e1ticas para escalar aplica\u00e7\u00f5es front-end, discutindo como implementar micro front-ends, gerenciar vers\u00f5es em monoreposit\u00f3rios, aplicar estrat\u00e9gias eficazes de cache e manter estados globais de forma eficiente.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descubra como o Nubank est\u00e1 superando os desafios de escalabilidade no front-end e como voc\u00ea pode aplicar essas abordagens para construir interfaces de usu\u00e1rio \u00e1geis, responsivas e f\u00e1ceis de manter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O desafio da escala<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Empresas como o Nubank enfrentam desafios \u00fanicos. Com mais de 100 milh\u00f5es de clientes no Brasil, M\u00e9xico e Col\u00f4mbia, lidar com sistemas distribu\u00eddos de larga escala n\u00e3o \u00e9 apenas uma necessidade, mas uma obriga\u00e7\u00e3o. A complexidade de gerenciar transa\u00e7\u00f5es como o PIX, garantir a estabilidade dos servi\u00e7os e proporcionar uma experi\u00eancia consistente ao usu\u00e1rio requer solu\u00e7\u00f5es inovadoras.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, trabalhar com tecnologias avan\u00e7adas como Clojure e Datomic\u2014cujo desenvolvimento \u00e9 influenciado por engenheiros dentro do pr\u00f3prio Nubank\u2014adiciona camadas adicionais de complexidade e oportunidade. Essas tecnologias n\u00e3o s\u00e3o apenas ferramentas; s\u00e3o parte integral da estrat\u00e9gia de escalabilidade e inova\u00e7\u00e3o cont\u00ednua.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Micro front-ends: dividindo para conquistar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A arquitetura de <strong>micro front-ends<\/strong> emergiu como uma solu\u00e7\u00e3o para muitos dos desafios enfrentados por grandes equipes de desenvolvimento. Mas o que exatamente s\u00e3o micro front-ends?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">O que s\u00e3o (e o que n\u00e3o s\u00e3o) micro front-ends<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Micro front-ends s\u00e3o uma extens\u00e3o do conceito de microservi\u00e7os para o front-end. Eles permitem que diferentes equipes desenvolvam, implementem e mantenham partes distintas da interface do usu\u00e1rio de forma independente.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso significa que cada equipe pode trabalhar em seu pr\u00f3prio ritmo, escolher suas pr\u00f3prias tecnologias (at\u00e9 certo ponto) e implantar atualiza\u00e7\u00f5es sem impactar o sistema como um todo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 importante destacar que micro front-ends n\u00e3o s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pacotes NPM ou m\u00f3dulos monol\u00edticos: <\/strong>simplesmente dividir um monolito em pacotes n\u00e3o oferece os benef\u00edcios de implanta\u00e7\u00e3o independente ou isolamento de equipes.<\/li>\n\n\n\n<li><strong>Aplicativos separados para o usu\u00e1rio final:<\/strong> a experi\u00eancia do usu\u00e1rio deve ser unificada. N\u00e3o estamos falando de v\u00e1rios aplicativos distintos, mas de uma \u00fanica aplica\u00e7\u00e3o composta por v\u00e1rias partes aut\u00f4nomas.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Benef\u00edcios dos micro front-ends<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Implanta\u00e7\u00f5es independentes<\/strong>: equipes podem implementar atualiza\u00e7\u00f5es sem coordenar com toda a organiza\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Escalabilidade de equipes<\/strong>: novos desenvolvedores podem ser incorporados mais rapidamente, focando em uma parte espec\u00edfica do sistema.<\/li>\n\n\n\n<li><strong>Isolamento de falhas<\/strong>: problemas em um micro front-end n\u00e3o necessariamente afetam todo o aplicativo.<\/li>\n\n\n\n<li><strong>Flexibilidade tecnol\u00f3gica<\/strong>: possibilidade de utilizar diferentes frameworks ou bibliotecas, embora isso deva ser feito com cautela para evitar sobrecarga no cliente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Custos e considera\u00e7\u00f5es<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Setup inicial complexo<\/strong>: implementar micro front-ends exige um planejamento cuidadoso e uma configura\u00e7\u00e3o inicial robusta.<\/li>\n\n\n\n<li><strong>Coes\u00e3o da experi\u00eancia do usu\u00e1rio<\/strong>: garantir que a interface seja consistente e coesa \u00e9 um desafio quando m\u00faltiplas equipes est\u00e3o envolvidas.<\/li>\n\n\n\n<li><strong>Sobrecarga de performance<\/strong>: o uso de diferentes frameworks pode aumentar o tamanho do bundle e afetar o desempenho.<\/li>\n\n\n\n<li><strong>Observabilidade e depura\u00e7\u00e3o<\/strong>: monitorar e depurar uma aplica\u00e7\u00e3o composta por m\u00faltiplos micro front-ends requer ferramentas e pr\u00e1ticas avan\u00e7adas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estrat\u00e9gias de implementa\u00e7\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Existem v\u00e1rias abordagens para implementar micro front-ends:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Composi\u00e7\u00e3o no lado do cliente<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 a abordagem mais comum, onde a integra\u00e7\u00e3o dos micro front-ends ocorre no navegador do usu\u00e1rio. Tecnologias como Web Components, Module Federation (Webpack 5) e frameworks como Single SPA facilitam essa composi\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Composi\u00e7\u00e3o no servidor ou CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A montagem dos micro front-ends ocorre antes de chegar ao cliente, seja no servidor ou na CDN. Ferramentas e t\u00e9cnicas como Edge Side Includes (ESI) podem ser utilizadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comunica\u00e7\u00e3o entre micro front-ends<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A comunica\u00e7\u00e3o eficiente \u00e9 essencial. Recomenda-se o uso de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eventos customizados: <\/strong>permitem que micro front-ends se comuniquem sem depender diretamente um do outro.<\/li>\n\n\n\n<li><strong>Estados compartilhados via APIs do navegador: <\/strong>como Local Storage ou IndexedDB.<\/li>\n\n\n\n<li><strong>Evitar depend\u00eancias globais excessivas: <\/strong>minimiza o acoplamento entre os componentes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Controle de vers\u00e3o em monoreposit\u00f3rios<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gerenciar vers\u00f5es em um monoreposit\u00f3rio pode ser um desafio, especialmente quando m\u00faltiplas equipes est\u00e3o trabalhando em diferentes partes do sistema. Aqui est\u00e3o algumas pr\u00e1ticas para lidar com isso:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Versionamento individual de pacotes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ferramentas como Lerna ou Nx permitem que voc\u00ea gerencie vers\u00f5es individuais de pacotes dentro de um monoreposit\u00f3rio. Isso possibilita que cada equipe controle as vers\u00f5es de seus pr\u00f3prios componentes ou m\u00f3dulos, mantendo a independ\u00eancia e facilitando a coordena\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Evitando subm\u00f3dulos git<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Embora subm\u00f3dulos Git possam parecer uma solu\u00e7\u00e3o, eles geralmente introduzem complexidade adicional. Em vez disso, utilizar workspaces do NPM ou Yarn pode simplificar o gerenciamento de depend\u00eancias internas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benef\u00edcios do monoreposit\u00f3rio<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consist\u00eancia de c\u00f3digo: <\/strong>Facilita a padroniza\u00e7\u00e3o e reutiliza\u00e7\u00e3o de c\u00f3digo.<\/li>\n\n\n\n<li><strong>Visibilidade: <\/strong>todas as equipes t\u00eam acesso ao c\u00f3digo-fonte completo, promovendo colabora\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Automa\u00e7\u00e3o:<\/strong> facilita a configura\u00e7\u00e3o de pipelines de CI\/CD que abrangem todo o sistema.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estrat\u00e9gias de cache para carregamento de bundles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A efici\u00eancia no carregamento de recursos \u00e9 crucial para o desempenho da aplica\u00e7\u00e3o. Estrat\u00e9gias de cache bem implementadas podem melhorar significativamente a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cache de recursos compartilhados<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ao usar tecnologias como Module Federation, \u00e9 poss\u00edvel compartilhar depend\u00eancias comuns entre diferentes micro front-ends, evitando downloads redundantes. Para isso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Defina m\u00f3dulos compartilhados:<\/strong> configure quais bibliotecas ou frameworks devem ser compartilhados para evitar m\u00faltiplas vers\u00f5es no cliente.<\/li>\n\n\n\n<li><strong>Vers\u00f5es compat\u00edveis:<\/strong> certifique-se de que as depend\u00eancias compartilhadas s\u00e3o compat\u00edveis entre si para evitar conflitos.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cache no n\u00edvel de CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizar uma Content Delivery Network (CDN) permite que recursos est\u00e1ticos sejam entregues mais rapidamente aos usu\u00e1rios, aproveitando o cache distribu\u00eddo.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Configura\u00e7\u00f5es de cache-control: <\/strong>ajuste os cabe\u00e7alhos HTTP para controlar como e por quanto tempo os recursos devem ser armazenados em cache.<\/li>\n\n\n\n<li><strong>Invalidando cache: <\/strong>tenha estrat\u00e9gias para invalidar ou atualizar o cache quando novas vers\u00f5es dos recursos forem implantadas.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cache no navegador<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Service workers:<\/strong> implementar cache via Service Workers para um controle mais granular sobre quais recursos s\u00e3o armazenados e quando s\u00e3o atualizados.<\/li>\n\n\n\n<li><strong>Preloading e prefetching:<\/strong> antecipar quais recursos ser\u00e3o necess\u00e1rios e carreg\u00e1-los antecipadamente.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Gerenciando estados globais em aplica\u00e7\u00f5es host<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Manter um estado global consistente em uma aplica\u00e7\u00e3o composta por m\u00faltiplos micro front-ends \u00e9 um desafio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estrat\u00e9gias recomendadas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eventos personalizados:<\/strong> utilize o sistema de eventos do navegador para comunica\u00e7\u00e3o entre micro front-ends sem criar depend\u00eancias r\u00edgidas.<\/li>\n\n\n\n<li><strong>Armazenamento local compartilhado:<\/strong> APIs como Local Storage ou IndexedDB podem servir como meio de compartilhar estado global.<\/li>\n\n\n\n<li><strong>Contextos globais:<\/strong> em frameworks como React, pode-se usar Context API, mas deve-se ter cuidado para n\u00e3o introduzir acoplamento indesejado.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Boas pr\u00e1ticas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Isolamento de dom\u00ednios:<\/strong> cada micro front-end deve ser respons\u00e1vel por seu pr\u00f3prio estado local e apenas interagir com o estado global quando necess\u00e1rio.<\/li>\n\n\n\n<li><strong>Contratos bem definidos: <\/strong>estabele\u00e7a interfaces claras para a comunica\u00e7\u00e3o entre componentes, facilitando a manuten\u00e7\u00e3o e evolu\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Padroniza\u00e7\u00e3o e equipes de plataforma<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Enquanto micro front-ends abordam a escalabilidade t\u00e9cnica, a padroniza\u00e7\u00e3o de c\u00f3digo e a exist\u00eancia de equipes de plataforma s\u00e3o cruciais para a escalabilidade humana das equipes de desenvolvimento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">O papel das equipes de plataforma<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Defini\u00e7\u00e3o de bons padr\u00f5es: <\/strong>criar e manter padr\u00f5es de c\u00f3digo que facilitam o trabalho das equipes.<\/li>\n\n\n\n<li><strong>Ferramentas e infraestrutura: <\/strong>desenvolver ferramentas que automatizam tarefas repetitivas e garantem a qualidade do c\u00f3digo.<\/li>\n\n\n\n<li><strong>Facilitar a colabora\u00e7\u00e3o:<\/strong> garantir que diferentes equipes possam trabalhar juntas de forma eficiente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Import\u00e2ncia da padroniza\u00e7\u00e3o<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Onboarding mais r\u00e1pido:<\/strong> novos desenvolvedores se adaptam mais rapidamente a um c\u00f3digo padronizado.<\/li>\n\n\n\n<li><strong>Qualidade consistente:<\/strong> reduz a incid\u00eancia de bugs e problemas de manuten\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Facilita a revis\u00e3o de c\u00f3digo<\/strong>: code reviews s\u00e3o mais eficazes quando h\u00e1 um estilo consistente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Evitando complexidade desnecess\u00e1ria<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplicidade como padr\u00e3o:<\/strong> optar por solu\u00e7\u00f5es simples que resolvem os problemas sem adicionar complexidade excessiva.<\/li>\n\n\n\n<li><strong>Decis\u00f5es baseadas em valor:<\/strong> implementar tecnologias e padr\u00f5es que trazem benef\u00edcios claros para o neg\u00f3cio e para a equipe.<\/li>\n\n\n\n<li><strong>Cuidado com o &#8220;hype&#8221; tecnol\u00f3gico:<\/strong> nem toda nova biblioteca ou framework \u00e9 adequada para o contexto da sua aplica\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Leis organizacionais aplicadas ao c\u00f3digo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A Lei de Conway afirma que a estrutura de um sistema reflete a estrutura da organiza\u00e7\u00e3o que o desenvolve. Portanto, alinhar a arquitetura t\u00e9cnica com a organiza\u00e7\u00e3o das equipes n\u00e3o \u00e9 apenas ben\u00e9fico, mas essencial.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Estruturas alinhadas:<\/strong> equipes aut\u00f4nomas respons\u00e1veis por micro front-ends espec\u00edficos refletem uma arquitetura modular.<\/li>\n\n\n\n<li><strong>Comunica\u00e7\u00e3o eficiente:<\/strong> menos depend\u00eancias entre equipes reduzem a necessidade de comunica\u00e7\u00e3o constante e alinhamentos complexos.<\/li>\n\n\n\n<li><strong>Evolu\u00e7\u00e3o cont\u00ednua:<\/strong> uma organiza\u00e7\u00e3o flex\u00edvel permite que a arquitetura evolua com as necessidades do neg\u00f3cio.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Como come\u00e7ar<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Projeto piloto:<\/strong> implementar um micro front-end em uma parte n\u00e3o cr\u00edtica do sistema para entender os desafios e benef\u00edcios.<\/li>\n\n\n\n<li><strong>Definir padr\u00f5es:<\/strong> estabelecer conven\u00e7\u00f5es claras desde o in\u00edcio para rotas, comunica\u00e7\u00e3o e estilos.<\/li>\n\n\n\n<li><strong>Investir em observabilidade:<\/strong> ferramentas de monitoramento s\u00e3o essenciais para identificar problemas rapidamente.<\/li>\n\n\n\n<li><strong>Documenta\u00e7\u00e3o e comunica\u00e7\u00e3o:<\/strong> manter uma documenta\u00e7\u00e3o atualizada e promover a comunica\u00e7\u00e3o entre as equipes para compartilhar aprendizados.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Escalar front-ends de forma eficaz requer uma combina\u00e7\u00e3o de solu\u00e7\u00f5es t\u00e9cnicas e organizacionais. Arquiteturas de micro front-ends oferecem um caminho para lidar com a complexidade t\u00e9cnica, enquanto a padroniza\u00e7\u00e3o e as equipes de plataforma abordam os desafios humanos de colabora\u00e7\u00e3o em larga escala.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No Nubank, entendemos que a inova\u00e7\u00e3o cont\u00ednua e a adaptabilidade s\u00e3o essenciais para oferecer a melhor experi\u00eancia aos nossos clientes. Seja adotando tecnologias avan\u00e7adas ou reestruturando nossas equipes, estamos comprometidos em evoluir e enfrentar os desafios de escala do mundo moderno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quer fazer parte desse desafio? Estamos sempre em busca de talentos apaixonados por tecnologia e inova\u00e7\u00e3o para construirmos, juntos, o futuro roxo! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para mais insights como esses, assista a grava\u00e7\u00e3o do meetup de Engenharia:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/GsnC0fkv4Ts?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=pt-BR&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes<\/p>\n","protected":false},"author":178110103,"featured_media":30385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[2497,2628,2586],"tags":[2988,2498],"ppma_author":[2321],"class_list":["post-30388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering-pt-br","category-foundation-infrastructure-pt-br","category-software-engineering-pt-br","tag-microservices-pt-br","tag-software-engineering-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Do micro ao macro: escalando front-ends - Building Nubank<\/title>\n<meta name=\"description\" content=\"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Do micro ao macro: escalando front-ends - Building Nubank\" \/>\n<meta property=\"og:description\" content=\"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/\" \/>\n<meta property=\"og:site_name\" content=\"Building Nubank\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T17:30:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T17:31:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1-1024x683.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nubank Editorial\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nubank Editorial\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/\"},\"author\":{\"name\":\"Nubank Editorial\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\"},\"headline\":\"Do micro ao macro: escalando front-ends\",\"datePublished\":\"2024-10-14T17:30:54+00:00\",\"dateModified\":\"2024-10-14T17:31:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/\"},\"wordCount\":1778,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"keywords\":[\"Microservices\",\"Software engineering\"],\"articleSection\":[\"Engineering\",\"Foundation &amp; Infrastructure\",\"Software Engineering\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/\",\"url\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/\",\"name\":\"Do micro ao macro: escalando front-ends - Building Nubank\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"datePublished\":\"2024-10-14T17:30:54+00:00\",\"dateModified\":\"2024-10-14T17:31:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\"},\"description\":\"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/building.nubank.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1\",\"width\":5616,\"height\":3744,\"caption\":\"Nubankers working at Nu Office\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/do-micro-ao-macro-escalando-front-ends\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Do micro ao macro: escalando front-ends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/#website\",\"url\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/\",\"name\":\"Building Nubank\",\"description\":\"We make the extraordinary happen\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/462f4f5a8d4ec3ccbc3d661dde00f0a4\",\"name\":\"Nubank Editorial\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g0a78bc815f2126d9ba65b2af185671f1\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g\",\"caption\":\"Nubank Editorial\"},\"url\":\"https:\\\/\\\/building.nubank.com\\\/pt-br\\\/author\\\/editorial\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Do micro ao macro: escalando front-ends - Building Nubank","description":"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/","og_locale":"pt_BR","og_type":"article","og_title":"Do micro ao macro: escalando front-ends - Building Nubank","og_description":"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes","og_url":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/","og_site_name":"Building Nubank","article_published_time":"2024-10-14T17:30:54+00:00","article_modified_time":"2024-10-14T17:31:40+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1-1024x683.jpg","type":"image\/jpeg"}],"author":"Nubank Editorial","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Nubank Editorial","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#article","isPartOf":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/"},"author":{"name":"Nubank Editorial","@id":"https:\/\/building.nubank.com\/pt-br\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4"},"headline":"Do micro ao macro: escalando front-ends","datePublished":"2024-10-14T17:30:54+00:00","dateModified":"2024-10-14T17:31:40+00:00","mainEntityOfPage":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/"},"wordCount":1778,"commentCount":0,"image":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","keywords":["Microservices","Software engineering"],"articleSection":["Engineering","Foundation &amp; Infrastructure","Software Engineering"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/","url":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/","name":"Do micro ao macro: escalando front-ends - Building Nubank","isPartOf":{"@id":"https:\/\/building.nubank.com\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#primaryimage"},"image":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","datePublished":"2024-10-14T17:30:54+00:00","dateModified":"2024-10-14T17:31:40+00:00","author":{"@id":"https:\/\/building.nubank.com\/pt-br\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4"},"description":"Do gerenciamento de vers\u00e3o \u00e0s estrat\u00e9gias de cache: abordagens eficazes para arquiteturas, pr\u00e1ticas e estrat\u00e9gias para equipes e aplica\u00e7\u00f5es eficientes","breadcrumb":{"@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#primaryimage","url":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","contentUrl":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","width":5616,"height":3744,"caption":"Nubankers working at Nu Office"},{"@type":"BreadcrumbList","@id":"https:\/\/building.nubank.com\/pt-br\/do-micro-ao-macro-escalando-front-ends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/building.nubank.com\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Do micro ao macro: escalando front-ends"}]},{"@type":"WebSite","@id":"https:\/\/building.nubank.com\/pt-br\/#website","url":"https:\/\/building.nubank.com\/pt-br\/","name":"Building Nubank","description":"We make the extraordinary happen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/building.nubank.com\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/building.nubank.com\/pt-br\/#\/schema\/person\/462f4f5a8d4ec3ccbc3d661dde00f0a4","name":"Nubank Editorial","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g0a78bc815f2126d9ba65b2af185671f1","url":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","caption":"Nubank Editorial"},"url":"https:\/\/building.nubank.com\/pt-br\/author\/editorial\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/building.nubank.com\/wp-content\/uploads\/2024\/10\/IMG_9771-1.jpg?fit=5616%2C3744&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbKBB5-7U8","jetpack_sharing_enabled":true,"authors":[{"term_id":2321,"user_id":178110103,"is_guest":0,"slug":"editorial","display_name":"Nubank Editorial","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/8c056170dc75ffd365b306a0ac7bea4e51d1cdab52a0c84e6ba0a42f7e2f4633?s=96&d=identicon&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/posts\/30388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/users\/178110103"}],"replies":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/comments?post=30388"}],"version-history":[{"count":4,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/posts\/30388\/revisions"}],"predecessor-version":[{"id":30397,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/posts\/30388\/revisions\/30397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/media\/30385"}],"wp:attachment":[{"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/media?parent=30388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/categories?post=30388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/tags?post=30388"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/building.nubank.com\/pt-br\/wp-json\/wp\/v2\/ppma_author?post=30388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}