Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monorepos com nx.dev

Monorepos com nx.dev

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

Rai Siqueira

June 26, 2020
Tweet

More Decks by Rai Siqueira

Other Decks in Programming

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
  3. None
  4. O que é um monorepo?

  5. None
  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

  13. None
  14. None
  15. None
  16. None
  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

  20. None
  21. None
  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