Desenvolva Aplicações Full-Stack com Angular CLI e Nx

Um guia para o seu próximo "new project"

Quando trabalhamos com desenvolvimento em geral, sabemos que cada "new project" vem acompanhado de uma série de decisões estruturais. No caso do front-end, que é bem menos maduro que o back-end, surgem novos conceitos, bibliotecas e frameworks o tempo todo. Se Angular for a sua opção, eu listei alguns pontos importantes nesse artigo.

Saber dosar esses conceitos de forma eficiente exige uma visão bem ampla das tecnologias versus as necessidades do negócio. Você pode passar meses testando patterns para encontrar o mais adequado à sua realidade ou você pode seguir padrões bem estabelecidos pela comunidade e que foram testados em grandes empresas, mas você geralmente tem que pesquisar bastante até encontrar esses padrões.

No meu primeiro grande "new project", eu escolhi a primeira opção: testei vários padrões diferentes, bibliotecas diferentes, frameworks diferentes, conceitos diferentes, etc… Em resumo, um benchmark que durou em torno de 30 dias entre multirepos, monorepos, react cross-platform, angular cross-platform, vue.js, ionic, híbrido de react com angular e por aí vai.

Eram tantas opções que eu realmente fiquei confuso em alguns momentos. Mas em meio a esse monte de pesquisa eu encontrei um cara chamado Nx.

O Nx

Esse cara é uma coleção de schematics que adiciona várias funcionalidades ao Angular CLI. Além disso, ele traz alguns conceitos para o desenvolvimento como um todo. Conceitos esses que foram inspirados no modo Google de se trabalhar e já foram validados por várias empresas de mercado.

Workspace

O Workspace do Nx consegue comportar toda a sua stack desde que você utilize tecnologias compatíveis. Pra você ter uma ideia, atualmente é possível criar aplicações Angular + Nest ou React + Express em um mesmo workspace, e compartilhar códigos entre elas usando bibliotecas TypeScript.

Por exemplo, o template angular-nest gera uma aplicação Angular, uma API em Nest e uma biblioteca TypeScript contendo as interfaces para que front-end e back-end consumam sempre o mesmo modelo e as alterações sejam refletidas em ambas as aplicações.

As tecnologias suportadas estão nesse link (Angular) ou nesse link (React).

Ferramentas

Além dos frameworks citados, o Nx traz consigo uma série de ferramentas para o desenvolvimento. Se você trabalha com Angular, que é o meu caso, sabe que um projeto padrão vem com Karma/Jasmine para testes unitários e o Protractor para os e2e.

Você também consegue escolher qual ferramenta usar via CLI sem a necessidade de nenhuma configuração adicional. Por padrão, ele traz o Jest para testes unitários e o Cypress para e2e. Além disso, o Prettier, que é um padrão super bem estabelecido de formatação, já vem configurado por padrão.

Affected

O affected é uma ferramenta incrível para o fluxo de desenvolvimento como um todo, mas em especial a integração contínua.

Nele, você consegue comparar o diff de dois commits (geralmente o HEAD da sua branch com a dev ou a master) e verificar quais aplicações ou bibliotecas foram alteradas e/ou afetadas. Uma aplicação é considerada afetada quando ela consome alguma biblioteca (ou aplicação) que foi alterada. Sendo assim, o processo de build dela também precisa ser executado pra saber se algo foi quebrado. Isso facilita e muito o CI, porque você consegue ter um único build gerenciando todas as suas aplicações, além de builds incrementais.

Angular Console

O Angular Console é uma extensão do VS Code que fornece uma interface gráfica para executar desde os comandos mais comuns como o ng serve ou ng test, até os mais complexos como o ng generate ou o ng add.

Eu gosto bastante do terminal e das IDEs da JetBrains então acabei não me adaptando, mas o Angular Console é uma ótima opção tanto pra quem está começando e ainda não conhece todos os comandos de cara, quanto pra quem já trabalha há bastante tempo mas não lembra todos os parâmetros de todos os comandos.

Criando o seu próprio Workspace

Depois de escrever tanto sobre a ferramenta, é hora de criar o seu workspace. Para isso, basta ter o npm (versão 5.2 ou superior) instalado e executar o seguinte comando no terminal:

npx create-nx-workspace@latest myorg

E o CLI vai te perguntar qual workspace deve ser criado:

Para o nosso exemplo, vamos usar o template angular-nest, que monta o exemplo que eu citei: Uma aplicação Angular, uma Api Nest e uma biblioteca com as interfaces.

Depois disso, basta preencher o nome da aplicação (eu escolhi my-app) e o formato dos arquivos de estilo que ele irá gerar um workspace com essa estrutura:

As aplicações ficam na pasta apps, então nela você vai ter tanto a api em Nest quanto o my-app, que é a aplicação Angular.

Já as bibliotecas ficam em libs. Como criamos um workspace full-stack, também é gerada uma biblioteca com as interfaces usadas pela api e pelo my-app.

Executando as aplicações

Agora, basta rodar ng serve my-app e ng serve api, depois abrir o navegador em http://localhost:4200 e ver a mensagem de boas vindas, com direito a um JSON vindo direto da API sendo exibido:

Testes Unitários

Ao executar os testes usando ng test, você vai ver que eles são executados com o Jest:

E2E

E ao executar o ng e2e para o teste end-to-end, o cypress irá executá-los:

Conclusão

Essa é uma introdução ao Nx e um pouco do que ele pode fazer sem a necessidade de configurações adicionais no projeto. São padrões bem estabelecidos e validados em grandes empresas, e que já foram testados e aprovados pelo meu time também. Você pode ver o resultado da nossa jornada usando monorepo aqui.

E aí, curtiu? Quer saber mais sobre Nx e monorepos? Se houver qualquer coisa que eu possa fazer pra tornar esse artigo melhor, comente ou envie uma mensagem privada. Feedbacks são sempre super bem vindos.