O que vocês acham sobre Microfrontends?
Recentemente comecei a estudar a respeito da arquitetura de microfrontends, mas tenho algumas dúvidas em relação à viabilidade e aplicações. Qual a opinião de vocês em relação a este tema?
1
2
Trabalho com microfrontends a mais de um ano e para mim foi uma experiência ruim. Para ficar mais simples de entender minha opnião vou explicar separando pontos positivos e negativos, segundo a minha experiência:
Pontos Positivos
- Cada microfrontend pode ser criado com uma tecnologia diferente. Ideal para times gigantescos que trabalham em sistemas gigantescos (mas é preciso ter um design system bem definido, para não criar um Frankenstein).
- Os microfrontends sendo independentes permite que o deploy de cada parte seja feito separadamente, o que pode acelerar o envio de código para produção.
- Flexibilizar o deploy. No projeto que eu trabalhava, se algum cliente não quisesse ou precisasse de algum módulo, nós poderíamos não subir o container daquele microfrontend.
- CI mais rápido se a aplicação for grande, porque se só mexeu em um microfrontend, não vai precisar rodar testes dos outros.
Pontos Negativos
- Configurações de build complexas. Não é simples configurar o webpack com o module federation para tudo funcionar corretamente. Já tive alguns problemas que eram muito difíceis de achar aonde que estavam.
- Configurações de lint e formatação de código. É bom configurar tudo no começo e achar um jeito de padronizar tudo, ou se não vai acontecer o que aconteceu comigo: todas as configs do eslint e prettier eram replicadas em cada MFE.
- Compartilhamento de código. Cada microfrontend deveria ser independente, mas e se você tem um componente genérico que é usado em todos eles (supondo que todos usem a mesma tecnologia)? No projeto que eu trabalhava, todos os MFEs eram feitos em React e existia um chamado Common, que disponibilizava código a ser reutilizado (componentes, funções, hooks, etc).
- Comunicação entre MFEs. Para um mandar algum dado para outro você possivelmente vai precisar usar Custom Events do JS.
Conclusão
Para mim, MFEs só servem se você está tendo problemas com monolitos muito grandes, por conta de aplicações imensas (pensa no Mercado Livre, por exemplo) e se tem um time de front grande também.
O que os MFEs resolvem são questões mais relacionadas a gestão de pessoas e times do que questões técnicas relacionadas a código e a aplicação.
Pode parecer uma solução incrível no começo, mas garanto que dá muita dor de cabeça, especialmente se for implementado de forma descuidada e não acho seja uma boa ideia começar um projeto usando microfrontends, porque é muita complexidade sem necessidade.
1
Talvez pro meu propósito funcione. Por exemplo, imagine que eu tenho uma plataforma que lida com diversas funcionalidades, desde listagem simples até meios de pagamento (talvez até conexão com carteiras de criptomoedas). Nesse caso, seria interessante a aplicação desse conceito?
Além disso, tem indicações à respeito de conteúdos, livros, artigos e afins que possam me ajudar no desenvolvimento de maneira ?
1
Não posso dizer com 100% de certeza por não conhecer como é sua aplicação, nem quantas pessoas trabalham nela, mas eu decidiria da seguinte forma:
Usar microfrontend se:
- Aplicação for MUITO grande
- Muitas pessoas trabalhando no mesmo projeto/repositório e tenho algum destes problemas: muitos conflitos do git, CI/CD demora demais para rodar, times não conseguem trabalhar de forma assíncrona e independente.
Alternativa que eu estudaria:
- Refatorar projeto, separando o código por módulos, ao invés de separar por tipo de arquivo (páginas, componentes, hooks, etc). Com módulos separados cada pessoa ou time pode trabalhar em um, mas sem a complexidade de configuração de um MFE.
Sobre conteúdos: dá uma pesquisada sobre o Module Federation do Webpack.
Achei estes links muito úteis também:
1
Eu atualmente estou trabalhando em um projeto de migração de arquiteturas de monolitos para arquitetura de microfrontends e como tudo na área da programação, tem seus pontos positivos e negativos. No meu caso utilizo o angular com single-spa.
Creio que o maior ponto positivo desse tipo de arquitetura aparece quando você tem múltiplas equipes que precisam trabalhar paralelamente em algo que para o usuário seria o mesmo produto.
Não vejo problema em você criar um app como prova de conceito para tentar entender como funciona esse tipo de arquitetura, mas tenha em mente que ela resolve problemas específicos e cria “problemas” diferentes, vi em um dos seus comentários que quer utilizar SSR, você não vai fazer da mesma forma que faz em uma aplicação normal, terá que adaptar para o tipo de arquitetura. Dependendo de qual estratégia utilizar, module federation, single-spa ou outro tipo, pode complicar mais ainda seu trabalho.
Como exemplo, aqui tem uma issue do single-spa em que eles conversam sobre o suporte ao nextjs: https://github.com/single-spa/single-spa.js.org/issues/306
1
Trabalhei em um projeto que utilizamos essa estratégia, e posso ressaltar alguns pontos.
Microfrontends (na minha opinião) fazem sentindo em grandes projetos, e que os módulos possam ser separados para diferentes squads trabalharem.
Isso cria uma autonomia muito bacana, tanto na separação do código, qualidade, deploy e etc.
É recomendado também ter um design System compartilhado, para que os módulos não sejam uma bagunça de layouts kkkk.