Cómo implementar OnPush Change Detection ? - Aumenta la performance de tu app de Angular 🚄🚄
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Buenas a todos !!
Como parte de nuestros videos más corto les traigo... cómo aumentar la performance de tu app de Angular usando OnPush Change Detection !!
Si quieres dejar de tener problemas o aumentar la performance de tu aplicación con un simple cambio ( bueno no taaaan simple pero lo haremos simple !!! )...
A por ello !!!
Si quieres hacer una donación:
streamelements...
▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
Link a Spotify: spoti.fi/3y281cY
Link a la comunidad: / discord
LInk al libro "Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación web": amzn.to/2ReBuzL
Ufff, brutal!!! Me gustaría seguir viendo estos temas relacionados con el rendimiento. Muchos éxitos!
Ya van a haber más, lo prometo !!
Uff que bueno este video. Conocimiento que vale oro y que no es tan común verlos en tutoriales de angular.
Qué explicación más brutal!, no solo te enfocas en lo que hace si no que puntualizas, CUANDO y en que casos aplica de manera muy clara, esto le da un valor grande a los que estamos aprendiendo porque nos permite ver el verdadero enfoque, así plantear y poder deducir más lo que estamos haciendo, muchas gracias por la explicación, me suscribo!. Estaría geníal que hagas más videos sobre el ciclo de detección de cambios de Angular, por ejemplo en casos específicos como un ViewChild dentro de una directiva estructural ( un ngIf), he visto que también puntualizan el cdr aquí.
vamoooo, muy bien explicado. No abundan videos del change detection aparte
Gracias popurríiiii
Loco la rompiste toda... like y campanita pa!
Excelente! Como siempre algo nuevo de mucha utilidad para el día a día y como no puede ser de otra manera re contra bien explicado. Impecable!
Muchas gracias Mister Tadeoooo
Muy importante concepto y muy poco nombrado en cursos básicos! Buen aporte!
Muchas gracias Fernando !
Brutal informacion, Crees que sea posible hacer un video explicando mas a fondo que tan duro es el golpe al performance?, Gracias!
Yes ! siempre lo explico cada vez que hago un proyecto live pero para que sepas la ganancia en performance es MUCHA. Piensa que si tienes 3 componentes y se hace la detección de cambios normal…no verás gran diferencia, PERO, si tienes unos 30 componentes en pantalla ahí sí que se notará y mucho.
En uno de mis trabajos tenia formularios de como 25 inputs y al hacer un cambio, sea cual sea, se trataba de validar cada uno de ellos y la aplicación sufría ! el onPush fue un cambio MUY beneficioso.
Excelente vídeo. Solo hay una cosa que no te entiendo bien al oírla. Sobre el minuto 5:50 dices que OnPush nos sirve para detectar cambios en clicks, otra cosa, suscripciones e @Inputs y @Outputs. ¿Cuál es esa otra cosa que dices?
Al revés ! OnPush detecta SÓLO inputs, outputs, subscriptions y cualquier interacción del user con la app, como clicks, escrituras en inputs, etc :)
Muy bueno! Genial!
Muchas gracias Diegooo
belleza de funcionalidad, genial genial!
Sí que lo es !!! parece mentira pero es MUY grande la ganancia en performance
@@GentlemanProgramming si, voy a subir este enlace al grupo de whatsapp de angular q ayudo a administrar, cosas así nos sirven full! En lo personal también para mi ERP, mil gracias nuevamente!
@@wanchuchos lo que necesitéis !!!
excelente video, a lo mejor seria bueno algun caso de uso para cada uno. Estoy realizando un proyecto en el cual estoy implementando NGXS en especifico ngxs/labs, pero realmente conozco muy poco del state manangement seria genial algun curso a lo mejor por udemy es que tiene tantas cosas que realmente no se si lo estoy implementando de manera correcta o como puedo sacarle el mayor provecho muchas gracias y excelentes videos sin tanta paja
Dale ! Voy a tratar de hacer uno por aquí
Genio!!! Gracias! Justo estaba buscando algo asi.
De nada !! A ver cómo te va con on Push :D
que genio ! estaría copado un ejemplo practico con reactive forms o algo asi
Yaaa vamos a tener, lo prometo :)
buena explicacion!!
No me quedo muy claro como actualizar un hijo desde un nodo padre, al momento de cambiar el valor de un input
Desde el padre solo pásale la propiedad del scope como un atributo al hijo y este se actualizará automaticamente :)
Excelente!
Gracias Francoooo !!
@@GentlemanProgramming Todo lo contrario, gracias a vos! Te cuento que hace poco empecé a laburar en IT, y fue por un video tuyo que aprendí a usar redux en Angular y pude aprobar la prueba técnica.
El día que saques un curso de Angular avanzado voy a ser el primero en comprarlo!
Muy bueno
Muchas gracias Martin !!
Bien explicado
Muchísimas gracias Hector !
excelente video
Thank youuuu !
Muy buena la explicación. Si bien no responde directamente lo que estoy buscando y lo que me preguntaron en el trabajo en un test, me sirve saberlo. Te voy a seguir! :)
Por las dudas la pregunta era: Cuál es la diferencia entre ChangeDetectionStrategy.OnPush y ChangeDetectionStrategy.Default?
PD: Trabajo con Angular, Spartacus y Typescript.
Hola ! Creo que la respondo en el vídeo, on push es que solo se reconocerán cambios que vengan de los @Inputs, llamadas asíncronas como un observable e interacciones del usuario con el html, como lo es un click. Para cualquier otra cosa se puede utilizar dentro de OnPush el change detector ref para actualizar a nuestro antojo :)
@@GentlemanProgramming Sí. Después de ver una documentación y hacer unos ejemplos sencillos, miré de nuevo el vídeo y sí, esta todo más que clarito! Gracias por compartir lo que sabés loquito!!
@@francooliva8723 always ! Y para lo que necesites :)
Buen video!
tengo una aplicación bastante grande, y estaba usando el detectChanges para los cambios. Lo que me pasaba es que al haber tantos componentes el detectChanges duraba algo considerable, lo cambié por el markforCheck y mejoró bastante el performance, me parece el detectChanges tiene un costo el mandar a hacer actualiciones en el momento a esperar que se ejecute en el siguiente tick con el markforcheck. Otra diferencia importante es que el detectChanges aplica para el nodo actual y sus hijos 5:35, no viaja a los padres de la rama, mientras que el markforcheck setea el estado del nodo y sus parents para que en el proximo tick sí revise los cambios.
export function markParentViewsForCheck(view: ViewData) {
let currView: ViewData|null = view;
while (currView) {
if (currView.def.flags & ViewFlags.OnPush) {
currView.state |= ViewState.ChecksEnabled;
}
currView = currView.viewContainerParent || currView.parent;
}
}
buen video! me parece que un tema super interesante y gracias por exponerlo de forma simple :)
Muchas gracias a ti ! Y si ! Se puede complicar mucho y más en aplicaciones grandes por lo que hay que saber bien que elegir. Has probado identificando donde se realizan los cambios y usar el detach re attach ? Es otra posibilidad. Y muchas gracias realmente por tu comentario !!!
Ah y me olvidaba de decirte gracias por lo detectChanges, que es lo que quise decir en que se mantenian en la misma rama pero se me olvido este detalle que no es menor. Gracias !!
@@GentlemanProgramming sí, super util el detach y reattach. en este momento es que estoy trabajando en performance entonces es cuando es estado explorando el tema. la verdad es que Angular tiene varias posibilidades para que el programador sea el que tenga el control, y el detectChangeRef me parece que es de lo más util que hay!
Puedes hacer un ejemplo practico? 😁 👌
Hola ! Es para hacerlo siempre ! Es una muy buena práctica que tus componentes uses OnPush y controlar de manera manual los cambios extras. :D
Igualmente por ahí hago un vídeo más largo explicando más y con un ejercicio no te preocupes ;)
Debes mejorar ese problema que tienes de mezclar las palabras en ingles tratandolas de castellanizar
Lamentablemente saber ingles es muy importante en el mundo de la programacion. Hay palabras claves como scope, como inputs u outputs que hay q decirlas en ingles. Creo que el mix esta bueno, y si no lo entendes no deberias intentar ser programador.