Monorepos com nx.dev

Compartilhando códigos entre aplicações Angular e React

Transcript

1. Monorepos com nx.dev Compartilhando códigos entre aplicações Angular e React
2. Raí Siqueira Engenheiro de software e Tech Leader na Justa Pagamentos, apaixonado por tecnologias web, fã de cerveja, Open-Source e entusiasta Docker. LinkedIn: https://linkedin.com/in/raisiqueira GitHub: https://github.com/raisiqueira Instagram: https://instagram.com/rai_siqueira Blog: https://raisiqueira.dev
4. O que é um monorepo?
6. Como funciona o compartilhamento de dependências monorepo package.json - dep 01 - dep 02 - dep 03 projeto 01 projeto 02 projeto 03 lib 01
7. Prós e contras de monorepos - Reutilização de código; - mais fácil gerenciar e atualizar as dependências dos projetos; - Front e back no mesmo projeto; - compartilhar interfaces e types (projetos TypeScript). - Sua máquina vai precisar de um bom espaço físico caso o projeto esteja grande; - Pipeline de deploy pode demorar caso não use um bom sistema de cache; - Permissões no repositório tende a ficar enfraquecida caso algum novo dev entre na equipe e não tenha acesso a todos os projetos.
8. Projetos open-source que usam monorepo
9. Soluções para monorepos mais conhecidas atualmente
10. Monorepos com Yarn Workspaces - Iniciar um projeto do zero (yarn init -y); - Alterar o package.json e adicionar a propriedade PACKAGES; - Criar pasta packages com os projetos que vão compor o nosso monorepo.
11. Extensible Dev Tools for Monorepos
12. Fonte: @NxDevTools
17. Estrutura do projeto Apps - Toda as aplicações do projeto (incluindo 2e2) Libs - Todos os trechos que vão ser compartilhados; - Bibliotecas que vão servir de utilitários para as aplicações; - Componentes compartilhados; - Services compartilhados.
18. Executando nossa aplicação React
19. Adicionando outros frameworks e libs
22. Executando nossa aplicação Angular
23. Gráfico de dependências do NX
24. Criando uma lib de componentes compartilhados
25. live demo ‍
26. Referências - Why Nx? - https://github.com/nrwl/nx/tree/master/packages - nrwl/gatsby: Nx plugin for Gatsby - Dev Workflow Using Git Submodules and Yarn Workspaces - Um ano de Monorepo: o que aprendemos e porque você deveria usá-lo - Como escalar projetos React com Monorepo - https://youtu.be/OFwW-kh4BDk (Build optimizado com NX.dev)
27. Estamos contratando!!!! https://github.com/justapagamentos