Como Micro Frontends podem ser uma ponte para adesão de novas tecnologias.

Esse material é referente a palestra abordada sobre #microfrontends na edição do BrazilJsOnTheRoad em São Carlos/SP. Abordo sobre o que é Micro Frontends e como estamos adotando na Conta Azul.

Transcript

1. Como micro frontends podem ser uma ponte para adesão de novas tecnologias. via @cristofersousa
2. Front-end Developer na @ContaAzul Formação: - IFSP | São Carlos - Graduação - UFSCar | São Carlos - Pós Graduação Web Orgulho: - Pai da Mel. - Co-Criador da Comunidade @Opensanca. <3 Cristofer Sousa
3. Opensanca Open Source, Tecnologia e Comunidade Conhecimento é livre.
5. Somos um time
6. O bom desenvolvimento de front-end é difícil. Escalonar o desenvolvimento de front-end para que muitas equipes possam trabalhar simultaneamente em um produto grande e complexo é ainda mais difícil. @MartinFowler Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. @MartinFowler https://martinfowler.com/articles/micro-frontends.html
8. https://twitter.com/tlakomy/status/1182218028852928514
9. Raspagem de Informação
10. https://twitter.com/BharatMhaskar/status/1182236082731016192
11. O que são micro frontends?
12. A idéia por trás do micro frontends é pensar em um site ou aplicativo da web como uma composição de recursos pertencentes a equipes independentes. Cada equipe possui uma área distinta de negócios ou missão na qual se preocupa e é especializada. Uma equipe é multifuncional e desenvolve seus recursos de ponta a ponta, do banco de dados à interface do usuário. https://micro-frontends.org/
13. https://micro-frontends.org/ressources/diagrams/organisational/monolith-frontback-microservices.png
14. Com micro frontends, a aplicação se torna uma composição de módulos mantidos por diferentes times e em diferentes repositórios mas que, no fim das contas, coexistem no mesmo ambiente: o navegador do cliente.
15. https://micro-frontends.org/ressources/diagrams/organisational/verticals-headline.png
16. Seja Agnóstico em Tecnologia Cada equipe deve poder escolher e atualizar sua stack sem precisar se coordenar com outras equipes. Mantenha o módulo(código) isolado da equipe Não compartilhe em tempo de execução, mesmo que todas as equipes usem a mesma estrutura. Crie aplicativos independentes. Não confie no estado compartilhado ou nas variáveis globais. Estabeleça prefixos para a equipe Concorde em convenções de nomenclatura onde o isolamento ainda não é possível. Espaço para nome CSS, Eventos, Armazenamento local e Cookies para evitar colisões e esclarecer a propriedade. Favoreça os recursos do navegador nativo sobre as APIs personalizadas Use Eventos do Navegador para comunicação em vez de criar um sistema PubSub global. Se você realmente precisa criar uma API de equipe cruzada, tente mantê-la o mais simples possível. Crie um site resiliente Seu recurso deve ser útil, mesmo que o JavaScript tenha falhado ou ainda não tenha sido executado. Regras de Ouro
17. Para que possamos ser interdenpendentes, temos nossa própria biblioteca de componentes, o CA-Components.
18. "[...] Uma rota alternativa (para reescrever um sistema completamente) é criar gradualmente um novo sistema em torno dos limites do antigo, permitindo que ele cresça lentamente ao longo de vários anos até que o sistema antigo seja estrangulado" Martin Fowler https://martinfowler.com/bliki/StranglerFigApplication.html
19. - Produtividade - Dificuldade em manter o monolito atualizado quando se tem biblioteca e frameworks como: AngularJs, prototype, jQuery e etc; - Queremos evoluir nossa forma de desenvolvimento Que problemas tentamos resolver?
20. Tá, mas e aí! Como vocês fazem isso?
24. https://app.contaazul.com/#/obrigacoes-fiscais/integracao-fiscal
27. Não seja, um agente do caos, controle-o.
28. https://martinfowler.com/articles/micro-frontends/deployment.png Cada micro front-end é implantado em produção de forma independentemente
29. O que estamos melhorando? - Bases de código menores, mais coesas e sustentáveis; - Organizações mais escaláveis com equipes autônomas e dissociadas; - Capacidade de atualizar, ou mesmo reescrever partes do front-end de maneira mais incremental.
30. Por que escolhemos Vue? - Curva de aprendizado - Semelhança com AngularJs - Vue faz o DE <> PARA da familiaridade do AngularJs com a performance do React. https://br.vuejs.org/v2/guide/comparison.html
31. Arquitetura desacoplada e baseada em componentes
32. Microfrontends nos dão mais liberdade para mudanças
33. Pessoas, que fazem/fizeram acontecer: Quem cria software, são pessoas, nunca deixe de evidenciar isso na sua organização.
34. contaazul.com/vagas
36. twitter @cristofersousa medium @cristofersousa www cristofersousa.github.io email cristofersousa@gmail.com