Medir y Mejorar el Rendimiento del Frontend Utilizando la Automatización de Pruebas

Rate this content
Bookmark
La charla se centra en la importancia de las pruebas y la recopilación de información para la construcción de buenas aplicaciones. Destaca el uso de la automatización de pruebas para el monitoreo del rendimiento y el registro para la medición del rendimiento. La charla también discute el impacto del rendimiento en la participación del usuario y en las clasificaciones de los motores de búsqueda. Enfatiza el uso de los plugins de Cypress para monitorear las métricas de rendimiento y establecer umbrales para las pruebas. En general, la charla enfatiza el valor de las herramientas de automatización de pruebas al proporcionar información valiosa a un bajo costo.

From Author:

Las pruebas de rendimiento automatizadas pueden ayudar a detectar los efectos perjudiciales de los cambios de código en el rendimiento de la aplicación. Aprenda a utilizar herramientas como Lighthouse y Web Core Vitals en su CI y establezca umbrales de rendimiento para mantener un rendimiento óptimo del frontend en esta sesión.

This talk has been presented at TestJS Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Ramona trabaja como Developer Advocate en Offs Zero, es Google Developer Expert en tecnología web y embajador de Cypress.

Ramona se centró en el tema de 'performance' dentro del contexto de pruebas de software, abordando cómo la información y la automatización son clave en este ámbito.

La automatización es crucial para apoyar los tres aspectos esenciales de las aplicaciones: hacer que funcionen correctamente, mantenerlas bien y optimizar su rendimiento.

Las tres métricas principales son: la Pintura de Contenido Más Grande (LCP), el Primer Retraso de Entrada (FID), y el Cambio de Layout Acumulativo (CLS).

Ramona propone usar las pruebas de extremo a extremo para capturar métricas de rendimiento significativas y utilizar herramientas como Lighthouse y Cypress para evaluar y mejorar la performance de las aplicaciones.

Ramona menciona varias herramientas como phpStan, ESlearnStyle, y otras herramientas de análisis estático que pueden ayudar a mejorar la calidad del código y facilitar las pruebas.

Integrar la automatización de pruebas permite no solo verificar la funcionalidad y la calidad del código, sino también monitorear y mejorar el rendimiento de la aplicación, haciendo más eficiente el proceso de desarrollo.

Ramona Schwering
Ramona Schwering
22 min
11 Dec, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introducción a las Pruebas e Información

Short description:

Hola a todos en TestJS Summit esta vez. Estoy muy contento de estar aquí de nuevo. Hoy, vuelvo a casa con un descubrimiento interesante sobre el rendimiento. Me apasionan las pruebas y creo que la información es rey. Recopilar información es importante para construir buenas aplicaciones. Hazlo funcionar, hazlo bien, hazlo rápido: el orden de construir buenas aplicaciones.

Hola a todos en TestJS Summit esta vez. Estoy muy contento de estar aquí de nuevo porque la cumbre TestJS fue una de las primeras conferencias en las que tuve el honor de ser orador. Es como volver a casa hoy.

Hoy, en realidad, vuelvo aquí con un pequeño descubrimiento interesante que quiero mostrar cuando se trata de mi experiencia en testing. Si ya lo habías adivinado, es sobre performance. Bueno, antes de eso, rápido, mi nombre es Ramona. Trabajo como Developer Advocate en Offs Zero. Aparte de eso, soy Google Developer Expert en tecnología web y embajador de Cypress. Como habrás adivinado, creo que, sí, al menos me apasiona cuando se trata de testing. Sí, no debería ser una sorpresa que esté aquí para hablar de testing hoy.

Entonces, especialmente cuando se trata de testing, hay algunas cosas que son realmente importantes. Y sí, esta pequeña cosa, el contenido es rey, que espero tener suficiente para estos 20 minutos. Fue hecho por Steve Bommer, creo. Hace muchas citas que son memorables. Pero bueno, cambiemos un poco esta cita. Porque, si el contenido es rey, la información es rey, como el doble o incluso más. Y no es solo porque me gusta jugar videojuegos y este es el título de una misión de World of Warcraft. Pero yo, bueno, lo encuentro interesante. Al menos me gustan esas pequeñas misiones secundarias donde, por ejemplo en este caso, un vendedor goblin llamado Goodskitch quiere tener un poco de piel de Krukal a cambio de información. Entonces, no solo en videojuegos la información es realmente importante. Recopilar información, tener una buena idea de lo que sucede dentro de tu aplicación, es realmente importante. No solo en los juegos, sino también cuando se trata de testing.

Entonces, bueno, supongo que esto debería estar claro la mayor parte del tiempo. Pero, ¿por qué necesitamos tener información sobre nuestra aplicación? Porque queremos construir buenas aplicaciones, ¿verdad? Entonces, podrías haber tropezado con esta cita de Comeback, que dice, hazlo funcionar, hazlo bien, hazlo rápido, en ese orden particular. Entonces, solo para profundizar un poco, hacer que funcione es autoexplicativo. Intenta resolver un problema a mano, que podría construir una buena aplicación. Entonces, solo haz que funcione cuando se trata de tus requisitos. Si puedes hacer eso, haz la segunda cosa, hazlo mantenible, hazlo bien. Entonces, intenta tener en cuenta los requisitos no funcionales. Ten en cuenta el código limpio, por ejemplo, para hacerlo no solo funcionar, sino funcionar de la manera correcta y funcionar de la manera en que todavía quieres trabajar con tu aplicación, digamos, un año a partir de ahora.

2. Uso de la Automatización de Pruebas para el Monitoreo del Rendimiento

Short description:

Y por último, pero no menos importante, haz que funcione, hazlo rápido, haz que el usuario no se sienta molesto al usar tu aplicación. Podemos usar la automatización para apoyarnos en estos tres puntos, incluso en el rendimiento. La automatización de pruebas se puede utilizar para monitorear el rendimiento y recopilar información. El registro es el arte de mantener un registro o una lista de eventos que ocurren en tu sistema informático, como problemas, errores o simplemente información en las operaciones actuales.

Y por último, pero no menos importante, haz que funcione, hazlo rápido, haz que el usuario no se sienta molesto al usar tu aplicación. Y sí, por supuesto, el primer punto, hacer que funcione es bastante fácil de lograr con testing. Entonces, si pruebas tu aplicación, sabes que está funcionando como se esperaba. El segundo punto, hacerlo bien, puede ser apoyado por tooling, por ejemplo, si tuviéramos buenas pruebas, facilitaría la escritura de un buen código. Y no quiero empezar con todos los linches, todas las herramientas de análisis estático que puedes ejecutar, como phpStan, ESlearnStyle y lo que sea. Pero, bueno, tenemos un buen soporte cuando se trata de primero, hacer que funcione, hacerlo bien. Pero ¿qué pasa con el tercer punto, hacerlo rápido y hacerlo funcionar y básicamente hacer que se sienta impecable? Bueno, hacer que tu aplicación funcione parece realmente desalentador, porque como dije, no tienes tanto soporte de herramientas todavía. Y bueno, incluso el punto, los pasos para acelerar tu código de aplicación es realmente difícil, porque podrías preguntar, como, ¿quién tiene tiempo para eso, quién tiene el poder para hacer eso? Y puede ser por presión de los clientes, pero especialmente el espacio mental dentro de ti mismo. ¿Y tenemos tiempo para mejorar el performance o mantenerlo? Porque incluso obtener toda la información que necesitas sobre tu aplicación para monitorear el performance, hacer todas esas medidas localmente lleva mucho tiempo. Y todo esto junto parece realmente desalentador. Entonces, ¿qué pasaría si te dijera un punto interesante de que no necesitamos sentirnos perdidos? No necesitamos sentirnos tan agotados o asustados. ¿Qué pasaría si te dijera que podemos usar la automation para apoyarnos en todos esos tres puntos? Incluso el performance. No solo trabajar, no solo hacerlo bien, hacerlo funcionar. ¿Qué pasaría si te dijera que puedes usar la automatización de pruebas para eso? No solo intentar aprender GitHub Actions para implementar algunas herramientas que nos ayuden a monitorear el performance, sino usar todo lo que ya tenemos. La automatización de pruebas que ya tenemos para nuestro proyecto. Bueno, lo sé, lo sé, es un poco como mal usar el testing, ¿verdad? Entonces, bueno, todavía es bueno porque puedes usar tus conocimientos que ya tienes para ello. No necesitas aprender nuevas herramientas. Puedes usar tu CI bien conocido y familiar. Por ejemplo, si no quieres usar GitHub Actions, que puede dártelo, o si una acción de GitHub estandarizada no es suficiente para satisfacer tus necesidades. Entonces, en mi mente creo que es interesante usar las pruebas de extremo a extremo para medir el performance porque la pila de aplicaciones AppStack está completamente ahí, y existente. Entonces podemos hacer más de ello, que solo cuando se trata de pruebas unitarias. Y estamos cerca del usuario que se molestaría por los problemas de performance, ¿verdad? Pero, si queremos pensar en usar la automatización de pruebas para monitorear el performance y recopilar, monitorear y recolectar información sobre nuestro performance, retrocedamos un paso y veamos cómo medimos o recopilamos información sobre nuestra automatización de pruebas para empezar. Bueno, como esta charla se llama Medición, comencemos con los valores predeterminados para arrojar algo de luz sobre ello.

Muchos piensan en la forma más interesante o más normal de ver la información de tus pipelines de automatización de pruebas. Por ejemplo, si quieres ver por qué algo falla, mirarás los registros. El registro es en realidad el arte de mantener un registro o una lista de eventos que ocurren en tu sistema informático, como problemas, errores o simplemente información en las operaciones actuales. Podría ser testing, por ejemplo, en este sentido. Registra todo lo que sucede dentro de tus pruebas.

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 Conference 2022React Advanced Conference 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.
Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
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.

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 🤐)
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
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.
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.
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