NX: Gerencie o seu monorepo

O que é um monorepo?

Acredito que antes de entrar no assunto nx, será importante ao menos uma explicação rápida sobre monorepo ou monorepositório, que é a estratégia de desenvolvimento de se utilizar apenas um repositório para vários projetos.

Você pode ter, por exemplo, dois sistemas web e o seu back-end juntos, em um só lugar. Isso quer dizer que, em um repositório no github, você terá vários projetos juntos.

Talvez você esteja pensando agora: “Menina, cê tá doida? Que bagunça isso!”

E realmente isso pode virar uma bagunça, mas existem algumas ferramentas que nos ajudam a organizar tudo isso e tornar o monorepo algo que poderá facilitar muito a vida dos desenvolvedores dependendo do contexto, e jajá vamos falar de uma delas, o NX.

Mas vem cá, sabe quem está usando monorepo? Google, facebook, microsoft, Uber, Airbnb, Twitter e muitas outras empresas por ai. Entãaaao, se essas grandes empresas estão usando esta estratégia, então o negócio é bom mesmo né?! Bora usar apenas monorepo daqui pra frente? #PartiuMonorepo #MonorepoForever

ERRADO! Nada no mundo do desenvolvimento é tão simples. A resposta para a pergunta “Devo usar monorepo?” é o famigerado “Depende”. Irei trazer a seguir algumas vantagens e desvantagens desta abordagem, pois nem tudo são flores.

Vantagens de se usar monorepo

• Reutilização e compartilhamento de código facilitada;
• Em um único lugar você tem todas as configurações, CI/CD, testes, etc, de forma que tudo fique padronizado para todos os projetos;
• A integração de um novo membro no time tende a ser algo mais rápido e tranquilo, pois o mesmo não precisará baixar e configurar diversos projetos separados;
• Padronização/Consistência entre os projetos se torna mais eficaz;
• Maior visibilidade e colaboração entre a equipe: Como todo o código está em um mesmo repositório se torna mais fácil descobrir e conhecer todas as funcionalidades/bibliotecas, incentivando a colaboração e reutilização de código;
• Você não precisa duplicar dependências, você pode fixar uma única versão de um dependência específica e ela será usada em todos os projetos do monorepo;

Desvantagens de se usar monorepo

• Tempo de build pode ser demorado devido a alta quantidade de arquivos;
• Sem uma ferramenta para te ajudar rodar lint e testes pode ser bem doloroso e demorado;
• Quando seu monorepo se tornar maior e complexo a clonagem pode ser um processo bem demorado
• A interpretação do histórico de commits se torna mais difícil, pois é mais complicado entender o que esta sendo alterado e o que afeta o que
• O compartilhamento de todos os projetos para toda equipe pode ser um problema, há empresas com politicas de restrição que não gostariam de compartilhar um projeto específico com todas as equipes

Beleza! Agora que você está mais contextualizado(a) sobre monorepositórios, vamos finalmente conhecer o NX.

Introdução ao NX

NX é uma ferramenta criada pela empresa Nrwl(fundada por membros da equipe Angular e ex-googlers), que visa facilitar o gerenciamento de monorepositórios, a qual possui funcionalidades como armazenar cache e monitorar o que foi afetado em suas alterações para reconstruir (rebuildar), re-testar e re-lintar (essa palavra nem existe) apenas o que for necessário — evitando o desperdício de tempo e processamento computacional — e entre outras funcionalidades. Tá passada? Então bora falar um pouquinho de alguns dos benefícios do NX.

Aplicativos e bibliotecas

Um espaço de trabalho típico do NX é divido pelas pastas “apps” e “lib”. Nas quais, apps estão de fato suas aplicações e nas libs devem ficar os códigos que serão compartilhados entre as aplicação. Por exemplo, você pode criar uma lib de componentes, outra de services, utils, types (para projetos typescript, por exemplo) e etc.

Essa organização permite ter arquiteturas mais modulares e separar melhor os interesses e responsabilidades. E de quebra o NX ainda organiza tudo direitinho, para que você importe suas libs de uma forma muito simples e bonitinha:

import { Button } from '@my-organization/ui';

Paralelização e invariantes de tarefa

O NX sabe como seus projetos e bibliotecas estão conectados, ele sabe de quais libs os seus projetos são dependentes e por isso sabe organizar bem a execução de tarefas. Por exemplo, se o Projeto A, depende da lib X, o NX irá construir primeiramente a lib X e depois o projeto A, pois a lib precisa estar “pronta” primeiro.

Ou seja, quando você executa o comando para construir um determinado projeto (nx build projeto A), ele não irá compilar apenas o projeto A, primeiro ele irá garantir que tudo que esse projeto precisa esteja onde deve estar. Ele também irá armazenar essas construções em cache, então, se as dependências desse projeto já estiverem em cache ele simplesmente irá restaurá-los, se não, ele reconstruirá as dependências necessárias. Ou seja, ele irá utilizar o método mais rápido para construir o seu projeto.

Além disso, o NX também sabe quais tarefas podem ser executadas paralelamente sem quebrar nada, assim ele executa paralelamente aquelas que podem.

Isso tudo quer dizer que o NX é bom demais em minimizar o tempo ocioso da sua CPU e a sua perca de tempo também, né não? É menina, o negócio é show de bola. Bora que tem mais coisas.

Cache de computação e distribuição de tarefas

Resumidamente o cache de computação consiste em, salvar o cache da construção já feita para sua aplicação e suas dependências, para reduzir o tempo na próxima construção. Isso quer dizer que, se você rodar nx build myproj (Comando pra construir um projeto) uma vez, ele irá salvar essa construção em cache, se você rodar novamente, ele não irá construir a aplicação toda do zero, irá verificar primeiramente no cache para extraí-lo de lá, ao invés de executar a construção novamente.

Print do terminal com duas execuções da cosntrução de uma mesma aplicação com nx.

Veja na imagem abaixo, como a primeira compilação demorou bem mais (10 segundos) que a segunda (24 milissegundos)

Isto funcionará não apenas para construção (build) mas também para testes e verificações de lint. Se você quiser entender cada detalhe deste conceito, recomendo ler diretamente na documentação do NX, clicando aqui.

Caso você utilize Nx Cloud o cache, será compartilhado entre você e sua equipe, pois, ao utilizar este recurso, ao executar, nx build**,**por exemplo, a compilação não ocorrerá localmente, mas sim no Nx Cloud. Desta forma o cache ficará salvo para que toda sua equipe possa utilizar nas próximas vezes que construir (buildar) o projeto. Muito louco, né não?

Comandos afetados

O Nx analisa seu espaço de trabalho para saber quais projetos foram afetados por suas alterações, desta forma, você consegue fazer verificações de lint, rodar testes e reconstruir apenas os projetos afetados.

Ou seja, quando você executa nx affected --target=test o nx irá examinar o que você alterou, e quais projetos e libs essas alterações afetam, e irá executar testes apenas nestes, e não em todos os projetos e suas dependências. Tornando esse processo mais rápido e eficiente.

Por padrão o nx compara as alterações atuais com o ultimo commit da branch master, mas você pode configurar para que ele compare com outra branch até mesmo com outros commits.

Você pode configurar isto no arquivo nx.json, definindo a branch default.

Você pode configurar isto no arquivo nx.json, definindo a branch default.

Ou ao rodar o comando: yarn affected:test --base=origin/develop~1

Visualização do espaço de trabalho

Com o NX você pode ter uma visão em gráfico de como cada projeto e libs se relacionam apenas rodando nx graph .

Se você rodar nx affected:graph será mostrado a relação das aplicações e libs afetadas.

Plugins

O nx possui alguns plugins que pode ser adicionados ao seu espaço de trabalho para facilitar algumas coisas, mas estes plugins não são obrigatórios. Se você estiver interessado em utilizar as funcionalidades de cache de computação ou habilitar a execução de tarefas distruídas, os plugins não serão necessários, mas já utilizei alguns e gostei bastante.

Por exemplo, se você adicionar o plugin do react ao seu espaço de trabalho, você poderá fazer coisas como criar novas aplicações, bibliotecas e até componentes com várias configurações já prontas, (por exemplo, já com o jest configurado e pronto pra usar) apenas com pequenos comandos. Para isso usamos os geradores, veja:

Criando aplicativos:
nx g @nrwl/react:app my-new-app

Adicionando um novo projeto ao repositório

Criando um nova biblioteca:
nx g @nrwl/react:lib my-new-lib

Adicionando uma nova biblioteca ao repositório

Adicionando um componente a uma lib existente:
nx g @nrwl/react:component my-component --project=my-lib

Adicionando um novo componente à uma biblioteca

NX x Lerna

Para este tópico, primeiramente, gostaria de informar que não tenho experiência usando Lerna, então não tenho tanta propriedade assim para discorrer sobre o tópico, mas irei trazer as informações que retirei diretamente da documentação do Nx, pois acho que é um assunto que causará curiosidade nas pessoas que conhecem ou já ouviram falar do Lerna.

De acordo com a documentação do NX, ambas tecnologias possuem focos diferentes, então isso quer dizer que não necessariamente você precisa escolher entre uma ou outra. Vejamos uma listagem disponibilizada pelo NX do que cada um oferece:

Lerna

• Desduplicação da node_modules. Se eu usar a mesma versão do Next.js em todos os projetos, o pacote será instalado uma vez.
• Orquestração de tarefas. Se eu quiser testar todos os projetos, posso usar um único comando para fazer isso.
• Publicação (Apenas o Lerna). Posso executar um comando para publicar pacotes no NPM.

NX

• Reconstruções inteligentes de projetos afetados
• Execução de tarefas distribuídas e cache de computação
• Compartilhamento de código e gerenciamento de propriedade
• Plugins de editor de alta qualidade e aplicativos GitHub
• Geradores de código poderosos
• Visualizações do espaço de trabalho
• Rico ecossistema de plugins
• Experiência de desenvolvimento consistente para qualquer framework
• Atualização automática para as versões mais recentes de todas as estruturas e ferramentas

Veja mais sobre Lerna e NX aqui:

• Nx e Yarn/Lerna
• Adicionando Nx ao espaço de trabalho Lerna

Com quais tecnologias posso usar o NX?

Você pode usar o NX com qualquer tecnologia usando o núcleo genérico do NX, mas o Nx oferece plugins para as tecnologias mais utilizadas na atualidade para te apoiar no desenvolvimento. Algumas delas são:

• Javascript
• Typescript
• React
• Angular
• Jest
• Cypress
• Storybook
• Linter
• Node Express
• Nest
• Next.js
• React native

Éeeeee gatas e gatos, NX é brabo! Tá por dentro de várias techs.

Quem usa NX?

Na página inicial do NX possui um carrossel com várias empresas, mas vou trazer aqui as mais famosas:

Aprenda NX

A Nrwl disponibiliza um curso gratuito muito bacana sobre o NX, no qual você vai aprender a configurar um espaço de trabalho NX do zero e trabalhar com alguns outros conceitos do Nx, também oferece um canal com vídeos gratuitos no youtube com mais informações sobre a tecnologia. Para aqueles que querem se aprofundar em um curso mais avançado, porém desembolsando uma graninha, a Nrwl também oferece um curso premium de Nx.

Curso gratuito: Scale React Development with Nx

Canal no Youtube: Nrwl — Narwhal Technologies Inc.

Curso premium: Advanced Nx Workspaces Course (by Nrwl)