Micro Front-End - Microserviços no seu navegador \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 18 Horas 53 Min 01 Seg Tempo restante da oferta: 18 53 01 [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) Micro Front-End - Microserviços no seu navegador [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) # Micro Front-End - Microserviços no seu navegador Entenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta estratégia para a arquitetura de suas aplicações. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Micro-Front-End-Microserviços-no-seu-navegador.png) Olá Web Developers! Vamos entender o que é Micro Front-End. Já tivemos aqui no blog posts relacionados a [Microsserviços](https://www.treinaweb.com.br/blog/o-que-sao-microsservicos/ "Microsserviços") e [Micro-Frameworks](https://www.treinaweb.com.br/blog/o-que-e-um-micro-framework/ "Micro-Frameworks"), que eu recomendo a leitura para servir de base para o entendimento deste post. ## Micro vs Monolítico Quando dizemos que um sistema é `monolítico`, estamos nos referindo a monólitos (mono = um, lito = pedra). Uma referência a, por exemplo, montanhas que são formadas por uma única pedra, como é o caso do morro do Pão de Açúcar. ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Morro-e-Bondinho-do-P%C3%A3o-de-A%C3%A7%C3%BAcar.jpg) Nesse sentido estamos indicando que o sistema é grande e inflexível, pois normalmente se baseia em uma única estrutura, framework e padrão. Não estou dizendo que isso é ruim. Já quando falamos em micro, estamos nos referindo a pequenas peças que se unem para formar algo maior, como blocos de montar. [ ![Nest.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/nest-js.svg) Curso Nest.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-fundamentos) ## O que é Micro Front-End? O mais comum hoje em dia é construir uma aplicação inteira com uma única biblioteca ou framework (normalmente [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React"), [Angular](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve/ "Angular") ou [Vue](https://www.treinaweb.com.br/blog/o-que-e-o-vue-js/ "Vue")). Em contraste com essa ideia, imagine uma aplicação que na verdade é feita de pequenas aplicações independentes que se integram. Nesse sentido, poderíamos ter até mesmo uma mesma tela feita por [frameworks](https://www.treinaweb.com.br/blog/para-que-serve-um-framework/ "frameworks") diferentes. Um pedaço pode ter sido feito com Angular e outro com Vue. Loucura? Bagunça? Talvez não. A ideia de Micro Front-Ends é exatamente permitir que cada pedaço da aplicação seja independente. Isso realmente não faz sentido nenhum para aplicações de pequeno e médio porte. Entretanto, aplicações de grande porte normalmente necessitam de algumas estratégias diferentes para que possam continuar crescendo sem afetar sua qualidade. ![Tela de compra criada usando diferentes Frameworks com modelo de micro front-end](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/three-teams-micro-frontend.png) (No exemplo acima, a tela de exibição do produto é feita em Angular, a parte relacionada à compra é feita em React e a lista de produtos relacionados é em Vue) Portanto, pense em projetos em que há pelo menos dois times diferentes trabalhando no Front-End de uma mesma aplicação. Um time pode ter um problema em que uma ferramenta X seria perfeita, mas que poderia dificultar as atividades do outro time, que prefere usar a ferramenta Y. Se cada pedaço da aplicação for independente, cada time pode escolher suas tecnologias, métodos de trabalho, horários de reunião, casos de teste, momento para deploy, etc. Assim, cada um conseguirá ter um melhor aproveitamento. Se uma equipe precisa atualizar a sua parte, a outra não precisa ser envolvida e nem terá seu trabalho influenciado. Além disso, e se algum módulo da aplicação tiver uma ferramenta obsoleta e precisa ser atualizada ou até mesmo trocada? Em uma aplicação comum teríamos que arrumar o código inteiro, o que é totalmente inviável para aplicações grandes. Você já deve ter ouvido o famoso “deixa assim ou refaz do zero”. Entretanto, se cada módulo da aplicação é independente, você pode mudar cada pedaço da aplicação aos poucos, sem influenciar no todo. [ ![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) ## Como os Micro Front-Ends se comunicam? Ainda que a ideia é deixar cada pedaço da aplicação independente, as partes necessitam conversar e compartilhar certos dados. Um ótimo exemplo é ter um módulo de login e outro de compra de produtos. É necessário saber quem é o usuário logado para poder finalizar uma compra. A fim de possibilitar a comunicação entre os pequenos pedaços da aplicação, podemos utilizar coisas como o próprio [LocalStorage](https://www.treinaweb.com.br/blog/quando-usar-sessionstorage-e-localstorage/ "LocalStorage"), por exemplo. Ou então criar eventos para possibilitar a comunicação. Há ferramentas que ajudam a permitir essa integração. Uma delas é o [https://single-spa.js.org/](https://single-spa.js.org/ "https://single-spa.js.org/"). Também é importante deixar claro que ainda é importante que as equipes sigam certas regras e padrões. Do contrário, o sistema seria estranho, com botões diferentes em cada tela, animações em diferentes estilos, etc. ## Aplicações monolíticas são coisas do passado? Devo mudar meu jeito de trabalhar e usar micro front-ends? Jamais! Cada aplicação sempre deve ser estudada e planejada de acordo com as necessidades e problemas a serem resolvidos. Haverá casos em que micro front-ends apenas darão mais trabalho e dores de cabeça ao invés de melhorias. Por isso sempre é importante conhecer várias ferramentas e maneiras diferentes de trabalhar, pois só assim você saberá o que fazer e usar em cada momento. Resumindo, os micro front-ends dão uma maior flexibilidade para **aplicações de grande porte** que possuem **vários times**. Mas não vão trazer vantagens para pequenos projetos em que há poucas pessoas envolvidas. [ ![HTML5 + CSS3 - Construindo sites semânticos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Construindo sites semânticos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-construindo-sites-semanticos) - [ #Arquitetura de Software ](https://www.treinaweb.com.br/blog/tag/arquitetura-de-software) - [ #Microservices ](https://www.treinaweb.com.br/blog/tag/microservices) - [ #Micro-framework ](https://www.treinaweb.com.br/blog/tag/micro-framework) - [ #frontend ](https://www.treinaweb.com.br/blog/tag/frontend) - [ #microsserviços ](https://www.treinaweb.com.br/blog/tag/microsservicos) - [ #micro front-end ](https://www.treinaweb.com.br/blog/tag/micro-front-end) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/2020/08/conheca-o-padrao-arquitetural-porto-para-aplicacoes-back-end-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ Conheça o padrão arquitetural Porto para aplicações back-end ](https://www.treinaweb.com.br/blog/conheca-o-padrao-arquitetural-porto-para-aplicacoes-back-end) Conheça o padrão arquitetural Porto! Voltado para aplicações back-end, ele permite escrever monolitos que podem ser facilmente migrados para micro serviços. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/10094842/service-stack-1-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando um Web Service com o ServiceStack – Parte 2 ](https://www.treinaweb.com.br/blog/criando-um-web-service-com-o-servicestack-parte-2) Dando continuidade ao estudo da biblioteca ServiceStack, neste artigo modificaremos o web service criado na primeira parte. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/08160607/capa-freelancer-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Como ser um profissional freelancer de desenvolvimento: dicas essenciais ](https://www.treinaweb.com.br/blog/como-ser-um-profissional-freelancer-de-desenvolvimento-dicas-essenciais) Veja neste artigo algumas dicas essenciais para quem está pensando em dar os primeiros passos em sua carreira profissional como freelancer. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171404/diego-eis-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 11: Diego Eis ](https://www.treinaweb.com.br/blog/tw-entrevista-11-diego-eis) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/30142656/O-QUE-É-microFRAMEWORK-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ O que é um Micro-Framework? ](https://www.treinaweb.com.br/blog/o-que-e-um-micro-framework) Neste artigo veremos o que é um micro-framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/01132725/PETAPOCO-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Utilizando o Micro ORM PetaPoco em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-micro-orm-petapoco-em-uma-aplicacao-asp-net-core) Aprenda a utilizar o Micro ORM PetaPoco em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06103205/orm-lite-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Utilizando o Micro ORM ServiceStack.OrmLite em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-micro-orm-servicestack-ormlite-em-uma-aplicacao-asp-net-core) Aprenda na prática como fazer uso do micro framework ORM ServiceStack.OrmLite em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/utilizando-o-micro-orm-dapper-em-uma-aplicacao-asp-net-core-400x280.jpg) [ ASP .NET ](https://www.treinaweb.com.br/blog/categoria/asp-net) 9 anos atrás ## [ Utilizando o Micro ORM Dapper em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-micro-orm-dapper-em-uma-aplicacao-asp-net-core) Conheça o micro framework ORM Dapper.NET e aprenda a utilizá-lo em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/o-que-e-lumen-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 6 anos atrás ## [ O que é Lumen? ](https://www.treinaweb.com.br/blog/o-que-e-lumen) Veja neste artigo o que é Lumen, Micro-Framework PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/27152914/flask-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ O que é Flask? ](https://www.treinaweb.com.br/blog/o-que-e-flask) Veja neste artigo o que é o Flask, principal micro-framework do ecossistema Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/middlewares-adicionais-para-o-zend-expressive-2-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Middlewares adicionais para o Zend Expressive 2 ](https://www.treinaweb.com.br/blog/middlewares-adicionais-para-o-zend-expressive-2) Veremos neste artigo como adicionar uma camada de retorno usando middleware, com o objetivo de flexibilizar futuros retornos no Zend Expressive. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/19182504/slim-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é o Slim Framework? ](https://www.treinaweb.com.br/blog/o-que-e-o-slim-framework) Veja neste artigo o que é e as principais características do Slim Framework. 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 **18h 53min 01s** - 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