Entre para a LISTA VIP da Black Friday

00

DIAS

00

HORAS

00

MIN

00

SEG

Clique para saber mais

Monorepos descomplicados: explorando o NX

Monorepos descomplicados: explorando o NX
Vinicios Neves
Vinicios Neves

Compartilhe

Salve o/

Monorepos estão ganhando cada vez mais espaço no mundo do desenvolvimento de software, oferecendo uma abordagem eficiente para gerenciar projetos grandes e complexos.

Se você já se pegou lutando para manter várias bases de código em sincronia, pode estar na hora de considerar o uso de um monorepo, e é aqui que entra o NX, uma ferramenta poderosa que simplifica a gestão de monorepos de forma agnóstica de framework.

Neste artigo, vamos explorar o que são monorepos, como o NX funciona e os conceitos principais que você precisa entender para tirar o máximo proveito dessa ferramenta.

Vamos mostrar como o NX pode ajudar a melhorar a produtividade, facilitar a manutenção do código e evitar dores de cabeça comuns em projetos grandes.

Prepare-se para descobrir um jeito mais organizado e eficiente de trabalhar com seu código!

Mas o que é um monorepo afinal?

Se você é novo(a) no mundo do desenvolvimento de software, pode estar se perguntando: “O que é um monorepo afinal de contas?”.

Bem, imagine que você trabalha em uma empresa que desenvolve vários projetos diferentes, como aplicativos, bibliotecas e serviços.

Em vez de ter um repositório separado para cada projeto, você coloca todos eles em um único repositório. Esse é o monorepo.

Antes de continuarmos, vale a pena entender o que é um repositório. Em termos simples, um repositório é como uma pasta onde você armazena todos os arquivos relacionados a um projeto.

Pense nele como uma coleção organizada de todo o código, histórico de mudanças e outros recursos que seu projeto precisa.

É o lugar onde os(as) desenvolvedores(as) colaboram, compartilham e mantêm seu trabalho sincronizado. Se quiser explorar mais, dê uma olhada no GitHub, uma das plataformas mais populares para hospedagem de repositórios.

Pense em uma grande caixa de ferramentas. Em vez de ter uma caixa para cada ferramenta (uma para chaves de fenda, outra para martelos, e assim por diante), você coloca todas as suas ferramentas em uma única caixa.

Isso facilita muito encontrar e usar as ferramentas quando você precisa delas. No contexto do desenvolvimento de software, isso significa que todos os seus projetos e códigos estão em um só lugar, tornando mais fácil gerenciar e colaborar.

Uma das grandes vantagens de usar um monorepo é a facilidade de sincronização. Imagine que você precisa fazer uma mudança que afeta vários projetos ao mesmo tempo.

Com um monorepo, você pode fazer essa mudança em um lugar só, e todos os projetos que precisam dessa alteração estão atualizados de imediato.

Isso pode economizar muito tempo e esforço, especialmente em projetos grandes e complexos.

Manter um monorepo também pode simplificar a gestão de dependências. Quando todos os projetos estão no mesmo lugar, você pode gerenciar todas as dependências de forma centralizada, evitando conflitos e problemas de compatibilidade.

Claro, nem tudo são flores. Manter um monorepo pode ser desafiador à medida que o repositório cresce.

A quantidade de código e a complexidade podem aumentar rapidamente, tornando a gestão mais difícil, mas com boas práticas e ferramentas adequadas, é possível manter tudo sob controle.

Banner da promoção da black friday, com os dizeres: A Black Friday Alura está chegando. Faça parte da Lista VIP, receba o maior desconto do ano em primeira mão e garanta bônus exclusivos. Quero ser VIP

O que é o NX?

Agora que entendemos o conceito de monorepos, é hora de conhecer uma ferramenta que pode facilitar bastante a gestão deles: o NX.

O NX é um conjunto de ferramentas desenvolvido pela Narwhal que ajuda a gerenciar monorepos de maneira eficiente e agnóstica de framework.

Isso significa que ele não se limita a um framework específico, sendo compatível com várias tecnologias como React, Angular e até mesmo NestJS.

Você deve estar se perguntando: “Mas o que exatamente o NX faz?” Bem, o NX oferece uma série de funcionalidades que tornam o desenvolvimento em um monorepo muito mais organizado e produtivo.

Por exemplo, ele gerencia as dependências entre os projetos, garantindo que tudo esteja sempre em ordem. Imagine que você tem uma biblioteca que é usada por vários aplicativos no seu monorepo.

Com o NX, você consegue controlar facilmente quais versões dessa biblioteca estão sendo usadas e onde.

Outra grande vantagem do NX é sua capacidade de executar tarefas em paralelo. Isso significa que você pode rodar builds e testes de vários projetos ao mesmo tempo, economizando um tempo precioso.

Além disso, o NX possui uma funcionalidade chamada análise de impacto. Digamos que você fez uma mudança em um projeto específico.

O NX pode identificar quais partes do monorepo foram afetadas por essa mudança e executar apenas os testes e builds necessários para essas partes, isso torna o processo de desenvolvimento muito mais ágil.

O NX também se integra muito bem com ferramentas de integração contínua (CI/CD), facilitando a automação de builds, testes e deploys. Isso é especialmente útil em projetos grandes, onde a automação pode evitar muitos problemas e retrabalhos.

Nós vamos seguir com o NX neste artigo devido à sua versatilidade e robustez. Ele oferece um conjunto completo de ferramentas que facilitam a gestão de monorepos de maneira eficiente, independente das tecnologias utilizadas.

No entanto, ele não é a única opção disponível. Se você está interessado em explorar outras ferramentas, aqui estão algumas alternativas:

  • Turborepo: Uma ferramenta para gerenciar monorepos, com foco na execução rápida de builds e tarefas.
  • Lerna: Uma ferramenta para gerenciamento de pacotes dentro de monorepos, amplamente utilizada em projetos Node.js.
  • Rush: Desenvolvida para projetos de grande escala, oferecendo suporte detalhado para controle de versão e builds.

Vamos colocar a mão na massa!

Agora que entendemos o conceito de monorepos e conhecemos o NX, é hora de ver como tudo isso funciona na prática.

Para começar, vamos clonar um repositório de exemplo e adicionar o NX a ele. Siga os passos abaixo:

git clone https://github.com/viniciosneves/tuskydesign.git

Este repositório contém dois pacotes React (packages/buttons e packages/forms) que são usados em uma aplicação de demonstração localizada em apps/demo.

O package.json raiz possui a propriedade workspaces, que informa ao NPM como encontrar os projetos no repositório:

{
  "workspaces": ["packages/*", "apps/*"]
}

Com essa configuração, quando você rodar o comando de instalação na raiz, os pacotes corretos serão instalados para cada projeto.

O NPM criará pastas node_modules dedicadas dentro de cada projeto onde necessário.

npm install

Agora se você tentar construir a aplicação de demonstração, o build vai falhar:

npm run build -w @tuskdesign/demo

O script de build falha porque ele precisa que os projetos buttons e forms sejam construídos primeiro.

Para resolver isso, volte à raiz do repositório e execute a tarefa de build para todos os projetos:

npm run build -ws

Quando os projetos buttons e forms forem construídos primeiro, a aplicação de demonstração será construída com sucesso.

O NX oferece muitas funcionalidades, mas sua principal função é ser um orquestrador de tarefas.

Ele pode armazenar em cache suas tarefas e garantir que sejam executadas na ordem correta. Após a configuração inicial, você pode adicionar outras funcionalidades conforme necessário.

Para habilitar o NX no seu repositório, execute o seguinte comando:

npx nx@latest init

Primeiro, o script vai sugerir a instalação de alguns plugins com base nos pacotes usados no seu repositório. Desselecione ambos os plugins sugeridos para que possamos explorar o que o Nx oferece sem plugins. Em seguida, o script fará uma série de perguntas para ajudar a configurar o cache.

Responda às perguntas conforme indicado:

  1. Quais scripts precisam ser executados em ordem? - Escolha build
  2. Quais scripts são cacheáveis? - Escolha typecheck, build e lint
  3. O script “typecheck” cria alguma saída? - Não insira nada
  4. O script “build” cria alguma saída? - Insira dist
  5. O script “lint” cria alguma saída? - Não insira nada
  6. Gostaria de cache remoto para acelerar seu build? - Escolha Skip for now

Agora, o NX foi configurado para rodar suas tarefas de build, typecheck e lint com cache habilitado. Você pode rodar uma única tarefa assim:

npx nx build @tuskdesign/demo

Ou todas as tarefas de um certo tipo assim:

npx nx run-many -t typecheck

O NX também permite criar pipelines de tarefas para garantir que as tarefas sejam executadas na ordem correta.

Por exemplo, a configuração nx.json abaixo garante que, ao construir qualquer projeto, o NX construirá primeiro as dependências desse projeto:

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
      ]
    }
  }
}

Para facilitar mais ainda podemos usar plugins. Vamos adicionar o plugin @nx/vite para configurar automaticamente o cache:

npx nx add @nx/vite

Isso vai ajustar as configurações de cache com base no arquivo vite.config.ts.

Agora sabemos como adicionar o NX a um repositório com NPM workspaces e configurá-lo para executar tarefas de forma otimizada.

O NX não só simplifica a execução de tarefas, mas também armazena em cache os resultados para evitar trabalho repetitivo.

Conclusão

Exploramos o conceito de monorepos e como eles podem simplificar a gestão de projetos grandes e complexos.

Com um monorepo, conseguimos manter várias bases de código sincronizadas e facilitar a reutilização de código entre diferentes projetos.

Porém, a gestão de um monorepo pode se tornar desafiadora à medida que o repositório cresce. É aí que entra o NX.

O NX se mostrou uma ferramenta poderosa para gerenciar monorepos, oferecendo funcionalidades como gerenciamento de dependências, execução de tarefas em paralelo e caching.

Com ele, conseguimos otimizar nossas tarefas e garantir que sejam executadas na ordem correta, além de facilitar a integração contínua e a automação de builds, testes e deploys.

Vimos na prática como adicionar o NX a um repositório existente, configurar suas funcionalidades básicas e explorar suas capacidades de caching e pipelines de tarefas.

Também conhecemos algumas alternativas como o Turborepo, o Lerna e o Rush, que podem ser exploradas dependendo das necessidades específicas do seu projeto.

Agora é a sua vez! Explore o NX, ajuste-o às necessidades do seu projeto e veja como ele pode transformar sua forma de trabalhar com monorepos.

E não se esqueça, há um mundo de funcionalidades esperando para ser descoberto e utilizado.

Boa sorte e que código limpo esteja com você!

Vinicios Neves
Vinicios Neves

Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Lisboa e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

Veja outros artigos sobre Front-end