O documento discute Micro Frontends, uma abordagem arquitetônica onde aplicações web são divididas em pequenas partes independentes, chamadas de Micro Frontends. O documento explora o que são Micro Frontends, principais modelos de arquitetura, abordagens para implementação, ferramentas de apoio e desafios. O autor conclui que Micro Frontends não são uma solução para todos os problemas e que comunicação entre times é essencial.

1. ARQUITETURA E TECNOLOGIA
MICRO
FRONTEND
DE UM JEITO QUE VOCÊ NUNCA VIU
Wagner Souza

2. Wagner Souza
Arquiteto de Software Curso técnico
Informática para Internet
Graduação
Sistemas Para Internet
Pós graduação
Engenharia Web
IN: wagnerssouza90

3. Tópicos de Hoje
Um breve resumo
O que é Frontend?
O que é Micro Frontend?
Principais modelos de Arquitetura de Sistemas
Abordagens para Micro Frontend
Ferramentas de apoio
Micro Frontend no mundo real
Conclusão

4. Frontend
O protagonista Quem ele é?
Um ser humano que muitas vezes não tem um papel
bem definido dentro de um projeto. ~polêmico
O que ele faz?
- Faz o Front
- Basicamente: Aplicações para Web e Mobile
Onde ele trabalha?
Freela / Home Office e/ou Empresas que tenham
área de tecnologia ou marketing. ~polêmico
O que ele estuda?
Basicamente: HTML, CSS e JS

5. O que é Micro Frontend?
TERMO GANHOU BASTANTE DESTAQUE EM 2016
“A web application is broken up by its pages and features, with each feature
being owned end-to-end by a single team — ThoughtWorks”
“The idea behind Micro Frontends is to think about a website or web app as a
composition of features which are owned by independent teams. Each team
has a distinct area of business or mission it cares about and specialises in. A
team is cross functional and develops its features end-to-end, from database
to user interface — micro-frontends.org".

6. PRINCIPAIS
MODELOS DE
ARQUITETURA
Monolito FULL
Tudo junto e misturado: cshtml, php, erb, jsp.
Monolito com SPA
Modelo divide bem a responsabilidade, porém
continua com alto acoplamento.
SPA + Micro Services
Projetos independentes, modelo vem ganhando
bastante espaço.

7. 1 2 3 4 5 6 7 8 9 10
Tomar decisão baseado em popularidade?
Muita gente falando e fazendo
O termo “Micro Frontend” é muito popular, se pesquisarmos no
GitHub por micro frontends e/ou microapps existem 1666
repositórios relacionados hoje 13/08/2020

8. 1 2 3 4 5 6 7 8 9 10
Seu projeto é adequado para Micro Frontend?
Você conhece de fato sua aplicação/produto?
• Sua aplicação tem muita responsabilidade?
• Sua aplicação necessita de desacoplamento?
• Sua aplicação tem um código muito antigo?
• Sua empresa está preparada para especializar os times?
• Não é uma preferência de uma pessoa?
• Quer usar outro framework?
Seu caso se encaixa em algum desses cenários?

9. 1 2 3 4 5 6 7 8 9 10
Você precisa mesmo de Micro Frontends?
Quais são os benef ícios de Micro Frontends?
• Menos código
• Menos complexidade
• Maior desacoplamento
• Código especializado
• Agnóstico a frameworks
• Equipe de especialistas
• Equipe multidisciplinar
• Deploy independente
• Flexibilidade
Esses benef ícios são importantes para você?

10. 1 2 3 4 5 6 7 8 9 10
Vamos falar sobre os problemas?
Quais são as desvantagens dos Micro Frontends?
• Atualização de dependências
• Interdependência entre micro frontends
• Problemas com escopos de css e js
• Single Sing-On (SSO)
• Consumo de memória do browser
• Carregamento um pouco mais lento
• Experiência do usuário
Você pode conviver com essas desvantagens?

11. 1 2 3 4 5 6 7 8 9 10
Qual abordagem de Micro Frontend você escolherá?
Existem diversos tipos de implementações
• SSR - Server Side Rendering
• Build-time integration - Monorepo
• Runtime integration via Iframes
• Runtime integration via javascript
• Runtime integration via Web Components
Entre as opções, qual você escolherá?

12. 1 2 3 4 5 6 7 8 9 10
Você vai escolher uma abordagem existente?
Existem muitos f rameworks para isso
• Mosaic - Zalando
• single-spa
• OpenComponents
• Polymer Project
• NUT
• Podium
• Piral
Você pode usar uma solução pronta ou criar a sua

13. 1 2 3 4 5 6 7 8 9 10
Quantos Micro Frontends você terá?
“Vamos modularizar nossa aplicação” ~ eles disseram
• Como você dividirá sua aplicação
• Cada caso é um caso
• Você deseja ter vários micro frontends na mesma tela?
• Separar por rotas de navegação?
• Você vai compartilhar dados / estados entre Micro Frontends?
• Seu Micro Frontend será executado em domínios diferentes?
• Onde seu Micro Frontend será hospedado?
Quanto mais, menos acoplamento, sobrecarga para gerenciar
Quanto menos, mais acoplamento, menos sobrecarga para gerenciar

14. 1 2 3 4 5 6 7 8 9 10
Qual a estrutura ideal para seu projeto?
Dividir responsabilidades ou agrupá-las?
• Multiple repositories
• Governança
• Atualizações constantes
• Monorepo - Single repository
• Pacotes grandes
• Complexidade (package.json)
• Monolítico
Qual sua escolha? Vários repositórios ou um monorepo?
Você pode combiná-los!

15. 1 2 3 4 5 6 7 8 9 10
Quantos frameworks/libs você deseja usar?
Agnóstico a f rameworks e libs
• Muita diversidade atrapalha
• Liberdade para escolher
• Angular
• React
Se puder escolher, qual ou quais deseja usar?
• Vue
• Svelt
• Ember
• Outros …

16. 1 2 3 4 5 6 7 8 9 10
Skin in the game
Até onde está disposto a pagar?
• Muitos desenvolvedores são motivados a inovar
• Todos querem entregar mais com menos
• Erros e acertos
• Até agora não falamos de código :)
• Em alguns casos você criará sua própria solução
• Precisamos dedicar tempo para isso, é um projeto e não uma tarefa
Dá para encarar?

17. Style Guide ComponentesBranding
Ferramentas essenciais
Design System

18. ISOLADO
Domínios de negócio
COMPARTILHADO
Fragmentos

19. Micro Frontend
ALGUNS EXEMPLOS DE APLICAÇÃO

27. Conclusões
• Faz sentido ir para Micro Frontend?
• Micro Frontend não resolve todos os problemas
• Micro Frontend não é bala de prata
• Comunicação é essencial
• Espaço para inovação
• Feature toggle like

28. MUITO
OBRIGADO
Arquitetura e Tecnologia
WAGNER SOUZA
wagnerssouza05@gmail.com