Recentemente, a Angular lançou um recurso independente de desenvolvimento "experiencial" chamado Zone.js. Embora o recurso ainda seja experimental, a equipe da Angular vem trabalhando nessa importante inovação há muito tempo. Primitivas responsivas estão se tornando cada vez mais importantes para os desenvolvedores, indicando que o Angular está entrando em outra nova era. Dependências angularesAs vantagens do Signals e do Rxjs são ainda mais evidentes, eliminando a necessidade de ficar constantemente atento a mudanças das quais Zone.js dependem, e acabou atuando como intermediário durante o desenvolvimento.
A Angular continuará sendo uma estrutura ousada e poderosa no futuro e iniciará uma nova transformação.
Primeiramente, meu artigo não tem a intenção de ensinar nada a ninguém. Espero que meus leitores não sintam que merecem ser tão passivos. Procuro compartilhar minhas experiências e aprendizados o máximo possível e abrir para discussões. É importante discutir juntos, trocar ideias e avaliar com base no pensamento crítico. Não se deve esquecer que ainda há alguma confusão sobre como exatamente eles funcionam, especialmente quando as tecnologias discutidas neste artigo ainda estão sendo experimentadas, e eu diria que até mesmo o mecanismo de detecção de mudanças pode causar alguma confusão entre a equipe principal do Angular.
O que é Zone.js e o que ela faz?
Zone.js é uma pequena biblioteca desenvolvida por Brian Ford em 2010 sob o nome "Zones" para gerenciar trabalhos assíncronos em JavaScript. Inspirado em linguagens como Erlang e Dart, ele busca trazer concorrência estruturada ao ambiente de thread única do JavaScript. A equipe da Angular ganhou força ao adotar o Zones como mecanismo de detecção de mudanças no Angular 2, e a equipe do Angular começou a contribuir com isso na forma de Zone.js, proporcionando participação comunitária mais ampla e desenvolvimento adicional. Hoje, embora ainda esteja fortemente ligado ao Angular, Zone.js pode ser considerado uma ferramenta poderosa para monitorar e intervir em tarefas assíncronas, possibilitando análise de desempenho, capacidades de manejo de erros e muitas funções questionáveis.
Então, por que a Angular abandonou Zone.js?
Aproveitando a capacidade da IA de transformar nossas imagens imaginárias em desenhos sem esforço, usamos a metáfora de "esponja debaixo da cama" para criar uma imagem fácil de entender.
Imagine a cama na imagem acima, que não está colocada no chão, mas sobre uma esponja grande. Zone.js é como uma esponja em uma aplicação Angular. Essa esponja garante que a cama fique sobre uma base confortável e de suporte, ao mesmo tempo em que oferece conforto relativo ao dormidor. A esponja absorve todos os movimentos da cama, impedindo que o movimento dentro da cama se reflita para fora.
Monkey patches em Zone.js ouvem todas as APIs assíncronas do navegador, como: eventos, compromissos, observáveis, setTimeout, setInterval, etc.
Ao ouvir essas informações, o aplicativo Angular pode detectar quaisquer mudanças e, assim, atualizar a interface do usuário, na verdade, como uma esponja de suporte, Zone.js também permite que o aplicativo Angular funcione suavemente. Nesse caso, problemas de desempenho que não sentimos em projetos muito grandes podem ocorrer.
Por outro lado, essa estrutura complexa parece nos impedir de perceber certas mudanças específicas ao longo do tempo. Cada característica e desenvolvimento anteriores, junto com seu próprio desenvolvimento interno e necessidades em mudança, de repente se torna um obstáculo para o próximo desenvolvimento e desenvolvimento.
Quando puxamos a esponja debaixo de nós, vemos que a liberdade natural de movimento começa a emergir quando a cama entra em contato direto com o chão. Quando o efeito limitador de conforto da esponja começa a se desgastar, isso significa que o movimento na cama será refletido diretamente no chão.
Tal metáfora pode significar que a esponja oferece uma zona de conforto e um sono relativamente mais confortável. Zone.js como essa esponja, ela oferece uma zona de conforto séria que nos permite sentir cada mudança na superfície. No entanto, com o tempo, essa estrutura complexa pode nos impedir de perceber algumas mudanças específicas. A dor lombar pode ocorrer quando puxamos a esponja debaixo de nós, e essas dores indicam que descemos do solo artificial para o natural, e embora essa experiência de transição possa ser um pouco dolorosa, no fim das contas, com uma lombar reta, sono mais confortável e melhor circulação, além de uma acuidade física e mental mais saudável. Quando mudamos para o ambiente sem zonas, ou seja, dores nas costas e nas articulações por dormir em uma cama sem esponja, é um bom sinal de que estamos mudando do solo artificial para o natural. Embora essa experiência de transição seja um pouco dolorosa, a dor também desaparece à medida que nossa lombar começa a se remodelar para seu estado natural anterior, proporcionando melhor circulação; O exemplo de transição aqui corresponde ao experimental Zoneless que ouvimos em Angular v18.
Acredita-se que Zone.js adiciona carga adicional porque rastreia operações asektron e as encaminha para mecanismos de detecção angular, como chamadas, eventos, erros, etc. Hoje, em termos de desempenho da Angular, não conseguimos ver ou sequer sentir a carga extra aqui. Zone.js poderia ser desenvolvido ainda mais e alguns problemas de depuração poderiam ser resolvidos, mas a base aqui é o roteiro do Angular. Vemos que os primitivos reagentes Signals desenvolvidos internamente pela Zone.js Angular agora estão atrapalhando os planos futuros da Angular. Embora a estrutura de Sinais seja muito útil em termos de mecanismos de detecção e também boa em termos de desempenho, fácil de usar e poderosa, Zone.js não é mais necessária, mas não é uma biblioteca que pode ser abandonada da noite para o dia.
Entendemos que a Angular não quer limitar seus sonhos, mas sim construir uma aplicação mais flexível e confiável, com uma estrutura mais autossuficiente, eliminando processos intermediários o máximo possível. Vemos a Angular caminhando para um estado mais prático e tentando aproveitar a oportunidade para entrar novamente na tendência de alta no futuro. Infelizmente, pela pesquisa atual do StateofJS, não podemos dizer que está nessa tendência, mas também vemos que a Angular está aberta a todas as inovações possíveis.
Como faço para mudar para o modo Zoneless no Angular 18?
O Angular 18 vem com um passo que nos permite mudar para o modo sem zonas e nos livrar da esponja. Como mostrado abaixo, agora podemos fornecer essa experiência usando o mecanismo de detecção de mudança de zona na fase de bootstrap.
Com a função acima adicionada ao provedor, agora podemos usar o comando npm desinstalar zone.js para remover o zone.js definido no array polyfills abaixo do angular.json.
Agora podemos usar o Angular Zoneless!
Quais são as vantagens do Zoneless?
O Zoneless oferece um ecossistema mais eficiente para nossas aplicações ao eliminar operações de escuta desnecessárias. Isso significa renderização mais rápida, maior desempenho, carregamentos de página mais rápidos, pacotes menores e depuração mais fácil.
Faça um teste clássico em que você adiciona um contador clicando em um botão e quer aumentar esse número ao clicar no botão. Nesse caso, podemos ver que o valor alterado é renderizado quando cada função é acionada, e esse valor muda no HTML. Como já é uma função e a acionamos diretamente, ela é renderizada aqui. Mas o que acontece se esse valor mudar devido a influências externas e quisermos ver qualquer mudança sem que tenhamos que acioná-lo manualmente? Se houver um Zone.js, ele está constantemente ouvindo todas as mudanças e notifica a Angular em nosso nome. No entanto, como não existe tal mecanismo no momento, precisamos ou acionar o mecanismo de detecção de mudança após alguma operação assíncrona, ou usar Signals ou RxJS diretamente, para que a mudança possa ser detectada diretamente devido a essa reatividade.
O desaparecimento de Sponge nos ensina que não é só Zone.js que desaparece, mas também a "zona de conforto".
Se usarmos Zone.js como um módulo com JavaScript bruto, ele ficará assim.
No Angular, não precisamos lidar com essas situações; Com ngZone, essas operações já funcionam em conjunto com o mecanismo de detecção.
Por exemplo, no caso de DOM direto, ouvintes de eventos, observáveis e compromissos, requisições HTTP e fluxos de controle síncronos, devemos acionar manualmente o mecanismo de detecção de mudanças para operações assíncronas.
Como Signals ou R xjs detectam mudanças automaticamente, não há necessidade de acionar o mecanismo de detecção de mudanças.
Exemplo de sinal:
Agora vamos escrever uma aplicação para testar os mecanismos de detecção de mudança Zoneless e Angular e ver como funcionam.
Após iniciar o intervalo definido acima como padrão, vemos que ele começa a funcionar, mas o DOM não é atualizado e as mudanças não são refletidas. Quando usamos o intervalo de início do sinal, vemos que ele funciona sem acionar o mecanismo de detecção de mudança do Angular. Como você pode ver, assim que o evento de clique e o intervalo de sinal começam, o Angular percebe a mudança, imediatamente captura a mudança no nosso intervalo padrão e então a libera.
Quando enviamos o valor de uma variável para o componente pai, percebemos que ele é percebido de forma diferente tanto em casos push quanto em padrão.
Quando vinculamos a entrada à esquerda, a mudança é refletida quando não há área, e da mesma forma, podemos ver que a mudança é refletida após clicar devido à promessa.
Aqui vemos que, após uma chamada HTTP sem detectar mudanças, as mudanças não são refletidas, apenas quando as acionamos manualmente. Claro, Signals reflete facilmente os novatos na tela desejada. Alguns dos códigos são os seguintes:
app.component.ts
change-detection-demo.component.ts
O aplicativo foi publicado no Stacklibitz, e você pode conferir o restante dos testes. Você também pode acompanhar os resultados na interface através do código.
Stackblitz:O login do hiperlink está visível.
GitHub:O login do hiperlink está visível.
Também há um exemplo de aplicação abaixo que mostra como funciona o mecanismo de detecção de mudanças do Angular, e você pode testar a partir daí também.
O login do hiperlink está visível.
Coisas a considerar ao mudar para o modo region-free
É importante notar que, como o nome sugere, o ExperimentalZonelessChangeDetection ainda é experimental.
Durante alguns testes, notamos algumas estranhezas no mecanismo de detecção de mudanças. Por exemplo, quando algumas mudanças não são acionadas manualmente, não vemos alterações no DOM e o estado não é atualizado. No entanto, quando outro sinal ou variável de reação funciona fora do mecanismo de detecção de mudança e faz com que o DOM seja atualizado, podemos observar que o estado anteriormente não atualizado também é atualizado.
Se você quiser implementar esse recurso em um projeto existente, deve testar cuidadosamente todas as ações e o comportamento da aplicação. Em particular, bibliotecas de terceiros podem depender de Zone.js, o que pode causar alguns erros e problemas de renderização.
Original:O login do hiperlink está visível. |
Postado em 30-12-2024 às 11:02:42
|
|
|
|
Senhorio|
Postado em 2024-12-30 11:04:13
|
