Arquitetura micro frontends para mobile.

Julio Fernandes
4 min readFeb 12, 2022

--

Você deve estar se perguntando. O que micro frontend tem relação com desenvolvimento mobile 🧐. Acompanhe esse artigo que vou explicar melhor … eu acho 😅.

No passado, construíamos aplicações monolíticas, que pareciam ser uma boa solução para a época, mas que se provou o contrário com a evolução da nossa área. Daí surgiram diversas técnicas para a arquitetura de sistemas distribuídos e que hoje chamamos de microsserviços. Estas técnicas, garantiram uma independência entre os serviços, permitindo que equipes diferentes criassem serviços comunicáveis, utilizando tecnologias completamente diferentes, fazendo a escolha técnica mais adequada para a solução de cada problema.

No entanto, esta evolução aconteceu de formas diferentes para o backend, frontend e mobile.

Figura1: Reconstrução do monolito para microserviço

O que são Micro Frontends?

O termo ganhou notoriedade quando foi publicado pela primeira vez no Technology Radar da ThoughtWorks em 2016, sugerindo que as técnicas de microsserviços fossem aplicados também no desenvolvimento front-end. Os times internos começaram a chamar isto de micro frontends.

Em 2021 tivemos um update sobre esse termo também ser adotado para mobile.

Recentemente, no entanto, vimos projetos estendendo esse estilo de arquitetura para incluir micro frontends também para aplicativos móveis. Quando o aplicativo se torna suficientemente grande e complexo, torna-se necessário distribuir o desenvolvimento por várias equipes. Isso apresenta o desafio de manter a autonomia da equipe enquanto integra seu trabalho em um único aplicativo. (referência sobre o texto, Micro frontends for mobile | Technology Radar | Thoughtworks)

As principais ideias que sustentam os Micro Frontends

  • São pequenos, independentes e fracamente acoplados. Uma única equipe pequena de desenvolvedores pode escrever e manter.
  • Cada serviço é uma base de código separado, que pode ser gerenciado por uma equipe de desenvolvimento pequena.
  • Os serviços podem ser implantados de maneira independente. Uma equipe pode atualizar um serviço existente sem recompilar e reimplantar o aplicativo inteiro.
  • Os serviços são responsáveis por manter seus próprios dados ou o estado externo. Isso é diferente do modelo tradicional, em que uma camada de dados separada lida com a persistência de dados.
  • Os serviços comunicam-se entre si por meio de deeplinks ou patterns de coordinator bem definidos. Detalhes da implementação interna de cada serviço ficam ocultos de outros serviços.
  • Suporte à programação poliglota. Por exemplo, os serviços não precisam compartilhar a mesma pilha de tecnologia, bibliotecas ou estruturas.

Como podemos fazer isso no mobile?

Primeira coisa que precisamos pensar é: Modularização.

Vamos imaginar o aplicativo da XP, nos temos diferentes verticais: Investimentos, Serviços Bancários, Cadastro/Segurança, isso já seria um nível de modularização, correto? Porém se olhar as para os princípios do micro frontend, podemos afirmar que esses contextos são pequenos? A resposta seria não, mas para garantir que todos estão com o mesmo entendimento, vamos pegar um desses contextos e conhecer ele melhor.

Vamos usar Investimentos nessa analise, nesse contexto encontramos features de Fundos de Investimentos, Renda Fixa, Renda Variável, Carteira de Investimentos, Recomendações, etc. Com todas essas informações podemos então afirmar que Investimentos tem um contexto grande, e alem disso diversos times!

Dado isso podemos então criar nossos micro frontends com base nesses contextos menores (ex: Micro frontend de Fundos de Investimentos e um outro de Renda Fixa)? Sim podemos pensar dessa forma 😃.

Figura2: A visualização de um projeto utilizando o conceito de micro frontends

E qual a melhor estrutura para um micro frontend?

Novamente olhando para os princípios, temos que olhar atentamente para esse item: "Os serviços podem ser implantados de maneira independente. Uma equipe pode atualizar um serviço existente sem recompilar e reimplantar o aplicativo inteiro."

Dado isso, o ideal seria que nosso framework, tivesse uma estrutura de testes unitários, para garantir a qualidade da nossa aplicação, e um SampleApp, dessa forma podemos compilar um app separado e validar nossas alterações sem depender de uma aplicação maior e assim ganhar tempos preciosos de build time.

Figura3: Estrutura de pastas

Conclusão

O desenvolvimento mobile é difícil. Dimensionar o desenvolvimento para que muitas equipes possam trabalhar simultaneamente em um produto grande e complexo é ainda mais difícil. Nesse artigo eu tentei descrever os benefícios de dividir uma visão monolítica ou de contextos muitos grandes em partes menores e mais gerenciáveis e como essa arquitetura pode aumentar a eficácia e eficiência das equipes que trabalham orientados a micro frontends.

Alem disso caso você queria algo pronto, que crie uma estrutura rápida, usando conceitos mais avançados de inversão de dependência, injeção de dependência, xcodegen, entre outras coisas, esse é o link certo para você MicrofrontendGenerator 😃

--

--