34

Tenho me deparado com vários termos "novos" pela internet a fora, quando o assunto é programação. E, recentemente, me deparei com o termo microfrontend.

Pelo pouco que eu pude entender, a ideia seria derivada de microserviços (que parece estar relacionando em quebrar a aplicação em vários pedaços).

Gostaria de saber:

  • O que seria Microfrontend?
  • Que problemas ele resolve (ou não resolve)?
  • Quais são os prós e contras?
14
  • 2
    Pelo que eu tenha entendido, é uma maneira de separação de preocupações. Cada equipe de um pedaço do front-end trabalha separadamente, em um lugar definido da tela, sem precisar de alto-acoplamento entre eles. Quando uma mensagem chega (seja advinda de algum evento na tela ou resposta do servidor), um bus distribui para todos os "microfronts" cadastrados e eles se atualizam com essa informação. Faz um bom tempo que eu vi esse conceito, mas é isso que está na minha lembrança Commented 20/09/2019 às 12:18
  • 3
    Queria fazer piada como nos velhos tempos do SOpt, mas eu seria censurado, então deixa pra lá...
    – Maniero
    Commented 20/09/2019 às 12:28
  • 3
    Vc pode criar cada funcionalidade no front end com o framework novo da semana o q proporciona maior flexibilidade :P
    – rray
    Commented 20/09/2019 às 12:45
  • 6
    Além de hipotéticas deveria ser óbvio que só faz sentido em equipes medíocres com tamanho monstro, certo? Por alguma razão vai sair todo mundo copiando. Quer apostar que dev solo vai adotar? quase todas técnicas de organização de projetos foram criadas como resposta à mediocridade dos devs, é confissão de incompetência, começando por OOP.
    – Maniero
    Commented 20/09/2019 às 13:30
  • 3
    Cara no Micro Front End a ideia é separar a aplicação de front-end em muitas camadas menores onde cada uma sendo é responsável por uma parte específica da tua aplicação. Commented 24/09/2019 às 13:04

2 Respostas 2

23
+100

O que seria Microfrontend?

Resumindo bastante e sabendo o que são web components, cada componente da UI, pode ser um projeto separado, com suas próprias dependências, estrutura e equipe de desenvolvedores

Que problemas ele resolve (ou não resolve)?

Até resolve algumas situações muito específicas, mas trás diversos outros problemas consigo. Então deve ser analisado bem o contexto antes de adotar.

Quais são os prós e contras?

Se você tem uma interface que é montada a partir de diversos projetos...

  • Há um acúmulo de dependências, boa parte podendo ser apenas uma pequena mudança da versão ou diferentes bibliotecas com a mesma função (por exemplo, uma mesma tela ter que carregar o Vue e o React)

  • Você precisa gerenciar estado entre os projetos, o que provavelmente adicionará mais uma dependência

  • Você não deveria ter variáveis globais entre todos os projetos, afinal, cada projeto deve ser desacoplado dos demais

  • Tudo isso implica maior complexidade

Mas ela ajuda em alguma coisa...

  • Permite o uso de diferentes bibliotecas numa mesma aplicação (no caso um site e não um projeto)

  • Apesar de aumentar a complexidade do todo, simplifica as suas partes, pois divide aquele monstro em projetos menores

Possíveis casos de uso:

  • Permite a migração da biblioteca/framework principal (ou apenas versão do mesmo) aos poucos, você pode indo um componente de cada vez

  • Em aplicações muito grandes, pode se dividir melhor o projeto e as suas respectivas equipes, desacoplando as partes

Observações para os casos de uso, respectivamente:

  • Se o processo de migração for rápido, provavelmente não valha apena a adição dessa complexidade temporária

  • A divisão do projeto pode ser feita através de diferentes aplicação sem o uso microfrontend, desde que usem a mesma biblioteca/framework principal ou que as dependências em comum possuam suporte para todas. Por exemplo, posso ter uma aplicação em rh.app.com feita em Vue e finaceiro.app.com feita com Angular, ambas usando Ionic

Outras observações

  • No momento dessa resposta, eu diria que o microfrontend ainda está engatinhando, então não há tantos materiais e ainda não estão bem desenvolvidos

  • Apesar de permitir que você crie uma tela com diversos projetos, é bom evitar, principalmente quando há muitas dependências diferentes entre eles

  • Se sua aplicação é de médio ou pequeno porte não use, precisa de um motivo muito forte mesmo para que faça sentido o seu uso

  • No podcast linkado nos comentários pelo hugocsl, é discutido sobre o problema de ter muitas dependências, uma das soluções é combinar com a(s) equipe(s) para usar o máximo de dependências comuns e, quando for atualizar, todos atualizarem juntos, mas isso faz pouco sentido, já que praticamente acaba com as vantagens

  • Para evitar duplicação de dependências, ou seja, múltiplos projetos carregam as mesmas coisas, as mesmas devem ser carregadas por um gerenciador global (acima do projeto), ele verificará se é mesmo necessário carrega-la. A princípio não vejo nenhum porém nisso, exceto é claro, o aumento de complexidade

Uma rápida conclusão

Se você tem uma tela que usa múltiplas bibliotecas/framework "repetidos" (com a mesma função), possivelmente há um problema maior, a desorganização/mal estruturação da aplicação/equipe, ou seja, a aplicação mudou (cresceu, diminuiu ou alterou o escopo) e aquela dependência não é mais suficiente, precisando de outras e acumulando ou então a equipe não se organizou ou não é devidamente capacitada, não podendo mudar sua stack (o que deveria ser simples)

Acho difícil que alguém olhe para um projeto e diga "Isso tem que ser microfrontend", os problemas que ele resolve, na maioria, podem ser resolvidos de outras formas mais simples. Muito provavelmente, vai ter bastante gente querendo adotar sem um real motivo, apenas seguindo a manada. Também tem o mesmo problema dos microserviços, as pessoas querem adotar, mas ainda usam FTP

17

O Micro Frontends é uma técnica que surgiu para lidar com a complexidade de grandes projetos de frontend, onde em um mesmo sistema podemos mesclar diferentes tecnologias de front-end (Angular, AngularJS, React, Vue, etc), mantendo deploy e manutenção independentes.

Você pode ver um demo de uma solução misturando diversas tecnologias aqui: https://single-spa.surge.sh

Ela surgiu para resolver um problema parecido com o que os micro services vieram para resolver no backend: os softwares monolitos. Há tempos percebeu-se que projetos grandes de frontend enfrentavam os mesmos problemas com o passar do tempo: dificuldade na manutenção, dificuldade ao atualizar bibliotecas, impactos imprevistos em pontos diferentes da aplicação, impossibilidade de utilizar uma biblioteca mais nova dentro da mesma aplicação, dificuldade de diferentes times trabalharem na mesma aplicação, etc.

Separando o frontend em aplicações menores possibilitou-se contornar estes problemas.

Para ilustrar uma arquitetura comum, temos abaixo um frontend monolítico:

inserir a descrição da imagem aqui

Com a introdução do Micro Frontend na aplicação, ela pode ser trabalhada da seguinte maneira:

inserir a descrição da imagem aqui

Aqui há um outro exemplo ilustrando como diferentes times poderiam participar do desenvolvimento, de forma independente, na mesma tela:

inserir a descrição da imagem aqui

Como dito anteriormente, a tela pode ser segmentada em diferentes partes, misturando as tecnologias. No exemplo acima temos a área circulada em vermelho em Angular, a circulada em azul usa ReactJS e a circulada em verde foi feita com Vue.js.

Até pouco tempo atrás não existiam soluções bem difundidas sobre como resolver este problema. O assunto popularizou-se e ganhou bastante dimensão após a Thoughworks e Martin Fowler explorar mais o assunto, tanto que as principais referências ao assunto na Internet estão ligados a eles.

Quais são os prós e contras?

Até então listei os prós.

O principal contra, ao meu ver, é quando estas partes independentes precisam "conversar" de alguma maneira. Ou seja, precisam compartilhar informação. Existem soluções para isto também, mas não é algo tão trivial de fazer se comparada a uma solução "monolítica", pois o grau de dificuldade vai depender de qual informação deseja ser compartilhada.

Outro contra é o tamanho das requests, que aumentam. Imaginando que, por exemplo, você esteja usando a biblioteca do Bootstrap em mais de um micro frontend na sua aplicação. Neste caso teremos a mesma biblioteca sendo carregada mais de uma vez. Há meios de contornar isto, se necessário.

Também é preciso avaliar se sua equipe/projeto/empresa é capaz de lidar com diferentes tecnologias de front-end, não somente por causa da linguagem em si mas também das diferenças mais "estruturais": repositório, deploy, versionamento, etc.

1
  • 1
    Eu lembrava dessa imagem, só não consegui resgatar a fonte a tempo Commented 27/09/2019 às 12:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .