MICRO FRONTENDS

1. MICRO FRONTENDS By @celsohenrique_

2. BACKGROUND Celso Henrique 8 anos de experiência em desenvolvimento web em diversas empresas, com diferentes stacks e necessidades.  Frontend Chapter Lead | Easynvest

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

4. Pensamento micro "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

5. Monolito Backend & Frontend

6. Frontend & Backend Frontend SPA Backend

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

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

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

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

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

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

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

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

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

16. Iframes App 1 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

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

18. VAMOS VER NA PRÁTICA?

19. 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.

20. VAMOS VER NA PRÁTICA?

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

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

23. DÚVIDAS?

24. LINKEDIN Obrigado! linkedin.com/in/devfrontend GITHUB github.com/celso-henrique TWITTER @celsohenrique_