Thread by @matheusml

👉 MICRO FRONTENDS, a thread

1/ No Front-End nunca tivemos essas três coisas juntas:
- Escalabilidade
- Performance
- Evolutividade

No máximo tivemos duas, mas jamais todas as três.

2/ Escalabilidade no Front-End, diferente do que alguns pensam, significa que a aplicação escala, não pros usuários, mas para os desenvolvedores. Em outras palavras, a sua arquitetura é tão boa, que podemos adicionar novos desenvolvedores e esperar um crescimento da aplicação.

3/ Performance tem relação com diversos fatores: tamanho do bundle, animações com 60FPS, TTI o mais rápido possível, etc. Mas o que importa mesmo é: a experiência do usuário final é boa?

4/ Evolutividade é o quão fácil a sua aplicação consegue evoluir. Se a sua aplicação tiver um forte acoplamento com um framework, e a sua equipe quiser fazer uma alteração - vide migração do Angular 1 pro React - e não o conseguir, significa que a sua evolutividade é ruim.

5/ E como falei anteriormente, nunca tivemos essas três características - muito importantes - juntas no Front-End, mas com os Micro Frontends temos uma grandes chance de que isso mude.

6/ Mas antes de falar sobre Micro Frontends, a gente precisa entender a base dos Microservices.

7/ Os Microservices tem duas características principais:
- Focam em fazer bem apenas uma coisa
- Autonomia (deploy e disponibilidade independentes, mantém contratos, lidam com acesso de forma separada, etc)

8/ Essa ideia não é tão nova assim, o Uncle Bob já falava de como devemos arquitetar aplicações grandes, sem ter citado o termo Micro Services nenhuma vez:

"A system that must be developed with many teams must have an architecture that facilitates independent actions (..)"

9/ "(...) so that teams do not interfere with each other during development. his is accomplished by partitioning the system into well-isolated, independently developable components."

A base dos Microservices é essa. Podemos agora falar sobre os Micro Frontends. 🙏

10/ Quando tudo era mato, era assim que as aplicações eram construídas. Não existia nem Front nem Back. Era tudo um grande monólito com um desenvolvedor (lembra do Web Master?) que lidava com tudo. Obviamente esse modelo fracassou, porque as aplicações não escalavam.

11/ Até que surgiu a separação entre Back-End e Front-End. Isso até que foi bom por um período, mas a galera do Back-End foi sagaz o bastante para ver que tinha uma oportunidade ainda maior de melhoria.

12/ E esse é o modelo que grande parte das aplicações são arquitetadas ainda hoje. Perceba que o Back-End evoluiu, mas o Front-End continua parado 10 anos no tempo.

13/ Com isso, temos no Front-End alguns problemas:
- Escalabilidade comprometida
- Código legado
- Grande acoplamento a um único framework
- Menos código isolado

14/ E se formos evoluir, do jeito que o Back-End evoluiu, chegamos no modelo da imagem abaixo. Ao invés de um grande monólito no Front-End, teremos equipes End-to-End que são responsáveis por toda uma parte da aplicação. Dividir pra conquistar.

15/ Essa solução ajuda a resolver os 4 problemas citados anteriormente e além disso trás uma novidade bem legal: múltiplos frameworks, de forma bem feita, numa mesma aplicação.

16/ É evidente que só porque você pode ter múltiplos frameworks, não significa que você deva ter isso. O ideal é que seja apenas um framework, mas caso surja uma novidade, ou mesmo um update de versão, podemos na arquitetura Micro Frontends ir fazendo o upgrade aos poucos.

17/ Além disso poderemos ter: deploys separados, dependências em versões diferentes (ex.: uma equipe usa o lodash 2.x.x e a outra usa o lodash 1.x.x), e também repositórios separados. Sim, poderemos ter pela primeira vez, de forma elegante no Front-End, todas essas features.

18/ Lembrando que pro usuário final, é importante que tudo ainda continue parecendo um monólito. Por isso é importante que as equipes se comuniquem e mantenha os mesmo padrões - principalmente de design - em toda a aplicação.

19/ E com isso, usando os Micro Frontends, pela primeira vez no Front-End temos um grande chance de ter todos esses pontos juntos:
- Escalabilidade
- Performance
- Evolutividade

20/ E quem está usando os Micro Frontends hoje? Todos esses caras da imagem (destaque pro Spotify). Nós aqui da Carta estamos fazendo também alguns experimentos, mas prefiro não prometer nada.

21/ Se eu consegui te convencer na parte teórica, então que tal se aprofundar um pouco mais na parte prática? Esse material abaixo certamente vai ajudar:

- micro-frontends.org
- medium.com/@tomsoderlund/…
- single-spa.js.org