Micro Frontends — Criando aplicativos mais profissionais com o Modular
Published: 2024-04-19 02:11:19

### Micro Frontends — Criando aplicativos mais profissionais com o Modular

Fala Devs!

Já sabemos que o modular é uma ferramenta muito poderosa e que nos ajuda muito na estrutura de nossos projetos, ele nos propõe uma estrutura de micro **frontends** (**microapps**) onde conseguimos separar nosso aplicativo em módulos, um dos problemas(ou não) que isso pode nos causar é que a estrutura trata de um monólito, onde todos os módulos estão presentes no mesmo projeto e conforme seu projeto vai crescendo, sua base de código também irá ficando enorme. 

Para resolver alguns problemas que o monólito pode nos proporcionar existem outros dois tipos de estratégia de estruturar seu projeto, o **monorepo** e o **multirepo**.

### MONOREPO E MULTIREPO

Esses dois termos se você utiliza GitHub ou qualquer outra ferramenta de gerenciamento de código muito provavelmente já ouviu falar desses termos. Mas o que eles significam exatamente? Basicamente monorepo (que vem de Repositório Monolítico) e uma estratégia de armazenamento de base de código de projetos ou package em único repositório, já o multirepo e a estratégia de armazenamento de código de projetos ou package em repositórios separados.

Há um vídeo muito bacana do canal Código Fonte TV no Youtube falando sobre o monorepo
<a href="https://www.youtube.com/watch?v=BbNIuUy_F0w" target="_blank">
 <img src="https://img.youtube.com/vi/BbNIuUy_F0w/0.jpg" alt="Monorepo (Por Que Essa Estratégia Funciona em Grandes Empresas?) " width="240" height="180" border="10" />
</a>
### PACKAGE

Primeiramente precisamos conhecer o padrão baseado em pacotes, isso significa que para a utilização do monorepo e multirepo cada micro aplicação estará em um projeto separado e eles se comunicarão através de dependências de package.

É muito simples a criação de um projeto que será um package, basta em seu terminal adicionar o parâmetro --**template=package** em seu flutter create.

![](https://cdn-images-1.medium.com/max/800/1*CkHFImi1rYsU1JtyJRPNzw.png)

### PROJETO

![](https://cdn-images-1.medium.com/max/800/1*Nl02nQNMG5NIC6vqIFfsVw.gif)

O projeto que iremos criar neste artigo trata de um app simples onde temos uma **SplashScreen**, uma tela de **Login** e nossa HomePage (que está dividido entre uma tela de busca e uma tela de detalhes).

Aqui conseguimos identificar 3 módulos que conseguimos torná-los independentes, o **Splash, Login e Home**.

### ESTRUTURA DE PROJETO

![](https://cdn-images-1.medium.com/max/800/1*vf-_IkphVNcXjlsoQRMVEw.png)

Na proposta da estrutura do projeto há uma quebra de funcionalidade (módulos) por package. E na imagem acima conseguimos também ver a dependência entre os projetos.

Vamos falar se cada um desses quadradinhos posteriormente.

### DEPENDENCIAS

Como cada modulo será um package precisaremos inserir as dependências nos projetos lá no nosso pubspec na sessão “**dependencies**”, quando trabalhamos com **monorepo** simplesmente adicionamos o parâmetro “**path**” e colocamos a referência da pasta do projeto.

![](https://cdn-images-1.medium.com/max/800/1*ucTfNKxsXE_HWCWh6QvDyA.png)

Quando formos adotar o multirepo é um pouco diferente, ao invés de referenciarmos o path, precisamos utilizar o parâmetro git e dentro dele a url passando o caminho do git.

![](https://cdn-images-1.medium.com/max/800/1*ldzLpCrCYN3LMwB4ReszvQ.png)

Uma vantagem de trabalharmos dessa forma é que conseguimos indicar as tags para referenciarmos versões do package, desta forma se algum dia criarmos uma versão nova que quebra nosso app, basta voltarmos para a versão antiga até que concerte o problema da versão.

Para isso em nosso projeto podemos utilizar os seguintes comandos para geração de tags

> Listagem de Tags: **git tag -n**

> Criação de **Tags: git tag ‘v<major.minor.patch>’**

> Exemplo: git tag v1.0.0

> Enviar as Tags: **git push –tags**

### COMMONS DEPENDENCIES

Começaremos a falar do projeto responsável por centralizar todas as dependências de package de terceiros no app, desta forma garantimos que todos os módulos utilizem a mesma versão de package e evitamos problemas de conflitos de versões.

![](https://cdn-images-1.medium.com/max/800/1*IDz2bK6J_IgNS1areR8L5g.png)

Neste projeto só teremos o arquivo main.dart e dentro dele exportarei todas as dependências que utilizarei no projeto e que está no meu pubspec.

![](https://cdn-images-1.medium.com/max/800/1*yJBasCulFa-FUGpHqxz6PQ.png)

![](https://cdn-images-1.medium.com/max/800/1*fY_dDr1An_Lv5KIJECnrjw.png)

### COMMONS

O commons é o pacote que será responsável por ter toda a funcionalidade que será compartilhada entre todos os módulos como **interceptors, widgets, stores,** **etc.**

### Modules

Os módulos são as quebras de funcionalidades do app. Eles são responsáveis pelas features do app, cada modulo deve possuir uma e somente uma responsabilidade

**IMPORTANTE: Os módulos são totalmente desacoplados e independente de outros módulos e não podem compartilhar informações entre eles, caso isso seja necessário, colocar no Commons.**

### CORE

O core é o coração do nosso app, ele fará a ponte de conversa entre o **base app** e os módulos é nele que estará a configuração das rotas principais e a chamada para o **MaterialApp()**

![](https://cdn-images-1.medium.com/max/800/1*PAEX4MIhHkBJ8RHWEGy_Og.png)

![](https://cdn-images-1.medium.com/max/800/1*fvhKPoU7SXT_0Xny_EsTYg.png)

### BASE APP

Por fim temos o base app que é o ponto de entrada da aplicação, ele irá conversar somente com o CORE que acessará os módulos.

**IMPORTANTE: Ele é o único projeto que irá ser criado com o template padrão do flutter (flutter create base_app). Os demais projetos necessitam ser criados com a flag –template=package (flutter create — template=package projeto)**

Ele apenas terá a chamada do runApp()

![](https://cdn-images-1.medium.com/max/800/1*E4EFBCM64xQuqz0vdIS-oA.png)

Gostou do assunto? Existe uma series de vídeo no canal do Deivid Willians falando sobre o assunto, confira lá
<a href="https://www.youtube.com/watch?v=5rjQ5ooWDoY&list=PLRpTFz5_57cufduUDgiZZqA_k5Q7UV_50&ab_channel=DeividWillyan%7CFlutter target="_blank">
 <img src="https://img.youtube.com/vi/5rjQ5ooWDoY/0.jpg" alt="Monorepo (Por Que Essa Estratégia Funciona em Grandes Empresas?) " width="240" height="180" border="10" />
</a>

O projeto que criei neste artigo você pode conferir no meu GitHub.
https://github.com/toshiossada/flutter_micro_frontend/ 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil