O que é um microfrontend?

A maioria dos desenvolvedores já ouviu falar de arquitetura de microsserviços, mas o front-end de microsserviços é um termo muito menos conhecido. Como o nome sugere, o conceito de microfrontend é semelhante ao de microsserviços. Ele tenta resolver muitos dos mesmos problemas que os aplicativos monolíticos apresentam. Eles são muito grandes, difíceis de trabalhar e de fazer mudanças. Integrar novas pessoas para trabalhar nelas pode ser um problema. Além disso, se várias equipes de pessoas estiverem trabalhando em diferentes partes do aplicativo, elas precisarão coordenar todas as mudanças entre si.

Os microsserviços ajudam a dividir o back-end em serviços mais independentes. A mesma abordagem pode ser usada para dividir aplicativos de página única (SPAs, Single Page Applications) em aplicativos menores, com a necessidade adicional de um “orquestrador” que possa reunir diferentes partes novamente para que o usuário ainda esteja experimentando o comportamento do SPA.

Quais são as alternativas para uma arquitetura de micro-frontend?

É claro que há outras maneiras de lidar com alguns dos aspectos indesejados de aplicativos enormes, como separar parte do código em seu próprio pacote de npm. Isso pode resolver parte do problema, como o repo ser muito grande. Por exemplo, no Angular, você também pode separar o código em um módulo que pode ser carregado com preguiça. Isso pode permitir a divisão vertical do aplicativo até certo ponto. Mas também tem suas desvantagens, como ter que criar o projeto de alto nível quando uma das dependências é atualizada. Além disso, a experiência do desenvolvedor não é tão boa. Ao usar qualquer tipo de estrutura, é uma boa ideia fazer upgrade de tudo para a mesma versão, mas é um grande empreendimento que ninguém está empolgado para fazer. Você também tem a opção de juntar vários aplicativos via iframe. Isso os torna independentes, mas eu diria que talvez muito independentes, pois a comunicação entre aplicativos é um problema, assim como o compartilhamento de código, estilos, etc. 

Micro Frontends para o resgate?

Os micro front-ends são uma combinação dessas duas abordagens. Cada microfrontend é um aplicativo separado que é comparado ao SPA. Ele não é compilado para um index.html com scripts vinculados e arquivos de estilo, mas para um módulo JavaScript. Em vez de um iframe no aplicativo “principal”, o código define que quando a URL está correspondendo a algum padrão, o módulo é então carregado com preguiça e colocado em um local específico. Graças a isso, podemos ter vários aplicativos na mesma página que podem ser interconectados entre si.

Como resultado, os micro front-ends não precisam lidar com o layout do aplicativo e regras básicas de CSS que só podem ser tratadas no aplicativo principal. Igualmente benéfico é o fato de que se eu tiver vários micro front-ends usando a mesma versão do React, posso pedir que eles compartilhem o módulo React. Ele não precisa ser baixado separadamente para cada micro front-end. Ter diferentes versões de um módulo JS também não é um problema.

A principal preocupação com micro front-ends é garantir que seus estilos não transbordem para outras partes do aplicativo. Felizmente, as estruturas de interface do usuário mais usadas têm ferramentas para lidar com isso com facilidade.

Ferramentas para arquiteturas de micro-frontend

Escrever seu próprio código para carregar aplicativos de microfront-end seria uma tarefa muito grande. Felizmente, há várias estruturas que lidam com orquestração e oferecem ferramentas para converter aplicativos gravados nas estruturas mais populares para o formato de microfrontend.

Na Pure, escolhemos um único spa. Os principais benefícios que descobrimos são que é fácil de entender, oferece amplo suporte para estruturas JS e tem documentação detalhada. Além disso, o Single Spa oferece vários tipos de micro front-ends, cada um adequado para trabalhos ligeiramente diferentes.

No momento, estamos usando apenas o tipo “Aplicativo”, pois é o mais fácil de usar para mudanças de SPA para micro front-ends. Outros tipos também exigem uma arquitetura de microfrontend mais detalhada. Além disso, “Aplicativo” é recomendado como padrão pelos autores de spa único.

Criação de micro front-ends usando a estrutura única de SPA

No momento, estamos usando um único spa com um de nossos aplicativos maiores que atualmente contém cerca de cinco micro front-ends. Às vezes, equipes diferentes estão trabalhando nesses micro front-ends do que as principais equipes de desenvolvimento de aplicativos. Felizmente, nos últimos seis meses desde que mudamos para micro front-ends, não tivemos nenhum problema relatado. Também estamos muito satisfeitos com o fato de o aplicativo principal não estar tão cheio quanto no passado e poder ser atualizado com mais facilidade. Além disso, não nos preocupamos com efeitos colaterais ao adicionar novas funcionalidades, pois normalmente isso é feito com um micro front-end. No futuro próximo, gostaríamos de dividir front-ends de outros grandes aplicativos que estamos desenvolvendo na Pure, pois os benefícios provavelmente também serão muito significativos para eles. Recomendamos experimentar os micro front-ends se você estiver enfrentando os mesmos problemas que estávamos.