Apresentando sinais: o novo primitivo do Angular para reatividade

Em 15 de fevereiro de 2023, a equipe do Angular introduziu o Signals na estrutura com uma simples solicitação pull. Desde então, houve discussões acaloradas na comunidade Angular sobre seu uso e benefícios. Muitos até começaram a prototipar com sinais para experimentar sua funcionalidade.

Vamos dar uma olhada em como esse novo recurso funciona, sua sintaxe e como usá-lo quando estiver totalmente implementado.

O que são sinais?

O tipo de sinal é o novo tipo primitivo reativo do Angular. Sua finalidade é manter um valor, assim como uma variável padrão, mas a característica distintiva de um sinal é seu comportamento único. Se um sinal mudar, ele notificará qualquer coisa que dependa dele.

Além disso, o Angular pode usar sinais como a nova abordagem para detectar e acionar alterações, em vez da abordagem padrão atual de verificação suja de toda a árvore de componentes.

Como usar sinais em Angular

Um sinal será mais ou menos assim:

@Componente({
 seletor: 'meu-aplicativo',
 estar sozinho: verdadeiro,
 modelo: `
 Contagem: {{ contagem() }} </div>
 Duplo: {{ duplo() }} </div>
"alterarContagem()"></button>
`,
})
exportaraula AppComponent{
 contagem = sinal(0)
 duplo = calculado(() =>esse.contar() * 2);

 changeCount() {
esse.count.set(5)
 }
}

Neste componente App, a variável count é um sinal inicializado com o valor zero. count é então referenciado dentro de double (um valor calculado) e do template. Portanto, quando o clique do botão definir o valor de contagem para cinco, tanto o valor calculado (duplo) quanto os valores no modelo serão atualizados.

Cada parte do componente angular que depende do sinal será atualizado automaticamente assim que o valor mudar.

Por que a introdução de sinais é importante

Os sinais facilitam o aprendizado e o trabalho com o Angular. Mudar para sinais como a nova maneira padrão de aprender e construir com o Angular harmonizará o processo de aprendizado. Se preferimos um estilo de codificação mais imperativo com Angular ou queremos aprender um estilo de codificação mais declarativo.

A maioria das pessoas começa a codificar imperativamente porque geralmente é mais intuitivo e familiar para as pessoas. Mas mudar da abordagem imperativa para a forma declarativa envolve uma mudança de paradigma e uma mudança total em nosso modelo mental. É por isso que RX.js, a biblioteca reativa, é difícil de aprender para muitos.

Os sinais reunirão essas duas abordagens separadas. Todos podem aprender sinais por padrão, começar a aprender os conceitos por trás da reatividade e nem mesmo se preocupar em incorporar Angular's RX.js se não podem ou não querem.

Assim que estiver confortável com o noções básicas de Angular e quiser mudar para um estilo de codificação mais declarativo, você pode facilmente adicionar RX.js aos conceitos que você já entende.

Os sinais devem melhorar a programação angular para todos

Signals é o novo mecanismo reativo do Angular que você pode usar para criar valores reativos para os consumidores lerem. Um sinal notifica imediatamente todos os consumidores assim que seu valor muda. Os sinais harmonizam o processo de aprendizado do Angular, reunindo as abordagens imperativa e declarativa da codificação.

Angular contará com sinais para tornar a detecção de alterações mais leve e robusta. Portanto, como um desenvolvedor Angular, aprender a usar sinais lhe dará uma compreensão mais firme da reatividade em Angular e o tornará um desenvolvedor melhor. Não se esqueça de dominar o básico do Angular antes de aprender as partes mais avançadas.