Change Detection OnPush
Hoy vamos a hablar de la detección de cambios en Angular, más concretamente del OnPush (Change Detection OnPush).
Hay veces que el rendimiento y la optimización es clave. En esos casos se suelen recurrir a tecnologías y lenguajes más optimizados o que operan a menor nivel.
En el mundo de las aplicaciones web, no suele ser lo común, donde nos encontramos pesados navegadores que la interpretan y motores JavaScript alterando el DOM. A día de hoy nos es algo transparente, dado los potentes equipos que utilizamos.
Aunque rara vez nos encontramos momentos en los que el rendimiento de una aplicación Angular es crítica, tenemos varios truquillos a los que recurrir, como Angular Universal o el lazy loading.
Pero para el caso que nos atañe, vamos a algo que puede incluso facilitarnos un poco más la vida a un programador, y que no es tan costoso.
Hablamos de alterar la detección de cambios en Angular.
¿Pero qué es eso de «detección de cambios en Angular»?
Estamos utilizando JavaScript por algo, ¿verdad?
¿Alguien recuerda esas páginas planas en las que no había más interacción que las URL a las que se enlazaban con otras?
Si, bueno, que tal vez nuestra página en Angular sea algo así… Pero vamos, que normalmente hay interacción y datos que tratar por en medio.
Al rellenar un campo de un formulario esperamos que nos notifique si está mal. Al pulsar un botón esperamos que ocurra algo.
Las páginas web se van transformando gracias al motor JavaScript, que tiene que estar atento a cualquier evento de usuario o mecanismo propio de la página, para notificárselo al navegador.
Pues eso es el detector de cambios. Y Angular reescribe la implementación natural del navegador para manejar mejor los cambios.
Hablábamos de optimización, ¿Cuál es la relación con el detector de cambios?
En realidad Angular ya optimiza de sí el proceso, y lo normal es que no toquemos nada más. Pero una simple línea de código (bueno, con sus «import») nos puede dar un pequeño empujoncito extra.
Aquí es donde entra el ChangeDetectionStrategy.OnPush:
Change Detection OnPush
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})Obviamente, cambiar el tipo de detección de cambios en Angular por defecto a este nuevo no está exento de posibles «inconvenientes».
El detector de cambios por defecto de Angular tiene cierta tendencia psicótica a detectar cambios. Lo cual evita problemas al usuario standard, ya que nunca va a tener que hacerse la pregunta de ¿por qué no veo esto actualizado?
Si mantenemos ciertos criterios y buenas prácticas, en realidad no debemos notar diferencia al modificar la estrategia de detección de cambios, pero es comprensible que Angular no opte por esta estrategia por defecto.
El cambio que debemos tener en cuenta en Change Detection OnPush
Ya hay un artículo sobre ello donde se aprecia mejor, y con ejemplos, varios casos y como afecta el ChangeDetectionStrategy.OnPush.
Resumo, únicamente, que los cambios principalmente detectados son cambios de referencia de la información.
Digamos que, si de un objeto con varios atributos cambias solamente el valor de alguno de sus atributos, y este objeto a su vez sirve de input a otro componente; ese componente es probable que no detecte el cambio.
La solución a este problema en el Change Detection OnPush es tan aparentemente sencilla como instanciar el mismo objeto y que contenga toda esa nueva información cambiada. Entonces sí, la referencia cambiaría y el componente lo detectaría.
Nótese que lo que estamos haciendo aquí es acordar que todo objeto es inmutable: no alterar un objeto, sino que crear uno nuevo con la misma información y su cambio.
Siguiendo esta premisa, nunca tendremos problema con el Change Detection OnPush.
En cuanto a Observables, lo mejor siempre es resolverlos en el justo lugar en el que se necesita la información.
No hay que cambiar un Observable, puesto que únicamente es una herramienta «de escucha»: emitirá valores nuevos en el punto de suscripción.
Digamos que no hay que cambiar Observables, sino hacerse cargo del contenido que emitan.
Cerrando con una conclusión
El uso de ChangeDetectionStrategy.OnPush es una forma sencilla de tener una ligera optimización de nuestras aplicaciones, a costa de muy poco.
Siempre está bien tenerlo en cuenta. Si nuestra forma de programar es muy ortodoxa, posiblemente ni notemos inconveniente alguno.
