diff --git a/docs/src/content/docs/es/challenges/angular/22-router-input.md b/docs/src/content/docs/es/challenges/angular/22-router-input.md new file mode 100644 index 0000000..6450719 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/22-router-input.md @@ -0,0 +1,26 @@ +--- +title: 馃煝 @RouterInput() +description: El desaf铆o 22 trata sobre el uso del decorador @Input para utilizar par谩metros del router. +author: thomas-laforge +challengeNumber: 22 +command: angular-router-input +blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617 +sidebar: + order: 5 +--- + +## Informaci贸n + +En esta aplicaci贸n, tomaremos tres pedazos de informaci贸n dentro de nuestro `TestComponent` proporcionadas por el router: + +- Queremos obtener el `testId` que tenemos como parte de los par谩metros de la URL. +- Queremos obtener `user` ubicado dentro de los par谩metros de consulta (query params) de la URL. +- Queremos acceder a `permission` establecido dentro del objeto `data` de la ruta. + +En las versiones 15 o anteriores de Angular, usamos `ActivatedRoute` para obtener toda esta informaci贸n y recibirla a trav茅s de observables para escuchar los cambios de URL. + +En la versi贸n 16, Angular introdujo un nuevo `Input` que puede 'escuchar' los datos de la ruta. Puedes leer m谩s al respecto [aqu铆](https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617). + +## Declaraci贸n + +El objetivo de este ejercicio es refactorizar el c贸digo para usar la nueva estrategia `RouterInput`. diff --git a/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md b/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md new file mode 100644 index 0000000..4e7c9f4 --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/12-scroll-cd.md @@ -0,0 +1,38 @@ +--- +title: 馃煚 Optimizar el Change Detection al desplazarse +description: Desaf铆o 12 sobre la optimizaci贸n del n煤mero de ciclos de detecci贸n de cambios al desplazarse +author: thomas-laforge +challengeNumber: 12 +command: performance-scroll-cd +sidebar: + order: 107 +--- + +## Informaci贸n + +En Angular, hay una biblioteca llamada Zone.js que realiza mucha magia para simplificar la vida del desarrollador. Zone.js parchea todos los eventos del DOM para que vuelva a verificar y volver a renderizar la vista cuando algo ha cambiado dentro de la aplicaci贸n. El desarrollador no tiene que activar manualmente la detecci贸n de cambios. + +Sin embargo, a veces Zone.js activa mucha m谩s detecci贸n de cambios de la necesaria. Por ejemplo, cuando se est谩 escuchando un evento de desplazamiento, cada evento de desplazamiento generar谩 un nuevo ciclo de detecci贸n de cambios. + +En este desaf铆o, solo necesitamos actualizar la vista en una posici贸n de desplazamiento espec铆fica para mostrar u ocultar un bot贸n. Todos los dem谩s ciclos son innecesarios. + +Para tener una mejor visualizaci贸n del problema, perfila tu aplicaci贸n con Angular Dev Tools. + +:::note +Si no sabes c贸mo usarlo, lee [la p谩gina de introducci贸n al rendimiento](/es/challenges/performance/) primero y vuelve despu茅s. +::: + +Puedes obtener m谩s detalles sobre la contaminaci贸n de la zona y c贸mo resolverla [aqu铆](https://angular.io/guide/change-detection-zone-pollution). + +El siguiente video explicar谩 m谩s a fondo el problema de esta aplicaci贸n. + + + +## Enunciado + +Tu objetivo para este desaf铆o es evitar todos los ciclos de detecci贸n de cambios innecesarios y activar una detecci贸n de cambios solo cuando sea necesario. + +## Restricci贸n: + +No puedes optar por no usar Zone.js globalmente. Si este c贸digo forma parte de un proyecto grande y optas por no usar Zone.js, sin duda romper谩s tu aplicaci贸n. diff --git a/docs/src/content/docs/es/challenges/performance/34-default-onpush.md b/docs/src/content/docs/es/challenges/performance/34-default-onpush.md new file mode 100644 index 0000000..941f72c --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/34-default-onpush.md @@ -0,0 +1,55 @@ +--- +title: 馃煝 Default vs OnPush +description: El desaf铆o 34 trata sobre aprender la diferencia entre las estrategias de detecci贸n de cambios Default y OnPush. +author: thomas-laforge +challengeNumber: 34 +command: performance-default-onpush +sidebar: + order: 7 +--- + +## Informaci贸n + +En este desaf铆o, exploraremos las diferencias e impactos de usar `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. + +Puedes leer la [documentaci贸n de Angular](https://angular.io/guide/change-detection-skipping-subtrees) para aprender m谩s sobre las diferencias entre estas estrategias. + +En este desaf铆o, todos los componentes comienzan con la estrategia `Default`. Cuando escribas letras dentro del campo de entrada, notar谩s que todos los componentes se resaltan en naranja. + +:::note[Nota] +Agregu茅 resaltado de color a cada componente y cada fila para proporcionar una mejor visualizaci贸n de cu谩ndo se vuelve a renderizar un componente. +::: + +Como puedes ver, cada letra desencadena un nuevo ciclo de detecci贸n de cambios, y todos los componentes se vuelven a renderizar, lo que causa problemas de rendimiento. + +Utilicemos la Angular DevTool para perfilar nuestra aplicaci贸n y comprender c贸mo esta herramienta puede ayudarnos a entender qu茅 est谩 sucediendo dentro de nuestra aplicaci贸n. + +:::note[Nota] +Si no sabes c贸mo usarlo, lee primero [la p谩gina de introducci贸n al rendimiento](/es/challenges/performance/) y vuelve despu茅s. +::: + +Ahora, comienza a perfilar tu aplicaci贸n y escribe algunas letras dentro del campo de entrada para desencadenar algunos ciclos de detecci贸n de cambios. + +Si haces clic en una de las barras (indicada por la flecha amarilla en la imagen a continuaci贸n), puedes ver que `PersonListComponent`, `RandomComponent` y todos los `MatListItem` se ven afectados por el ciclo de detecci贸n de cambios, incluso cuando solo interactuamos con el campo de entrada. + +![profiler record](../../../../../assets/performance/34/profiler-record.png 'Registro del Profiler') + +## Enunciado + +El objetivo de este desaf铆o es mejorar el agrupamiento de la detecci贸n de cambios dentro de la aplicaci贸n utilizando la estrategia de detecci贸n de cambios `OnPush`, pero no solo eso... + +## Pistas: + +
+ Pista 1 + +Utiliza `ChangeDetectionStrategy.OnPush`, pero esto no ser谩 suficiente. + +
+ +
+ Pista 2 + +Crea componentes m谩s peque帽os para separar mejor el campo de entrada de la lista. + +
diff --git a/docs/src/content/docs/es/challenges/performance/35-memoize.md b/docs/src/content/docs/es/challenges/performance/35-memoize.md new file mode 100644 index 0000000..60aeeb9 --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/35-memoize.md @@ -0,0 +1,50 @@ +--- +title: 馃煝 Memoizaci贸n +description: El desaf铆o 35 trata sobre c贸mo funcionan las tuber铆as puras +author: thomas-laforge +challengeNumber: 35 +command: performance-memoized +sidebar: + order: 8 +--- + +
Desaf铆o #35
+ +## Informaci贸n + +En Angular, los pure pipes son muy poderosas porque el valor se memoiza, lo que significa que si el valor de entrada no cambia, la funci贸n `transform` del pipe no se vuelve a calcular y se emite el valor en cach茅. + +Puedes aprender m谩s sobre pipes en la [documentaci贸n de Angular](https://angular.io/guide/pipes) y en este [art铆culo de inmersi贸n profunda](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d). + +En este desaf铆o, comenzamos con un bot贸n para cargar una lista de personas. Cada persona est谩 asociada con un n煤mero y utilizaremos el c谩lculo de Fibonacci para crear una computaci贸n pesada que ralentizar谩 la aplicaci贸n. + +Una vez que se carga la lista, intenta escribir algunas letras dentro del campo de entrada. Te dar谩s cuenta de que la aplicaci贸n es muy lenta, a pesar de que solo est谩s realizando una escritura muy b谩sica. + +:::note[Nota] +No nos centraremos en la carga inicial de la lista en este desaf铆o. +::: + +Utilicemos la Angular DevTool para perfilar nuestra aplicaci贸n y comprender c贸mo esta herramienta puede ayudarnos a entender qu茅 est谩 sucediendo dentro de nuestra aplicaci贸n. + +:::note[Nota] +Si no sabes c贸mo usarlo, lee primero [la p谩gina de introducci贸n al rendimiento](/es/challenges/performance/) y vuelve despu茅s. +::: + +Ahora, comienza a perfilar tu aplicaci贸n y escribe algunas letras dentro del campo de entrada. Ver谩s que aparecen algunas barras rojas en el panel del perfilador. + +Si haces clic en una de las barras (indicada por la flecha amarilla en la imagen a continuaci贸n), ver谩s que el ciclo de detecci贸n de cambios est谩 tardando m谩s de 3 segundos en `PersonListComponent`. + +![profiler record](../../../../../assets/performance/35/memoize-profiler.png 'Registro del perfilador') + +## Enunciado + +El objetivo de este desaf铆o es comprender qu茅 est谩 causando esta latencia y mejorarla. + +## Pistas: + +
+ Pista 1 + +Utiliza `Pipes` para memoizar el c谩lculo de Fibonacci. + +
diff --git a/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md b/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md new file mode 100644 index 0000000..463c72a --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/36-ngfor-optimize.md @@ -0,0 +1,31 @@ +--- +title: 馃煝 Optimizaci贸n de NgFor +description: El Desaf铆o 36 trata sobre como funciona trackby +author: thomas-laforge +challengeNumber: 36 +command: performance-ngfor-optimize +sidebar: + order: 13 +--- + +## Informaci贸n + +En esta aplicaci贸n, tenemos una lista de individuos que podemos agregar, eliminar o actualizar. Si abres el panel de desarrollador de Chrome presionando **F12**, ve a la pesta帽a source y expande el elemento para ver la lista, notar谩s que cada vez que agregas, eliminas o actualizas un elemento de la lista, se destruyen y vuelven a inicializar todos los elementos del DOM. (Ver video a continuaci贸n). + + + +Tambi茅n podemos usar la Angular DevTool para perfilar nuestra aplicaci贸n y entender qu茅 est谩 sucediendo dentro de ella. Te mostrar茅 c贸mo hacerlo en el siguiente video. + + + +:::note +Si no sabes c贸mo usarlo, lee primero [la p谩gina de introducci贸n al rendimiento](/es/challenges/performance/) y vuelve despu茅s. +::: + +Si necesitas m谩s informaci贸n sobre `NgFor`, te invito a leer primero la [documentaci贸n](https://angular.io/api/common/NgFor). + +## Enunciado + +El objetivo de este desaf铆o es entender qu茅 est谩 causando esta actualizaci贸n del DOM y solucionarlo. diff --git a/docs/src/content/docs/es/challenges/performance/37-ngfor-biglist.md b/docs/src/content/docs/es/challenges/performance/37-ngfor-biglist.md new file mode 100644 index 0000000..e944c61 --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/37-ngfor-biglist.md @@ -0,0 +1,32 @@ +--- +title: 馃煚 Optimizando una lista larga +description: El desafio 37 trata sobre como optimizar una lista grande de elementos +author: thomas-laforge +challengeNumber: 37 +command: performance-ngfor-biglist +sidebar: + order: 117 +--- + +## Informaci贸n + +En esta aplicaci贸n, renderizaremos una lista de 100,000 individuos al hacer clic en el bot贸n loadList. Si abres el panel de desarrollo de Chrome presionando F12, ve al 铆cono de Fuente y expande el elemento para ver la lista, notar谩s que los 100,000 elementos se renderizan en el DOM, aunque solo podemos ver alrededor de 20 elementos en el 谩rea visible. Este proceso lleva mucho tiempo, por lo que la aplicaci贸n es muy lenta al mostrar la lista. + +Podemos utilizar la Herramienta de Desarrollo de Angular para perfilar nuestra aplicaci贸n y entender lo que est谩 sucediendo en su interior. Te mostrar茅 c贸mo hacerlo en el siguiente video. + + +:::[nota] +Si no sabes c贸mo usarlo, lee la p谩gina de introducci贸n al rendimiento primero y regresa despu茅s. +::: + +Enunciado +El objetivo de este desaf铆o es implementar una alternativa mejor para mostrar una lista grande de elementos. + +Pistas: + +
+ Pista 1 +Si no est谩s seguro por d贸nde empezar, te recomiendo leer la documentaci贸n de virtualizaci贸n de Angular CDK. + +
diff --git a/docs/src/content/docs/es/challenges/performance/index.mdx b/docs/src/content/docs/es/challenges/performance/index.mdx new file mode 100644 index 0000000..9d718ef --- /dev/null +++ b/docs/src/content/docs/es/challenges/performance/index.mdx @@ -0,0 +1,49 @@ +--- +title: Rendimiento en Angular +prev: false +next: false +description: Aprende a usar la extensi贸n de Chrome Angular Devtools. +noCommentSection: true +sidebar: + order: 1 +--- + +import { LinkCard } from '@astrojs/starlight/components'; + +En esta serie de desaf铆os sobre rendimiento, aprender谩s c贸mo optimizar y mejorar el rendimiento de tu aplicaci贸n Angular. + +Antes de comenzar a resolver cualquier desaf铆o, te invito a descargar la [extensi贸n de Chrome Angular DevTools](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) si a煤n no lo has hecho. + +Esta extensi贸n te permite perfilar tu aplicaci贸n y detectar problemas de rendimiento, lo cual es muy 煤til para entender d贸nde pueden ocurrir problemas de rendimiento. + +## C贸mo usarlo + +Cuando sirves una aplicaci贸n Angular, puedes inspeccionar una p谩gina presionando F12, lo cual abrir谩 las herramientas de desarrollo de Chrome. Luego navega a la pesta帽a Angular. Desde all铆, puedes seleccionar la pesta帽a Profiler como se muestra a continuaci贸n. + +![profiler tab](../../../../../assets/performance/profiler-tab.png 'Profiler tab') + +Ahora puedes perfilar tu aplicaci贸n haciendo clic en el bot贸n de grabaci贸n. Puedes interactuar con tu aplicaci贸n y ver cu谩ndo se activa la detecci贸n de cambios y qu茅 componentes se vuelven a renderizar. + +:::tip[Aprende m谩s] +Puedes obtener m谩s informaci贸n en la [p谩gina de documentaci贸n](https://angular.io/guide/devtools). +::: + +Ahora que sabes c贸mo usar la Angular DevTool, puedes elegir un desaf铆o, perfilarlo y resolverlo. + + + + + +