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/