Micro Front-Ends em Flutter

Published in

Mesa Mobile Thinking

5 min readFeb 7, 2023

Neste artigo iremos abordar o conceito de micro front-end, com exemplos práticos aplicado ao framework Flutter.

O que são micro front-ends?

Com a evolução tecnológica que estamos vivendo, percebeu-se que aplicações de front-end de grande porte necessitavam de estratégias diferentes para que possam continuar crescendo sem que afete sua qualidade. Algumas das dificuldades enfrentadas foram:

Necessidade de entregas constantes;
Dificuldade em manutenção;
Impactos imprevistos em diferentes pontos da aplicação;
Múltiplas equipes;
Upgrade da tecnologia utilizada periodicamente.

dentre outros.

Sendo assim, a fim de mitigar esses problemas, inspirado em técnicas utilizadas e consolidadas no back-end, como os micro-serviços, surgiram os micro front-ends.

Micro front-end consiste em um padrão arquitetural, o qual tem o intuito de facilitar o desenvolvimento e gerenciamento de uma aplicação. Consiste em uma abordagem de separação em contextos lógicos da aplicação, segregando-a em pequenas partes. Em outras palavras, consiste na divisão da aplicação em módulos independentes, normalmente separados por domínios ou contextos de uso, que podem ser gerenciados ou não por diferentes equipes e juntos, formam o todo.

Como exemplificado na Imagem 01, temos três micro front-ends, chamados de A, B e C, que possuem contextos próprios e são independentes entre si, podendo ter diferentes times atuando em cada um deles, sem prejudicar o desenvolvimento. E, possuímos uma aplicação base que realiza a integração dos N micro front-ends, para em conjunto, formarem a aplicação completa.

Mono-Repo e Multi-Repo

Ao trabalharmos com micro front-ends, temos duas formas de organização, são elas:

Micro Front-End utilizando Mono-Repo;
Micro Front-End utilizando Multi-Repo.

O Mono-Repo consiste em armazenar todo o código-fonte da aplicação em um mesmo repositório. Sendo assim, a separação de lógica dos micro front-ends é feita via folders.

Já utilizando um padrão Multi-Repo, os micro front-ends são segregados em repositórios distintos, tendo um projeto base responsável pelo import de todos os demais micro front-ends.

Imagem 02 — exemplo mono-repo e multi-repo

Como exemplificado na Imagem 02, à esquerda possuímos uma abordagem multi-repo, onde cada projeto possui seu repositório independente. Nesse sistema, cada repositório pode ter sua própria estrutura. Já à direita, possuímos uma abordagem mono-repo, onde cada projeto possui sua estrutura, contudo, todos estão armazenados em um mesmo repositório.

Implementação em Flutter — Mono-Repo

Para implementarmos uma estrutura de micro front-end em Flutter, primeiramente criamos um projeto Flutter.

flutter create nome_do_app

Esse projeto corresponderá ao projeto base, o qual faz a integração com todos os micro front-ends e possui o arquivo main.

Em seguida, criaremos o diretório packages na raiz do projeto.

E, dentro do diretório packages, criaremos o diretório micro_apps. Neste diretório estarão contidos os nossos micro front-ends. Para criarmos um micro front-end, executamos o comando:

flutter create --template=package nome_do_microapp

Como supracitado, os micro front-ends são segregados em contextos lógicos, de modo que os módulos sejam independentes entre si. Então, neste exemplo, criamos o micro front-end food e login.

Cada micro-app criado possui sua estrutura de projeto individual, podendo utilizar dependências e arquiteturas distintas, de maneira que um módulo não impacte no outro. Vide exemplo abaixo:

Sendo assim, podemos criar todos os componentes necessários para o determinado contexto e exportamos, a fim de serem visíveis por quem for utilizá-los. Assim, criamos o seguinte arquivo:

Por convenção de nomenclatura, chamamos o arquivo de food.dart, por ser o nome do módulo. Dentro dele realizamos a declaração de library, na linha 1, e abaixo, adicionamos todos os itens que queremos que sejam exportados, no nosso exemplo, adicionamos o export de um único item na linha 3.

Neste projeto, exportamos os componentes da pasta UI, onde temos criado o componente FoodList:

Então, para utilizarmos esse novo micro front-end, que acabamos de criar, adicionamos ele ao pubspec.yaml do projeto:

Adicionamos na seção dependencies o novo micro front-end criado, atente que precisamos adicionar o nome que definimos como library, vide Imagem 07. Além disso, passamos o caminho do novo micro front-end, na variável path. Neste exemplo, criamos o micro front-end em packages/micro_apps/food.

E pronto! Uma vez que adicionamos ao pubspec.yaml e o executamos com sucesso, já podemos utilizar nossa nova dependência em todo o projeto.

Dessa forma, estamos utilizando o componente definido no micro-app food, dentro da HomeScreen do projeto base!

Implementação em Flutter — Multi-Repo

No exemplo supracitado, realizamos a implementação de micro front-ends em Flutter utilizando Mono-Repo.

Para implementarmos utilizando Multi-Repo, ao invés de criarmos os micro front-ends dentro do diretório package, criaríamos de maneira isolada, executando somente o comando:

flutter create --template=package nome_do_microapp

e adicionaríamos ao seu devido repositório Git.

E para utilizarmos, ao adicionar no pubspec.yaml da aplicação base, a variável url corresponderia a url git daquele projeto, por exemplo:

Assim, o projeto base e todos os micro front-ends possuiriam seus próprios repositórios individuais.

Além disso, podemos adicionar a tag ref, a qual identifica a versão do micro-app que desejamos utilizar. Sendo assim, podemos ter diferentes versões de um mesmo micro-app sem que o desenvolvimento seja afetado.

Conclusão

Micro Front-end é algo relativamente novo, porém totalmente viável de se utilizar. Algumas das vantagens que podemos citar são:

Maior facilidade na correção de bugs;
Facilidade na integração de novas pessoas ao projeto;
Facilidade de implementação de novas features;
Times mais independentes.

Em aplicações grandes, tem um grande benefício, contudo, deve ser analisado caso a caso a utilização. Ao passo que traz benefícios, também pode adicionar uma complexidade e dificuldade de gerenciamento desnecessário em projetos de pequeno e médio porte.

Esse projeto exemplo pode ser encontrado em: https://github.com/GabrielleAmorim/flutter-micro-frontend