Fala, comunidade dev! 👋
Se você acompanhou o artigo anterior sobre a introdução dos Signals no nosso projeto corporativo, deve ter notado que a reatividade do Angular ficou mais "esperta". Mas para entender o ganho absurdo de performance que tivemos pulando para o Angular 21, precisamos falar do elefante na sala: o zone.js.
1. O que era o zone.js e por que ele virou um problema?
Desde o Angular 2, o framework usava uma biblioteca chamada zone.js para saber quando atualizar a tela. O zone.js atua como um "espião". Ele intercepta absolutamente tudo o que acontece no navegador do usuário: cliques de botão, setTimeout, chamadas HTTP (fetch/XHR).
Sempre que um desses eventos terminava, o zone.js gritava para o Angular: "Ei! Algo aconteceu. Verifique a árvore de componentes inteira para ver se alguma variável mudou!".
O Gargalo de Performance: Em um sistema pequeno, varrer a tela inteira é imperceptível. Mas em um YMS (sistema de gestão de pátios) com 5 anos de idade, exibindo grids de milhares de linhas e componentes pesados do PrimeNG, essa verificação constante (Change Detection Cycle) custava muito caro à CPU. Um simples
setIntervalrodando nos bastidores podia causar pequenos engasgos na interface inteira.
2. O Futuro Estável: Zoneless Angular
Com a chegada dos Signals, o Angular agora sabe exatamente qual variável mudou e qual pedaço mínimo do HTML precisa ser redesenhado. Ele não precisa mais do espião (zone.js) gritando para verificar o sistema inteiro.
No Angular 21, essa abordagem atingiu a maturidade. A API deixou de ser experimental e se tornou totalmente estável. Ativar a aplicação sem o Zone agora é o padrão recomendado e incrivelmente simples. Mudamos apenas o nosso arquivo de inicialização (main.ts):
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
bootstrapApplication(AppComponent, {
providers: [
provideZonelessChangeDetection(), // A mágica oficial e estável acontece aqui!
// ... outros providers de rotas e HTTP
]
});
3. O Impacto no Projeto
Desligar o zone.js reduziu imediatamente o peso inicial do nosso pacote JavaScript (são cerca de 100KB a menos para o navegador baixar). Mas o principal benefício foi sentido na UX (Experiência do Usuário).
A interação com tabelas de dados dinâmicos, modais e filtros complexos passou a rodar cravada em 60 frames por segundo, sem que a Main Thread do navegador fosse bloqueada por dezenas de verificações desnecessárias a cada clique.
Atenção na Migração: Migrar um sistema legado para Zoneless exige cuidado. Você precisa garantir que o seu estado local já está usando Signals ou que você está chamando o
ChangeDetectorRef.markForCheck()corretamente caso ainda dependa de bibliotecas de terceiros assíncronas que não foram atualizadas para Signals.
Conclusão
Remover o zone.js foi como tirar os "pesos de treinamento" das pernas do nosso Angular. O retorno em fluidez de tela e velocidade de carregamento é imediato e brutal.
No próximo post (Parte 7), vamos sair do nível do código e ir para o nível de arquitetura de pastas. Vou mostrar como organizamos um sistema gigantesco e escalável usando princípios de Clean Architecture.
Você já ativou o provideZonelessChangeDetection() nas suas aplicações mais recentes? Deu tudo certo de primeira ou alguma biblioteca antiga quebrou a renderização da tela? Conta aí nos comentários! 👇
Top comments (0)