Micro Frontends — o futuro da web ou apenas outra opção?

Ângelo Santos
MCTW_TDW
Published in
6 min readFeb 1, 2023

A web, e o desenvolvimento para a mesma, encontra-se em constante mudança. Com esta mudança vão surgindo, frequentemente, novas tecnologias e/ou metodologias que visam auxiliar os web developers a fazer o seu trabalho. Com este artigo pretendo explorar o conceito de Micro Frontends e quais as suas vantagens e/ou desvantagens para o desenvolvimento web, logo para isso é necessário perceber o que são Micro Frontends.

O que são Micro Frontends?

Resumidamente é uma arquitetura. O desenvolvimento frontend é um processo complicado, onde existe a necessidade de escalar projetos, aumentando a complexidade dos mesmos, o que causa a necessidade de envolver mais pessoas a trabalhar no mesmo projeto. Logo, antes de explicar o que são micro frontends, vou começar por explicar os diversos tipos de arquitetura de aplicações web, de modo a perceber a evolução das metodologias adotadas em desenvolvimento web.

Aplicações Monolíticas

Estas são aplicações onde só há uma codebase. Ou seja, existe uma junção de front-end com back-end no mesmo repositório, partilhando assim o mesmo código fonte.

Figura 1 — Arquitetura Monolítica

Existem alguns problemas com esta abordagem. O facto de se encontrar tudo presente no mesmo repositório faz com que o desenvolvimento de novos features seja um processo complexo e difícil, uma vez que é necessário fazer alterações em toda a aplicação. Outro dos problemas apresentados neste tipo de arquitetura é o alto nível de interdependência presente na aplicação, causada pela natureza deste método. Isto leva a que a nossa aplicação monolítica tenha dificuldades como:

  • A implementação de novas tecnologias, linguagens e frameworks;
  • A impossibilidade em distribuir os esforços da equipa, devido à presença de uma base de dados incapaz de ser dividida;
  • Uma dificuldade acrescida em integrar novos elementos da equipa no projeto;
  • Dificuldade em escalar a aplicação, uma vez que com a adição de novos features à aplicação é necessário fazer alterações no projeto todo.

Para combater estes problemas foi necessário adotar outras abordagens, foi aí que surgiu a separação em front-end e back-end.

Front-end, Back-end e Microsserviços

Atualmente o mais comum, é ter uma equipa focada no desenvolvimento front-end e outra no back-end. Este tipo de abordagem permite, não só uma melhor organização e distribuição de recursos como também evitar uma dependência interna. Ou seja, caso seja necessário fazer mudanças no front-end, não é necessário fazer mudanças em toda a estrutura como na arquitetura monolítica.

Tem como base esta divisão e com o objetivo de segregar a nossa aplicação, surge o conceito de microsserviços. Este conceito de arquitetura visa dividir o back-end de um projeto em vários componentes mais pequenos. Cada uma destas divisões iria correr o seu próprio processo, possuindo a sua própria codebase, práticas de DevOps, pipelines CI/CD e possuindo independência do resto da aplicação. A comunicação entre estes serviços é feita com o uso de APIs, sendo posteriormente comunicado com o front-end através de uma API gateway, que é um middleware entre um serviço do back-end e um endpoint da API. Importante referir que esta API gateway foi inicialmente criada especificamente para este tipo de arquitetura com micro serviços.

Figura 2 — Comparação entre arquiteturas

Porém algo possível de reparar na Figura 2, é que o único aspeto da aplicação que benefícia deste microsserviços é o back-end e que em todos os exemplos apresentados, o front-end apresenta-se sempre com uma estrutura monolítica. Isto levanta a questão de como podemos impedir que o nosso front-end tenha uma arquitetura monolítica.

Agora sim, o que são micro frontends?

Agora que possuímos conhecimento do conceito de microsserviços e de como estes se aplicam, podemos finalmente falar de micro frontends. Micro frontends trata-se de uma arquitetura semelhante à de micro serviços, porém aplicada ao front-end da nossa aplicação. Assim sendo, possuímos equipas diferentes a trabalhar em funcionalidades distintas no nosso projeto, o que faz com que exista uma independência entre equipas e features.

Figura 3 — Divisão por equipas em Micro Frontend

Podemos então concluir que as ideias principais por detrás de micro frontends são o isolamento de código por equipa, onde cada uma tem de ser capaz de trabalhar no seu stack sem a necessidade de coordenar com outras equipas. Porém, devido à natureza de certos aspetos que não podem ser isolados, por exemplo, cookies, é necessário adotar noções como naming convenctions, para por exemplo ficheiros, funções e componentes, de modo a evitar possíveis erros quando construímos a aplicação juntando os códigos dos features desenvolvidos.

Quais as vantagens e desvantagens de uma arquitetura de micro frontends?

Tal como as outras arquiteturas mencionadas anteriormente, existem vantagens e desvantagens que é necessário ter em mente quando adotamos uma arquitetura baseada em micro frontends. Começando pelas vantagens ao adotar esta arquitetura garantimos que:

  • Possuímos uma aplicação mais fácil de escalar, podendo distribuir os recursos por funcionalidades que precisem de ser ajustadas sem danificar as outras;
  • Caso um dos serviços encontre um problema, o funcionamento dos restantes não será afetado;
  • Existe liberdade de tecnologias na mesma aplicação. Ou seja diferentes equipas podem utilizar as frameworks e tecnologias adequadas para desenvolver um serviço específico;
  • A testagem de partes da interface torna-se mais simples, uma vez que é possível testar somente o serviço em específico ao invés de todo o front-end.

Olhando agora para as desvantagens deste tipo de arquitetura:

  • Por vezes pode ser complicado manter a interface da aplicação coesa. Isto acontece devido à independência que as equipas possuem. Logo, para evitar este problema é necessário que todos os membros tenham uma visão semelhante, para evitar inconsistências, da interface da aplicação web;
  • A liberdade de tecnologias pode tornar o nosso tech stack inconsistente que se pode traduzir em uma performance lenta e uma experiencia desagradável para o utilizador;
  • Apesar da testagem individual de serviços ser algo simples, quando a testagem inclui a aplicação de modo geral é necessário verificar se estes serviços funcionam devidamente em sintonia. O que pode ser algo desafiante devido à independência das micro frontends;
  • Existe geralmente a necessidade de um grande investimento para projetos com esta arquitetura. Este investimento visa juntar e manter várias equipas de desenvolvimento, assim como equipas de gestão de trabalho, para garantir uma comunicação efetiva entre equipas e coordenar o desenvolvimento do projeto.

Concluindo, é este o futuro do desenvolvimento frontend?

Não necessariamente. Apesar das vantagens da arquitetura micro frontend, nem sempre é adequado adotar a mesma. Quando construímos algo para a web é importante sermos flexíveis. Não só a nível de tecnologias mas também nos procedimentos que adotamos. Logo caso queiramos utilizar uma arquitetura micro frontend, é importante verificar se o que vamos construir se adequa à utilização da mesma. Caso a nossa aplicação seja algo complexo, que pode ser dividido em múltiplos serviços e a equipa que se possui é grande e/ou constituída por múltiplas equipas, este tipo de arquitetura é bastante adequado. Porém é necessário também ter em mente os desafios associados a esta metodologia e o facto de ser necessário um investimento significativo para projetos baseados nesta arquitetura.

Em suma, o desenvolvimento para a web é algo que está em constante evolução e onde aparecem soluções distintas para problemas semelhantes. Apesar disso, e na minha opinião um ponto crucial, não existe uma solução adequada para todos os nossos problemas, sendo necessário pesquisar e descobrir quais os métodos, tecnologias e soluções a adotar mediante o que queremos criar.

Referencias Bibliográficas

--

--