Angular propõe reatividade refinada com sinais

Feb 21 2023

A reatividade com sinais tem o potencial de mudar fundamentalmente a forma como escrevemos aplicativos Angular A Angular anunciou um protótipo que adiciona uma primitiva reativa 'Sinal' ao framework. A reatividade com sinais tem o potencial de mudar fundamentalmente a forma como escrevemos aplicativos Angular.

A reatividade com sinais tem o potencial de mudar fundamentalmente a forma como escrevemos aplicativos Angular

A Angular anunciou um protótipo que adiciona uma primitiva reativa 'Sinal' ao framework. A reatividade com sinais tem o potencial de mudar fundamentalmente a forma como escrevemos aplicativos Angular. Este post aborda algumas questões-chave relacionadas a esta proposta:

Qual é o sistema de reatividade atual do Angular?
De onde saiu essa proposta?
O que é “Reatividade com Sinais” e como ela melhora o Sistema de Reatividade do Angular?
O que isso significa para o RxJS?

O sistema de reatividade do Angular deve ser atualizado. Ele é construído em Zone.js, que é uma biblioteca que aplica patches à API do navegador (Promise, addEventListener, setTimeout). Esses patches de macaco permitem que o Angular conecte-se a eventos do navegador, acione atualizações de DOM e propague alterações em todo o aplicativo usando uma abordagem de cima para baixo.

Vou deixar este tweet do membro do Comitê de Direção Técnica do Node.js, Matteo Collina, falar por si:

Matteo Collina adverte contra macacos remendando objetos globais

2. Esta proposta foi sugerida durante a ng-conf 2022

Na ng-conf 2022, Angular Engineering Manager Madleina Scheidegger anunciou especificamente :

Queremos alterar o sistema de detecção de alteração subjacente para Angular.

Desde aquela apresentação, tem havido muito burburinho sobre a adição de uma nova primitiva reativa ao Angular. Um candidato líder para a próxima geração de primitivos reativos é Signals , popularizado por Preact e SolidJS. A equipe Angular percebeu e começou a colocar trechos de código 'colando' sinais no Angular no outono passado.

Pawel Kozlowski experimentando com sinais Preact

Obviamente, a equipe Angular continuou a explorar Signals desde o outono passado, culminando com o protótipo que anunciaram ontem.

3. Reatividade com sinais ⇒ Potencialmente um angular sem zona

Os sinais são objetos com um getter, um setter e um valor que muda com o tempo. A princípio, os sinais podem não parecer muito interessantes. Isso é apenas um novo tipo de proxy? Por que eu deveria me importar?

Uma das razões pelas quais eles ganharam tanta popularidade é por causa de como são usados para propagar alterações em uma página da web. As estruturas podem se conectar aos métodos setter e getter de um Signals para criar um gráfico de reatividade, que permite uma 'reatividade refinada' em vez de diferenças de cima para baixo (leia os ganhos de desempenho).https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf.

Recentemente, encontrei um tweet do fundador do Vue, Evan You, que destaca uma distinção sutil entre reatividade e primitivos reativos:

Evan You abordando a distinção entre Primitivos Reativos e reatividade refinada

Então, quando as pessoas dizem que um framework usa 'Sinais', eles geralmente querem dizer que ele tem (i) um Primitivo Reativo 'Sinal' e (ii) o framework é capaz de atualizar o DOM com precisão cirúrgica quando um Sinal específico muda de valor.

Levando um passo adiante, esta proposta fornece um caminho viável para escrever aplicativos Angular totalmente sem zonas!

4. Esclarecendo o impacto desta proposta no RxJS

Durante anos, os desenvolvedores do Angular argumentaram que a estrutura deveria melhorar a integração com o RxJS Observables. Então, por que a proposta Angular é Signals em vez de Observables? E nós ainda precisamos de um primitivo reativo?

Se você estiver interessado em se aprofundar mais neste tópico, sugiro este artigo de Mike Pearson: Mudei de ideia. Angular precisa de um primitivo reativo .

A proposta da Angular homenageia o RxJS, argumentando que poderia desbloquear “interoperabilidade significativamente melhorada com bibliotecas reativas como o RxJS”.

Conclusão

A equipe Angular ainda está livre para evitar o uso de Signals. Mesmo que eles continuem com este protótipo, o Signals ainda teria que passar pelo processo de solicitação de comentários e uma prévia do desenvolvedor.

Independentemente de a equipe Angular escolher Signals como o 'Primitivo reativo' escolhido, parece que finalmente estamos obtendo uma solução moderna para a reatividade que está totalmente integrada à estrutura. Esperamos que isso se traduza em uma melhor experiência do desenvolvedor e aplicativos mais rápidos.

Bônus: uma linha do tempo de sinais e reatividade refinada

A reatividade refinada é um novo rótulo para uma ideia antiga. Uma estrutura que utiliza sinais efetivamente faz com que seu aplicativo funcione como uma planilha usando o padrão Command and Query Responsibility Segregation (CQRS) .

Conforme observado pelo autor do SolidJS, Ryan Carniato, bibliotecas como MobX e Knockout introduziram um modelo de reatividade semelhante bem antes que os frameworks modernos integrassem a ideia.

Aqui está uma breve linha do tempo de sinais e reatividade refinada:

2010 Apresentação “O que é Programação Reativa” por Paul Stovell

https://paulstovell.com/reactive-programming/

https://youtu.be/sTSQlYX5DU0
“É sobre a composição de bom gosto dos efeitos colaterais”

https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8

https://youtu.be/AdNJ3fydeao
Usando RxJS com Sveltehttps://timdeschryver.dev/blog/unlocking-reactivity-with-svelte-and-rxjs#conclusion. O compilador e a sintaxe do modelo manipulam as assinaturas para você.

https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf

https://twitter.com/_developit/status/1567209440843022341

https://qwik.builder.io/docs/concepts/reactivity/

https://www.youtube.com/watch?v=CABHcf1gCbgàs 36:21
Reatividade: “Stores para gerenciamento de estado”
Reatividade: “Poderíamos ter calculado as propriedades” (em Angular)

https://twitter.com/pkozlowski_os/status/1535726141679579143?t=WyL4L-pkkPRqK2rRvhi9kw&s=19
https://twitter.com/pkozlowski_os/status/1571105592860889091

HeroDevs é um estúdio de consultoria e engenharia de software especializado em desenvolvimento front-end. Nossa equipe é autora ou coautora de projetos como Angular CLI, Angular Universal, Scully, XLTS — suporte estendido de longo prazo para AngularJS, ng-conf e muitos outros. Trabalhamos com startups de rápido crescimento e algumas das maiores empresas do mundo, como Google, GE, Capital One, Experian, T-Mobile, Corteva e outras. Saiba mais sobre nós em herodevs.com .