Micro Frontends — Criando aplicativos mais profissionais com o Modular

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

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.

PROJETO

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

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.

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.

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’

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.

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.

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()

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()

Gostou do assunto? Existe uma series de vídeo no canal do Deivid Willians falando sobre o assunto, confira lá

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

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