Flashlight, un Faro para Aplicaciones Móviles

Rate this content
Bookmark

La promesa de Lighthouse es bastante genial, ¿verdad? Visita cualquier sitio web, y con solo unos pocos clics, ¡puedes obtener una puntuación de rendimiento para él!

¿No sería grandioso si tuviéramos lo mismo para las aplicaciones React Native?


¡Pues estás de suerte! Permíteme presentarte nuestra nueva herramienta de código abierto llamada Flashlight 🔦

(porque ya sabes, una linterna es básicamente un faro “móvil” muy pequeño, ¿verdad?)

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Para generar un informe de rendimiento con Flashlight, simplemente visita app.flashlight.dev, sube un APK de lanzamiento de tu aplicación Android, configura los parámetros de medición y haz clic en enviar para recibir tu informe, el cual estará listo aproximadamente en 10 minutos.

Si Flashlight indica un rendimiento bajo, la herramienta proporcionará métricas detalladas como el uso de CPU y tasas de fotogramas para ayudarte a identificar y entender las causas del problema, como un alto uso de CPU por parte del hilo JS.

Actualmente, Flashlight solo soporta aplicaciones Android, pero el soporte para iOS está en desarrollo y será implementado próximamente.

Puedes encontrar más información y la documentación completa de Flashlight en docs.flashlight.dev. Además, hay artículos disponibles en línea que comparan el rendimiento de diferentes componentes en React Native, como FlatList y FlashList.

Sí, Flashlight también ofrece una CLI de código abierto que puedes instalar y usar localmente para medir rápidamente los cambios de rendimiento en tu aplicación React Native.

Flashlight es una herramienta diseñada para medir el rendimiento de las aplicaciones móviles, similar a cómo Lighthouse funciona para sitios web. Permite a los usuarios subir aplicaciones Android y generar un informe de rendimiento detallado.

Flashlight sugiere alternativas y soluciones para mejorar el rendimiento, como cambiar de FlatList a FlashList en React Native, lo cual puede mejorar significativamente la eficiencia y reducir el uso de CPU.

Alexandre Moureaux
Alexandre Moureaux
7 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy presenta Flashlight, una herramienta para medir el rendimiento de las aplicaciones móviles. Flashlight proporciona un informe de rendimiento que destaca problemas como el alto uso de CPU en dispositivos de gama baja. Para solucionar estos problemas, se puede utilizar el componente Flashlist de Shopify. Flashlight también se puede utilizar localmente para medir los cambios de rendimiento en las aplicaciones React Native, con la capacidad de ver la puntuación cambiando rápidamente y el rendimiento mejorado después de implementar las correcciones. Se puede encontrar más información en la documentación y en un artículo que compara el rendimiento de desplazamiento en React Native.

1. Introducción a Flashlight

Short description:

Hola a todos. Hoy, estoy feliz de hablar sobre la medición del rendimiento de las aplicaciones móviles e introducir nuestra nueva herramienta llamada Flashlight. Es como un Lighthouse móvil. Solo sube tu aplicación Android en app.flashlight.dev, configura la medición y obtén un informe de rendimiento.

Hola a todos. Soy Alex. He estado trabajando con React Native durante los últimos ocho años en BAM, y hoy estoy muy feliz de hablarles sobre la medición del rendimiento de las aplicaciones móviles. Siempre he querido tener una forma fácil de saber si el rendimiento de mi aplicación era bueno o no. Y siempre he estado celoso de los desarrolladores web por Lighthouse. ¿Alguna vez has usado Lighthouse? Puedes ir a cualquier sitio web y con él, con unos pocos clics, simplemente generar un informe de rendimiento y obtener una puntuación de rendimiento para la página web que visitaste, lo cual es bastante genial, ¿verdad? ¿No sería agradable si tuviéramos algo similar, pero para aplicaciones móviles? Bueno, hoy estoy muy orgulloso de presentarles nuestra nueva herramienta llamada Flashlight. Está pensada como un Lighthouse móvil. Así que veamos cómo funciona. Puedes ir ahora mismo, si quieres, a app.flashlight.dev y subir cualquier aplicación Android, el soporte para iOS está en camino. Así que digamos, por ejemplo, esto es compartir mi teléfono. Tenemos una aplicación como esta, como tengo una especie de clon de Netflix. Puedo generar un APK de lanzamiento para él y subirlo aquí mismo. Y luego puedo configurar lo que quiero que Flashlight mida. Así que por defecto, puedes medir el inicio de la aplicación bastante fácilmente. Solo necesitas introducir aquí algún texto que aparecerá cuando la aplicación se haya cargado. Por ejemplo, aquí cuando mi aplicación se ha cargado, sé que familia e historia aparecerán así que puedo simplemente introducir familia aquí, y luego hacer clic en envíame mi rendimiento

2. Análisis del Informe de Rendimiento y Solución de Problemas

Short description:

Ahora se abre una nueva página y, después de aproximadamente 10 minutos, Flashlight proporciona un informe de rendimiento. Podemos ver que la aplicación tiene un alto uso de CPU, particularmente en el Hilo JS. Flashlight destaca este problema, especialmente en dispositivos de gama baja. Para solucionarlo, podemos cambiar a usar el componente de Shopify llamado Flashlist, que mejora significativamente el rendimiento.

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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva