Flashlight, un Faro para Aplicaciones Móviles

informe. Ahora se abre una nueva página, dependiendo del tráfico, debería tomar aproximadamente 10 minutos para terminar y que Flashlight obtenga el informe. Así que voy a dividir esto un poco. Entonces, cuando Flashlight finalmente termina, después de aproximadamente 10 minutos, esto es lo que verías. Verías que esencialmente lo que sucedió es que Flashlight ha iniciado la aplicación 10 veces y ha medido performance y lo que es realmente agradable es que tienes este botón de ver informe y si haces clic en él, boom, tienes tu informe de performance. Y en nuestro caso, podemos ver que es bastante malo. Afortunadamente, Flashlight nos da algunas métricas de performance para entender por qué es tan malo. Aquí podemos ver, por ejemplo, que este aquí es el que parece ser problemático. Alto uso de CPU. Vemos que tenemos un hilo usando mucha CPU durante mucho tiempo, un hilo llamado mqtjs. Podemos revisar los gráficos. Así que tenemos tasas de fotogramas, tenemos el uso total de CPU y tenemos el uso de CPU por hilo y podemos ver de nuevo mqtjs de hecho, básicamente durante toda la duración de la medida es realmente muy alto. Utiliza demasiada CPU. Bueno, podemos preguntarnos, ¿qué es mqtjs? Lo adivinaste, es el Hilo JS. Nunca quieres que este tipo esté cerca del 100% de uso de CPU porque entonces eso es lo mismo que tener cero JSFPS, tu aplicación no respondería a nada. El Hilo JS está bloqueado. Entonces, eso es lo que sucede cuando abrimos nuestra aplicación, básicamente, y Flashlight nos está diciendo que tenemos un gran problema. Ten en cuenta que en realidad Flashlight se está ejecutando en un verdadero dispositivo Android de gama baja, un Samsung Galaxy A10s por defecto. Así que en un dispositivo de gama baja sí, performance es realmente mala. ¿Qué podemos hacer para solucionarlo? Bueno, nuestra aplicación es básicamente una lista vertical compuesta de listas horizontales anidadas. Y estamos usando flat lists para ambas, horizontal y vertical. Pero veamos qué sucede si cambiamos a usar el componente de Shopify llamado Flashlist. Luego podemos simplemente regenerar nuestro APK y hacer exactamente lo mismo que antes para obtener un nuevo informe con Flashlist. ¡Y boom! Ah, esto es mucho mejor. Obtenemos una puntuación de 75 de 100. Pero lo que es realmente agradable es que podemos ir a la sección de historial aquí. Podemos hacer clic en ambos informes, el primero, MyAppWithFlatlist y el segundo llamado Flashlist. Y podemos abrir la vista de comparación. Tenemos el video también. Solo voy a cerrarlos. Y por ejemplo, si salto al uso de CPU por hilo, podemos ver bastante fácilmente que sí, en verde con Flashlist, el uso de CPU del hilo Jez es

de hecho, mucho mejor con Flashlist. Pero lo bueno de Flashlight es que también puedes usarlo localmente para medir rápidamente los cambios de rendimiento en tu aplicación con nuestra CLI de código abierto. Es muy sencillo de instalar. Y luego, por ejemplo, si tienes un dispositivo conectado con una aplicación React Native en ejecución, puedes simplemente ejecutar Flashlight measure. Luego auto detect para detectar automáticamente la aplicación que está actualmente en foco. Y digamos que quiero medir el rendimiento del desplazamiento. Puedo empezar a medir. Comienzo a desplazarme en mi aplicación. Y medirá el rendimiento de este desplazamiento. Puedes ver que la puntuación cambia rápidamente a cero. De nuevo, tenemos un problema masivo en el hilo JS al desplazarse. Así que digamos que implementaste una solución. Por ejemplo, cambiando de flat list a flash list. Podemos recargar. Y básicamente podemos hacer lo mismo de nuevo. Empecemos a medir de nuevo. Desplázate de nuevo. Y podemos ver que ahora, el rendimiento es realmente mucho mejor. Eso es todo para esta breve presentación de Flashlight. Si quieres saber más sobre lo que puede hacer, puedes consultar la documentación en docs.flashlight.dev o también puedes consultar este artículo sobre la comparación del rendimiento del desplazamiento de la lista en una aplicación React Native entre FlatList y FlashList, que entra en más detalles. De lo contrario, si tienes alguna pregunta también puedes contactarme en Twitter o GitHub. En cualquier caso, espero que hayas disfrutado de la presentación y que tengas un buen tiempo.