Como melhorar desempenho de uma aplicação Angular com OnPush

Em:

Change Detection é uma das principais funcionalidades do Angular, responsável por marcar os componentes quando um evento ocorre. Dessa forma, os componentes podem (caso implementem o evento) modificar a view.

Por padrão, o Angular trabalha de forma conservadora. Ou seja, quando ocorre um evento, todos os componentes são marcados para verificar se algo deve ser modificado nas views.

O desenho abaixo — sim, eu sou o artista plástico responsável pela obra de arte que você está preste a ver — ilustra o que acontece em uma aplicação Angular quando um evento ocorre.

change detection default

change detection default

Por ter sido desenvolvido com foco em performance, o Angular consegue executar centenas de milhares de verificações por milissegundo. Mas, como não existe almoço grátis, isso acaba consumindo mais recursos do que é realmente necessário.

Para que isso não aconteça, podemos trabalhar com a estratégia do change detection no modo OnPush. Dessa forma, o componente passa a ser responsável por todos os eventos ocorridos nele mesmo, ignorando qualquer outro evento da aplicação.

Assim, quando um evento ocorre no componente, devemos utilizar o ChangeDetectorRef para marcar que houve uma mudança. Isso faz com que todo caminho até o componente seja marcado, para que os “pais” também sejam verificados e atualizados.

Veja a diferença.

change detection OnPush

change detection OnPush

Uma simples mudança, mas que traz bons ganhos em performance quando se trabalha com grandes aplicações.

Por fim, para facilitar o gerenciamento dos objetos dentro da aplicação, quando trabalharem com o change detection em OnPush, aconselho que os objetos sejam utilizados de forma imutável .

Objetos mutáveis trarão mais dores de cabeça do que solução quando trabalhamos dessa forma.

Cursos recomendados pela BrazilJS

    • GovHackMT, o primeiro Hackathon de Mato Grosso

      Pela primeira vez, em Mato Grosso, teremos uma maratona hacker: o GovHackMT. O objetivo do evento é beneficiar o cidadão, além de revelar nomes da tecnologia do estado. O GovHackMT acontece de 4 a 6 de novembro. A meta principal do evento é desenvolver soluções práticas para resolver problemas comuns a todos cidadãos, promovendo assim […]

    • Um novo padrão para o objeto global no JavaScript

      O objeto global no JavaScript é, no mínimo, peculiar. Muitos novatos na linguagem acabam cometendo erros graves por não saberem exatamente como o objeto global funciona. Até mesmo programadores experientes em outras linguagens podem enfrentar dificuldades em entender e utilizar o objeto global. Vejamos o exemplo abaixo: function calc(x, y) { a = x + […]

    • BrazilJS Weekly #223 – Natal BrazilJS & Alura 🎅, PWA e 3D na Web

      Na penúltima edição da BrazilJS Weekly de 2017 temos muitas novidades e assuntos relevantes. Tem até presente de Natal para todos, desconto de 10% nos cursos da incrível Alura!

    Patrocinadores BrazilJS

    Gold

    Silver

    Bronze

    Apoio

    BrazilJS® é uma iniciativa NASC.