O poder dos Micro-Frontends

De Monólitos a Arquiteturas Independentes Você provavelmente já ouviu falar da arquitetura de micro-serviços no contexto de back-end, cujo principal princípio é a decomposição das funcionalidades em partes menores e mais gerenciáveis. O que nem todos sabem é que existe uma abordagem semelhante para o front-end. Embora ainda não seja tão amplamente adotada quanto os micro-serviços no back-end, sua popularidade tem crescido a cada ano. Ainda é muito comum desenvolver aplicativos client-side/front-end seguindo uma arquitetura essencialmente monolítica, na qual todo o código da aplicação fica concentrado em uma única codebase. Imagine, por exemplo, um projeto de e-commerce construído com qualquer biblioteca ou framework de sua preferência, como o React. Observando a imagem, podemos perceber que tudo relacionado interface esta fortemente acoplada e desenvolvida como um único código-base, esse é o famoso monólitos que tanto se falam. Essa abordagem frequentemente resultava em desafios de escalabilidade, manutenção e colaboração, especialmente em projetos grandes e complexos. O que são Micro-Front-ends? Os Micro-Front-ends promovem a decomposição de um aplicativo front-end em componentes menores, independentes e com baixo acoplamento. Dessa maneira, ao contrário da arquitetura monolítica, podemos dar autonomia aos times de desenvolvimento, seja na alteração ou construção de uma nova funcionalidade, execução de testes de unidade, ou até mesmo utilizar diferentes tecnologias em uma só aplicação, e sim, com as ideias de Micro, você tem total liberdade para usar diferentes tecnologias e partes isoladas do projeto. A imagem acima ilustra o conceito de micro-frontends, mostrando uma página de um e-commerce de tratores dividida em três seções, cada uma gerenciada por um time diferente. O processo de vendas, recomendações de produtos e a estrutura geral da página são desenvolvidos separadamente, com cada equipe utilizando sua própria stack tecnológica e metodologia de trabalho. Na figura a baixo, acredito que seja interessante também trazer a decomposição sob uma perspectiva diferente. Existem três micros front-ends distintos, cada um com seus próprios processos de construção e implantação, que serão integrados em um único produto final. Como integrar diferentes Apps Entendendo o conceito sobre micro front-ends, é normal surge a dúvida: Como integrá-los? Como fazerem trabalharem junto? Exitem várias abordagens que podem ser usadas para isso, neste artigo vou abordar algumas deles brevemente, para você ter uma ideia. Pacotes Nesta abordagem, micro front-ends são publicados como pacotes, e a aplicação host deverá incluir todo o micro front-ends como dependências. Desta forma, a integração será feita no momento da construção, ou seja, na build. Optar por essa abordagem, significa que será necessário recompilar e disponibilizar cada microfront-end toda vez que uma alteração é realizada em alguma parte do produto Iframes Iframe é uma tag HTML utilizada para incorporar conteúdos externos em uma página. Isso não parece fazer muito sentido com micro front-ends? E está é sim uma forma de integrá-los, que oferece um bom isolamento de estilos e variáveis globais. Nesta abordagem a integração ocorre em tempo de execução, ou seja, do lado do cliente. Module Federation E mais utilizada, e acho que posso dizer, a mais recomendada, é protagonista das abordagens de integração de microfront-ends atualmente. O module federation permite que um aplicativo JavaScript carregue dinamicamente o código de outro aplicativo. Para entender melhor: Module Federation Comunicação entre aplicativos Um outra dúvida frequente sobre micro front-ends é como garantir a comunicação entre eles, é interessante pontuar que é uma interessante manter essa comunicação o mínimo possível, mas temos algumas alternativas como: Eventos personalizados:comunicação via eventos, permitindo que uma parte da aplicação seja informada sobre mudança ocorrida na outra. Props and callbacks: Própria alternativa do React usando context api Barra de endereço como mecanismo de comunicação: acessados diretamente por meio da barra de endereço do navegador. Isso permite que dados, como um ID de produto, sejam passados pela URL, que pode ser extraído da URL usado a lógica de roteamento do micro-front-end. Um ponto de intenção importante é que, se você tem dois micro front-ends que estão compartilhando estado com frequência, pode ser uma boa indicação que ele devessem um só, e a decomposição pode estar mais atrapalhando do que ajudando. Benefícios São muitos os benéficos da abordagem de Micro-front-ends como a questão desacoplamento, atualizações incrementais, reaproveito de funcionalidade, mas um ponto que eu acho como grande beneficio é a ajuda para conseguir trabalhar em sistemas legados, é muito comum encontramos projeto depreciados e mal construídos, mas mesmo assim tendo que dar manutenção nessa bagunça e criar novas features. Essa bordagem pode

Feb 17, 2025 - 13:18

De Monólitos a Arquiteturas Independentes

Você provavelmente já ouviu falar da arquitetura de micro-serviços no contexto de back-end, cujo principal princípio é a decomposição das funcionalidades em partes menores e mais gerenciáveis. O que nem todos sabem é que existe uma abordagem semelhante para o front-end. Embora ainda não seja tão amplamente adotada quanto os micro-serviços no back-end, sua popularidade tem crescido a cada ano.

Ainda é muito comum desenvolver aplicativos client-side/front-end seguindo uma arquitetura essencialmente monolítica, na qual todo o código da aplicação fica concentrado em uma única codebase. Imagine, por exemplo, um projeto de e-commerce construído com qualquer biblioteca ou framework de sua preferência, como o React.

Observando a imagem, podemos perceber que tudo relacionado interface esta fortemente acoplada e desenvolvida como um único código-base, esse é o famoso monólitos que tanto se falam. Essa abordagem frequentemente resultava em desafios de escalabilidade, manutenção e colaboração, especialmente em projetos grandes e complexos.

O que são Micro-Front-ends?

Os Micro-Front-ends promovem a decomposição de um aplicativo front-end em componentes menores, independentes e com baixo acoplamento. Dessa maneira, ao contrário da arquitetura monolítica, podemos dar autonomia aos times de desenvolvimento, seja na alteração ou construção de uma nova funcionalidade, execução de testes de unidade, ou até mesmo utilizar diferentes tecnologias em uma só aplicação, e sim, com as ideias de Micro, você tem total liberdade para usar diferentes tecnologias e partes isoladas do projeto.

A imagem acima ilustra o conceito de micro-frontends, mostrando uma página de um e-commerce de tratores dividida em três seções, cada uma gerenciada por um time diferente. O processo de vendas, recomendações de produtos e a estrutura geral da página são desenvolvidos separadamente, com cada equipe utilizando sua própria stack tecnológica e metodologia de trabalho.

Na figura a baixo, acredito que seja interessante também trazer a decomposição sob uma perspectiva diferente. Existem três micros front-ends distintos, cada um com seus próprios processos de construção e implantação, que serão integrados em um único produto final.

Como integrar diferentes Apps

Entendendo o conceito sobre micro front-ends, é normal surge a dúvida:
Como integrá-los? Como fazerem trabalharem junto? Exitem várias abordagens que podem ser usadas para isso, neste artigo vou abordar algumas deles brevemente, para você ter uma ideia.

Pacotes

Nesta abordagem, micro front-ends são publicados como pacotes, e a aplicação host deverá incluir todo o micro front-ends como dependências. Desta forma, a integração será feita no momento da construção, ou seja, na build.

Optar por essa abordagem, significa que será necessário recompilar e disponibilizar cada microfront-end toda vez que uma alteração é realizada em alguma parte do produto

Iframes

Iframe é uma tag HTML utilizada para incorporar conteúdos externos em uma página. Isso não parece fazer muito sentido com micro front-ends? E está é sim uma forma de integrá-los, que oferece um bom isolamento de estilos e variáveis globais. Nesta abordagem a integração ocorre em tempo de execução, ou seja, do lado do cliente.

Module Federation

E mais utilizada, e acho que posso dizer, a mais recomendada, é protagonista das abordagens de integração de microfront-ends atualmente. O module federation permite que um aplicativo JavaScript carregue dinamicamente o código de outro aplicativo.

Para entender melhor: Module Federation

Comunicação entre aplicativos

Um outra dúvida frequente sobre micro front-ends é como garantir a comunicação entre eles, é interessante pontuar que é uma interessante manter essa comunicação o mínimo possível, mas temos algumas alternativas como:

Eventos personalizados:comunicação via eventos, permitindo que uma parte da aplicação seja informada sobre mudança ocorrida na outra.

Props and callbacks: Própria alternativa do React usando context api

Barra de endereço como mecanismo de comunicação: acessados diretamente por meio da barra de endereço do navegador. Isso permite que dados, como um ID de produto, sejam passados pela URL, que pode ser extraído da URL usado a lógica de roteamento do micro-front-end.

Um ponto de intenção importante é que, se você tem dois micro front-ends que estão compartilhando estado com frequência, pode ser uma boa indicação que ele devessem um só, e a decomposição pode estar mais atrapalhando do que ajudando.

Benefícios

São muitos os benéficos da abordagem de Micro-front-ends como a questão desacoplamento, atualizações incrementais, reaproveito de funcionalidade, mas um ponto que eu acho como grande beneficio é a ajuda para conseguir trabalhar em sistemas legados, é muito comum encontramos projeto depreciados e mal construídos, mas mesmo assim tendo que dar manutenção nessa bagunça e criar novas features. Essa bordagem pode facilitar muito a vida do desenvolvedor, com um novo ambiente atualizado e controlado para criar sua nova feature, sem a bagunça de uma aplicação legada, se preocupando somente em integrar posteriormente.

Conclusão

Meu objetivo com esse artigo no começo era realmente entender como funciona os micro-frontends por trás, e sanar minhas curiosidades, conforme o texto foi se preenchendo e fui entendendo mais os conceitos, decidi compartilhar o conteúdo. Eu espero que a leitura tenha sanado lacunas de conhecimento que algum leitor possuísse, e contribuir para o conhecimento de alguém.

Referências

micro-frontends-in-action-code

Micro Frontends

O poder dos Micro-Frontends: Uma abordagem moderna para a Arquitetura Frontend

Build a micro-frontend application with React