Definição de arquitetura de microfront ends co tecnologia de API com C# dotnet core

1. MICRO
FRONTENDS
By @alexandroalves_

2. Alexandro Alves
Software Engineering | GlobalHitss
BACKGROUND
20 anos de experiência em análise e
desenvolvimento de sistemas em diversas
empresas.

3. Agenda
Pontos de discussão
Pensamento micro
O que são micro frontends?
Princípios da arquitetura
Abordagens na prática

4. "MICRO ARE THINGS WE CAN CHANGE.
TODAY, TOMORROW, IN THE NEAR TERM
FUTURE. THEY ARE THINGS WE BELIEVE
TO BE IN OUR CONTROL" - JORDAN
GONEN
Pensamento
micro

5. Monolito
Backend &
Frontend

6. Frontend &
Backend Frontend SPA
Backend

7. Frontend &
Micro
Services
Frontend SPA
Auth Service
API Gateway / BFF
Cart Service

8. PROBLEMAS COM MONOLITOS
ESCALABILIDADE
Escalar o time e a
aplicação tornam-
se tarefas mais
complexas ao longo
do tempo.
TECNOLOGIAS
Monolitos
reduzem a
capacidade de
utilizar a tecnologia
certa para cada
cenário.
COMPLEXIDADE
Com maior
complexidade de
código, mais riscos
e dificuldades nas
entregas contínuas.
COMUNICAÇÃO
Novas
funcionalidades
precisam de um
alto nível de
coordenação.

9. Rendimentos
decrescentes
Ceteris paribus
Um fator de produção reduzir-se-á conforme
o aumento da quantidade utilizada desse
fator.
Ao longo do
tempo
Tamanho da aplicação
Entregas e inovação

10. "MICRO FRONTENDS ARE THE TECHNICAL
REPRESENTATION OF A BUSINESS
SUBDOMAIN, THEY PROVIDE STRONG
BOUNDARIES WITH STRICT CONTRACTS" -
LUCA MEZZALIRA
Micro
frontends

11. Micro
Frontends
& Micro
Services
Auth Service
API Gateway / BFF
Auth Frontend Cart Frontend
Cart Service
Reverse Proxy / SSR / Base App

12. GANHOS AO IMPLEMENTAR
Autonomia
Times tem independências nas
tomadas de decisões e entregas.
Múltiplas
tecnologias
Possibilidade de utilizar a melhor
tecnologias para cada cenário.
Coesão
Times representam
funcionalidades do negócio de
ponta a ponta.
Integração
contínua
Com maior independência
processos de ci/cd tornam-se
simples.

13. Princípios
da arquitetura
Orientado a
microsserviços
Funcionalidades
autônomas
Agnóstico de tecnologias
Experiência do usuário
♥

14. PREPARANDO-SE PARA DECOMPOR
DESIGN SYSTEM
Ter um bom design
system e / ou
biblioteca de
componentes é
essencial para
melhorar a
experiência.
DOMÍNIOS
Entenda os
domínios e
subdomínios para
quebrar a aplicação
e garantir coesão
nos micro
frontends.
NECESSIDADES
Existem diversas
abordagens para a
arquitetura, escolha
a que melhor
atende as
necessidades da
aplicação.
MENOS É MAIS
Entender os
princípios da
arquitetura e
respeita-los desde o
início vai evitar
gargalos
posteriores.

15. Tempo de execução
separado
Micro aplicações ou
funcionalidades são
executadas em um contexto
isolado, geralmente
separados por rotas ou
Iframes.
Tempo de execução
compartilhado
Micro aplicações ou
funcionalidades
compartilham o mesmo
contexto de execução que
outras, necessitando
encapsulamento.

16. Iframes
Abordagem onde são
utilizados Iframes para prover
o encapsulamento e a
comunicação ocorre através
de eventBus usando método
postMessage.
App
3
App 2
App 4
App 1

17. Micro Apps
As aplicações estão em
tempo de execução
diferentes isolados por rotas,
geralmente utilizando um
proxy reverso para isso.
App 1
App 2
App
3

18. Web
Components
As aplicações dividem o
mesmo tempo de execução e
o encapsulamento ocorre
através de web components
(shadow DOM) e a
comunicação entre
aplicações através de
customEvents e afins.

19. FRAMEWORKS
Frameworks javascript são
utilizados para prover o
encapsulamento, como o
single-spa e afins.
TRANSCLUSÃO
Ferramentas de SSR ou in-
browser proveem a
combinação das aplicações
tempo de execução.

20. “A PATTERN IS NOT A
COOKBOOK. IT LETS YOU
START FROM A BASE OF
EXPERIENCE TO DEVELOP
YOUR SOLUTION”
ERIC EVANS

21. DÚVIDAS?

22. Obrigado!
TWITTER
@alexandroalves_
GITHUB
LINKEDIN
github.com/alexandro-alves
linkedin.com/in/alexandroramosalves