Micro Front-Ends com Flutter
Como criar um projeto monorepo e multirepo com flutter.
Primeiramente vamos à definição do que é um Micro Front-end:
De acordo com a DEV Community, um Micro Front-end é um estilo arquitetônico que separa uma aplicação de front em várias camadas menores, cada uma sendo responsável por um módulo específico da aplicação, normalmente separadas por domínios ou contextos de uso, permitindo assim, que diferentes times cuidem dessas funcionalidades de forma independente.
Além de diminuir a complexidade degrandes projetos, onde possibilita separa-lo em várias partes menores, assim consegue trabalhar de forma parcialmente independente.
Essa solução é muito útil em cenários onde temos um projeto frontend com muitos times responsáveis trabalhando em apenas uma base de código. Diversos problemas podem surgir quando temos um monolito, como:
- Emergir conflitos muito frequentes, afetando todo o projeto;
- Basta uma pequena mudança que irá impactar todo o projeto;
- Dificilmente é possível trabalhar com diferentes tecnologias.
- Muitos times trabalhando em um mesmo código.
- Grande acoplamento.
Nesses cenários, faz sentido utilizar a arquitetura para ter vantagens como:
- Cada time será responsável por apenas uma parte do projeto de forma independente;
- Fazer diversas tecnologias conviverem no dia a dia. Por exemplo, uma parte do time pode trabalhar com Flutter enquanto a outra trabalha com Java ou Kotlsem nenhum conflito;
- Partes separadas do projeto rodando em locais diferentes e em ciclos de deploy diferentes, onde uma alteração não irá impactar em outra parte do projeto.
- Menor acoplamento.
- Possibilidade de trabalhar com princípios de responsabilidade única.
Monorepo e Multirepo
De acordo com Toshi Ossada, em seu artigo diz que basicamente um 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 é a estratégia de armazenamento de código de projetos ou package em repositórios separados.
Vamos a um exemplo prático de monorepo
Primeiramente você precisará criar um projeto.
flutter create projectname
Não vou me extender a construir um front end, vou criar apenas um modulo para exemplificar:
- dependencies:
— Onde iremos depositar todas as nossas dependências.
Dentro de libem seuprojectnamecrie uma pasta chamada repos.
OBS: Você também pode usar outra nomenclatura se lhe parecer mais confortável, muitas pessoas usam como library ou modules, eu prefiro chamar de repos.
Inicialmente vamos começar com nossos repos localmente <monorepo>, depois de testados, vamos consumi-los direto do github e remove-los localmente <multirepo>.
Criando nossos repos
Para criar diferentes repos utilizamos o formato de packages, exatamente o mesmo formato de pacotes comuns no seu dia a dia como get, http, firebase.
Para criarmos um package abra seu projeto no terminal, acesse a pasta que você criou no passo anterior, seu terminal deve estar parecido com isso (Windows):
- C:\projetos\deebx\projectname\repos>
Agora execute o comando flutter create --template=package dependencies
Pronto! Agora vamos delegar a responsabilidade de manter as dependências nesse package.
Configuração
Em seu projeto principal, adicione algumas dependências apenas para exemplificarmos, no meu caso meu arquivo projectname/pubspec.yamlestá assim:
O pubspec.yamldo nosso package deve estar dessa forma neste momento:
Primeira coisa a se fazer é alterar o sdk para o mesmo valor do sdk do seu projeto.
Após isso vamos trânferir nossas dependências do projeto, para as dependencias do package, removendo-as do nosso projeto principal.
Seu package/pubspec.yaml deve parecer algo como:
Seu projectname/pubspec.yamldeve parecer com:
Agora basta rodar seu projeto com flutter run, e nada deve mudar, você apenas está recuperando as depêndencias de outro lugar, neste caso seu package.
Pronto você acaba de criar um monorepo!
Agora vamos “trasnformar” seu monorepo em um multirepo
Vantagens do multirepo:
- Versão de biblioteca independente.
- Lançamentos independentes.
- Ajuda definir o controle de acesso em toda a organização.
Alterando para multirepo
É mais fácil do que se parece, se você não possui experiência com o git vai ser necessário aprender a como criar um novo projeto e repositorio, este tutorial pode te ajudar.
Levando em consideração que você tenha o conhecimento mínimo necessário, podemos começar.
O primeiro passo é cirar nosso repositório, no meu caso no github, e fazer o push do nosso package dependencies
Após isso, basta alterarmos nosso arquivo pubspec.yamldo projeto principal para.
Agora rode o projeto com flutter run
O GitHub, no meu caso, irá pedir uma permissão, caso seu repositório seja privado, basta fazer o login com uma das maneiras disponibilizadas e pronto, caso tenha sucesso, pode excluir as pastas contidas em repos criada anteriormente.
Agora suas dependências estão em outro repositório, separados da sua aplicação principal.
Resolvendo warning de imports
Caso você tenha percebido depois desta atualização no projeto, seus pacotes, mesmo que funcionem, indicam um warningDepend on referenced packages.
Isso porquê você não definiu explicitamente quais dependências seu package dependenciesvai fornecer.
em lib apague o arquivo gerado e crie um arquivo main.dart, ele vai conter a exportação dos modulos que poderemos utilizar e resolverá o warning.
Para usar seus pacotes no projeto principal basta importar import "pacakge:dependencies/main.dart";
Bônus
Se você quiser facilitar a visualização desse package externo em seu projeto principal, pode adiciona-lo como submódulo com o git.
Para isso crie a pasta respos a mesma de antes, no nível de lib, dentro de projectname
Após isso vá para o seu terminal e digite o seguinte comando:
git submodule add <https://github.com/<user>/<repo-name>.git respos/<repo-name>
Agora você tem um clone do seu package em seu projeto,.
Se você está se perguntando qual a diferença dessa abordagem pra monorepo é simples, localmente temos sim esse projeto clonado, mas ao dar um git push, estamos setando apenas a referência dele para o repo original, se olhar a pasta repos no seu github vai ver algo como.
Caso não queira enviar alterações do pacote, ou não for o responsável por exemplo, não é necessário clonar, mas caso clone, pode adicionar a pasta repos em seu .gitignore
Por hoje é tudo!!!
Alguma dúvida ou sugestão entre em contato.
Referências
Micro-Apps Micro Front-Ends Vilson Blanco Dauinheimer — FlutterVikings
