DEV Community: Matheus Rian

Nx FullStack: Angular + NestJS

Matheus Rian — Wed, 31 Jan 2024 19:20:39 +0000

Este artigo apresenta um guia passo a passo para integrar Angular e NestJS em um projeto Nx.

Vamos começar estabelecendo um projeto Angular e, em seguida, adicionar o NestJS. Ao final, você terá um sistema integrado, com frontend e backend comunicando-se, destacando a eficiência e a praticidade de unir estas tecnologias no Nx.

Caso prefira assistir o vídeo da implementação, acesse aqui

Criando o workspace Nx com Angular

| Para projetos já existentes, certifique-se de que o Nx está atualizado e funcionando conforme esperado.

Vamos criar um workspace Nx, usando o seguinte comando:

npx create-nx-workspace@latest

Nas opções de Stack, iremos utilizar o angular e Integrated Monorepo.
Segue a imagem abaixo com as opções selecionadas

Após a instalação, entraremos no nosso projeto (cd [nome-pasta]). Na pasta apps, estará o nosso projeto angular (nomeado de "ng")

Para executar o projeto, use o comando: nx serve [nome-projeto]

nx serve ng

Instalando o NestJS no workspace

Nosso primeiro passo é adicionar o plugin NestJS para o Nx. Execute o seguinte comando:

npm install @nrwl/nest --save-dev

Agora, iremos gerar uma nova aplicação para o NestJS dentro do nosso Monorepo, utilizando o comando abaixo:

nx generate @nrwl/nest:application [name]

| Troque [name] para o nome que você deseja usar para a aplicação. Neste artigo, nomeamos para nest

Após isso, entraremos no nosso projeto. Na pasta apps, e agora, estará o nosso projeto angular (nomeado de "ng") e o projeto NestJS (nomeado de "nest")

Para executar o projeto, use o comando: nx serve [nome-projeto]

nx serve nest

Parabéns 🎉. Agora temos o nosso frontend e backend no ambiente Nx e ambos funcionando! Agora, para fecharmos com chave de ouro, iremos integrar-los!

Integrando o NestJS com o Angular usando o Proxy

Para permitir a comunicação do seu app Angular com o NestJS durante o desenvolvimento, definiremos uma configuração de proxy. No diretório do app Angular(“ng” neste exemplo), entre na pasta src, e em seguida, crie um arquivo chamado proxy.conf.json e adicione o seguinte conteúdo:

{
  "/api": {
    "target": "http://localhost:[PORT]",
    "secure": false
  }
}

Substitua [PORT] pela porta em que seu app NestJS é executado.

| Ao usar um proxy, você pode fazer requisições para um caminho relativo no próprio app Angular e evitar problemas de CORS. Além disso facilita o desenvolvimento e testes.

Após definir o Proxy, dentro do seu app Angular, entre no arquivo “project.json” e insira a configuração do proxy à chave “options” do “serve”:

{
  ...
  "targets": {
    ...
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "proxyConfig": "apps/[angular-app-name]/src/proxy.conf.json"
      },
      ...
    }
  },
}

Troque [angular-app-name] com o nome do seu app Angular.

Agora você pode começar a adicionar seus endpoints ao app NestJS e acessa-los no app Angular! 🎉

Testando a integração

Para testar a sua integração, você precisa estar rodando tanto o back quanto o front e em seguida implementar o trecho de código abaixo:

export class AppComponent implements OnInit {
  private http = inject(HttpClient);
  title = 'ng';

  ngOnInit() {
    this.http.get('/api').subscribe((data) => {
      console.log(data);
    });
  }
}

Abra o developer tools do seu browser, e em network, verifique se a chamada foi feita com sucesso! Em caso de sucesso, você tem uma aplicação FullStack pronta para uso!

Conclusão

Com a conclusão deste guia, você agora tem um ambiente Nx configurado com Angular para o frontend e NestJS para o backend, ambos integrados e funcionando harmoniosamente. Este setup oferece uma plataforma robusta e eficiente para o desenvolvimento de aplicações fullStack. Segue algumas vantagens interessantes:

Monorepo: A utilização do Nx como monorepo facilita o gerenciamento de múltiplas aplicações e bibliotecas, mantendo tudo centralizado e acessível.
Desenvolvimento Coeso: A integração entre Angular e NestJS no mesmo ambiente proporciona uma experiência de desenvolvimento coesa e simplificada, com ferramentas e configurações compartilhadas.
Proxy para Desenvolvimento Local: Configurar um proxy para o app Angular resolve problemas comuns de CORS durante o desenvolvimento local e permite que requisições sejam feitas como se tudo estivesse hospedado em um único servidor.
Eficiência na Comunicação: A capacidade de fazer requisições a partir do Angular para o NestJS de maneira eficiente e segura melhora significativamente a fluidez da comunicação entre frontend e backend.
Teste e Depuração Facilitados: Rodar ambos, frontend e backend, em um ambiente integrado facilita o teste e a depuração, permitindo que você veja as mudanças em tempo real e ajuste rapidamente conforme necessário.

Parabéns por chegar até aqui! 🎉 Espero que este artigo tenha lhe ajudado!
Com a infraestrutura básica configurada, o próximo passo é explorar e adicionar funcionalidades específicas ao seu app, tanto no frontend quanto no backend.

Atenciosamente,
Matheus Rian
☝️ Me siga para receber novos conteúdos e artigos!

Repositório com código fonte: https://github.com/NG-Brasil/Nx-FullStack

Angular Signals: Na Prática

Matheus Rian — Wed, 20 Dec 2023 16:00:32 +0000

O Angular Signals é uma nova funcionalidade introduzida no Angular 16 que permite rastrear e lidar com alterações de estados da aplicação de forma mais granular. Isso permite que o Angular otimize seu mecanismo de detecção de mudanças (CD), recalculando apenas o que realmente importa.

Neste artigo, aprenderemos sobre:

O que é um Signal
Tipos de Signals
Como criar um Writable Signal
Como alterar o valor de um Writable Signal
Como criar um Computed Signal

No primeiro artigo sobre Angular Signals, vimos a motivação principal para a criação dessa funcionalidade (acesse aqui). No artigo de hoje, vamos explorar como o Angular Signals funciona e como ele pode ser usado para melhorar o desempenho de aplicações Angular. Além disso, VOCÊ irá escrever seu primeiro signal. Mas o que é um...

Signal

Um Signal é um wrapper em torno de um valor que notifica os consumidores(Consumers) interessados quando esse valor muda. Os Signals sempre devem conter um valor, e podem conter qualquer valor, desde primitivos simples até estruturas de dados complexas.

Essa forma mais granular nos permitirá, no futuro, escrever componentes com desempenho incrível em aplicativos totalmente sem zona(zoneless), eliminando a sobrecarga e as peculiaridades do zone.js.

Tipos de Signals

Existem dois tipos de Signals: Writable Signals e Read-Only Signals.

Writable Signals: podem ser alterados por qualquer componente ou serviço que os consuma.
Read-Only Signals: só podem ser lidos, mas não alterados.

Criando um Writable Signal

Para criar Writable Signal, chamamos a função signal, passando seu valor inicial.

import { signal } from '@angular/core';

const value: WritableSignal<number> = signal(1);

// Signals são getter functions.
console.log(value()) // 1

Alterando o valor de um Writable Signal

O valor de um Writable Signal pode ser alterado usando o método set()

value.set(2)

O método update() também pode ser usado para recalcular o valor usando o valor anterior.

value.update(prevValue => prevValue + 1)

Partiu codar!!

Para facilitar a compreensão dos conceitos, criei um playground onde você pode usar os métodos do Writable Signal que aprendemos em um componente. Neste exemplo, implementamos uma funcionalidade básica de contador.

Desafio 1: Count Signals

Criando um Computed Signal

Computed signals são read-only(apenas leitura) signals que derivam seu valor de outros signals. Imagine que você tem um salário de R$ 3.000 e todo mês investe 10% dele. Se você receber um aumento de 20%, o valor do seu investimento também aumentará.

No caso da analogia do salário, o valor dos 10% de investimento é uma expressão que depende do salário. Se o salário mudar, o valor do investimento também mudará.

Um computed signal pode ser usado para representar o valor dos 10% de investimento. Isso torna mais fácil manter seu código atualizado quando o salário for alterado.

O signal investment depende do signal salary. Sempre que o salary atualizar, o angular sabe que o investment precisa ser recalculado.

Para criar um computed signal, nós chamamos a função computed passando como argumento uma callback.

const salary: WritableSignal<number> = signal(3000);
const investment: Signal<number> = computed(() => salary() * 0.10);

🚨 Computed Signals podem também ser baseados em outros computed signals!

Partiu codar!!

Para facilitar a compreensão dos conceitos, criei um playground onde você pode usar os métodos do Computed Signal que aprendemos em um componente. Neste exemplo, implementamos uma funcionalidade básica de distribuição do salário para investimentos.

Desafio 2: Salary Signals

Conclusão

Angular Signals é uma nova funcionalidade poderosa que pode ser usada para melhorar o desempenho de aplicações Angular. Signals permitem que você rastreie e lide com alterações de estados da aplicação de forma mais granular, o que permite que o Angular otimize seu mecanismo de detecção de mudanças (CD).

Saimos da teoria e VOCÊ realizou dois exemplos práticos de como usar Signals:

Um contador básico
Uma distribuição de salário para investimentos

Espero que este artigo tenha ajudado você a entender melhor como Angular Signals funciona e como ele pode ser usado para melhorar o desempenho de suas aplicações Angular.

Parabéns por chegar até aqui! 🎉

Agradeço por dedicar seu tempo à leitura do artigo sobre signals no Angular e espero que continuemos a trocar conhecimentos valiosos. No próximo artigo da série de signals, vamos discutir o conceito de Producer/Consumer utilizando analogias e imagens para maior entendimento.

Com gratidão,
Matheus Rian
☝️ Me siga para receber novos conteúdos e artigos!

Referências
https://angular.dev/
https://angular-signals.dev/

Angular Signals: Por que surgiu?

Matheus Rian — Tue, 05 Dec 2023 18:29:14 +0000

Antes de discutirmos os signals, é crucial compreender a principal motivação por trás de sua introdução no Angular. A razão fundamental está relacionada ao mecanismo de detecção de alterações(CD) presente no Angular.

Mecanismo de detecção de alterações(CD)

Atualmente, o Angular faz uso do Zone.js, cujo principal objetivo é notificar quando ocorrem eventos significativos no sistema. Este mecanismo abrange, por padrão, eventos do navegador, como click, mouseover, keyup, entre outros. Além disso, o Zone.js também monitora a execução de funções como setTimeout() e setInterval(), bem como as requisições HTTP.

Quando ocorrer algum destes eventos, o angular executa o CD. No entanto, devido a esse mecanismo, NÃO temos informações detalhadas sobre o que exatamente aconteceu, o que mudou ou qual é o impacto dessa alteração.

Analogia com o cotidiano

Para ilustrar essa situação, imagine que sua mãe fez uma compra no mercado, por engano trouxe para casa o produto errado e pediu que você o trocasse, sem fornecer informações adicionais. Agora, você se encontra em uma avenida movimentada, repleta de diferentes mercados.

Essa tarefa de encontrar o local certo para a troca assemelha-se à detecção de alterações(CD) atual do Angular. Não há uma indicação precisa; o Angular apenas sabe que algo aconteceu, por isso, o processo em busca de mudanças percorre toda a árvore de componentes, começando do root(Ex.: AppComponent).

Agora, considere a situação em que sua mãe, ao solicitar a troca do produto errado, fornece todas as informações necessárias. Ela especifica o nome do mercado correto, sua localização exata na avenida movimentada e até mesmo orienta sobre como reconhecer o produto certo. Com essas instruções claras, sua tarefa de troca torna-se muito mais fácil e eficiente.

É exatamente isso que os signals fazem!

Signals

Eles oferecem detalhes específicos sobre onde, como e o que deve ser feito. Com os signals, o Angular não precisa mais percorrer toda a árvore de componentes para identificar o que precisa ser alterado. Ele já possui as informações necessárias!

A principal vantagem dos signals é permitir a atualização apenas das partes da aplicação que realmente mudaram, evitando verificações desnecessárias e tornando a aplicação mais eficiente. Além disso, apresentam benefícios adicionais, alguns deles são:

Menos ganchos de ciclo de vida: Em vez de depender de ngOnChanges para capturar as mudanças, podemos simplesmente definir um signal e reagir diretamente a essa mudança.
Os signals podem ser utilizados não apenas em componentes, mas também em outras partes do seu sistema, como serviços.
Integração com RxJS: Isso assegura a melhor experiência do desenvolvedor sem forçar mudanças significativas no design da arquitetura atual e nas práticas da equipe.

Conclusão

Os signals representam uma evolução significativa no ecossistema do Angular, proporcionando clareza e eficiência à detecção de alterações. Ao comparar a abordagem anterior, é evidente que agora o Angular possui um mecanismo mais preciso e orientado, onde, em um futuro próximo conseguiremos criar zoneless applications!

Essa transição não apenas simplifica o processo de detecção de alterações, mas também oferece benefícios tangíveis, como a capacidade de atualizar seletivamente partes específicas da aplicação, reduzindo verificações desnecessárias. Além disso, a flexibilidade dos signals, que podem ser empregados em vários contextos, desde componentes até serviços.

Ao integrar-se com o RxJS, os signals alinham-se perfeitamente às práticas de desenvolvimento existentes, proporcionando uma experiência aprimorada sem impor mudanças significativas na arquitetura.

Em última análise, os signals não apenas representam uma resposta eficaz às limitações do Zone.js, mas também abrem as portas para uma abordagem mais eficiente e refinada na construção de aplicações Angular, promovendo uma gestão de estado mais inteligente e uma experiência de desenvolvimento mais fluida.

Parabéns por chegar até aqui! 🎉

Agradeço por dedicar seu tempo à leitura do artigo sobre signals no Angular e espero que continuemos a trocar conhecimentos valiosos. No próximo artigo, vamos aprofundar ainda mais nosso conhecimento, explorando diferentes tipos de signals. Acesse aqui o artigo

Com gratidão,
Matheus Rian
☝️ Me siga para receber novos conteúdos e artigos!

Referências

https://angular-signals.dev/
https://riegler.fr/blog/2023-11-02-v17-change-detection
https://consolelog.com.br/como-funciona-change-detection-angular/