De Monólitos a Arquiteturas Independentes
Você provavelmente já ouviu falar da arquitetura de microserviç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 microserviç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 está fortemente acoplado e desenvolvido como um único código-base. Essa abordagem frequentemente resulta em desafios de escalabilidade, manutenção e colaboração, especialmente em projetos grandes e complexos.
O que são Micro-Front-ends?
Os Micro Frontends 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 Frontends, você tem total liberdade para usar diferentes tecnologias em 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 abaixo, podemos visualizar a decomposição sob uma perspectiva diferente. Existem três Micro Frontends 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 de Micro Frontends, é normal surgir a dúvida: como integrá-los? Como fazer com que trabalhem juntos? Existem várias abordagens para isso. Neste artigo, abordarei algumas delas brevemente para que você tenha uma ideia.
- Pacotes
Nesta abordagem, Micro Frontends são publicados como pacotes, e a aplicação host deverá incluí-los como dependências. Dessa 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 Micro Frontend toda vez que uma alteração for realizada em alguma parte do produto.
- Iframes
Iframe é uma tag HTML utilizada para incorporar conteúdos externos em uma página. Essa abordagem oferece um bom isolamento de estilos e variáveis globais. A integração ocorre em tempo de execução, ou seja, do lado do cliente.
- Module Federation
A mais utilizada e, possivelmente, a mais recomendada. 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
Outra dúvida frequente sobre Micro Frontends é como garantir a comunicação entre eles. É importante pontuar que essa comunicação deve ser mantida no mínimo possível. Algumas alternativas incluem:
Eventos personalizados: comunicação via eventos, permitindo que uma parte da aplicação seja informada sobre mudanças ocorridas em outra;
Props and callbacks: alternativa do React usando Context API;
Barra de endereço como mecanismo de comunicação: acessando diretamente a URL do navegador. Isso permite que dados, como um ID de produto, sejam passados pela URL, podendo ser extraídos usando a lógica de roteamento do Micro Frontend.
Um ponto de atenção importante: se você tem dois Micro Frontends compartilhando estado com frequência, isso pode indicar que eles deveriam ser um só, pois a decomposição pode estar mais atrapalhando do que ajudando.
Benefícios
Os Micro Frontends oferecem vários benefícios, como desacoplamento, atualizações incrementais e reaproveitamento de funcionalidades. No entanto, um dos maiores benefícios é a facilitação do trabalho com sistemas legados. É comum encontrarmos projetos depreciados e mal construídos que ainda precisam de manutenção e novas features. Essa abordagem permite ao desenvolvedor criar novas funcionalidades em um ambiente atualizado e controlado, sem a bagunça da aplicação legada, preocupando-se apenas com a integração posterior.
Conclusão
Meu objetivo com este artigo era entender melhor o funcionamento dos Micro Frontends e sanar minhas curiosidades. Conforme fui aprofundando meu conhecimento, decidi compartilhar o conteúdo. Espero que esta leitura tenha ajudado a esclarecer dúvidas e contribuído para o conhecimento de alguém.
Referências
micro-frontends-in-action-code
O poder dos Micro-Frontends: Uma abordagem moderna para a Arquitetura Frontend
Top comments (0)