Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React

Rate this content
Bookmark
Project website

Las condiciones de carrera se encuentran entre algunos de los problemas más desafiantes de detectar y reproducir. Como tal, representan un desafío significativo en el desarrollo, notablemente en la interfaz de usuario. En esta charla, exploramos cómo detectar condiciones de carrera aprovechando las técnicas de fuzzing. Te guiamos a través del descubrimiento del verdadero problema de las condiciones de carrera y cómo impactan en la experiencia del usuario. Te proporcionamos herramientas y ejemplos que demuestran cómo detectarlas fácilmente en tu trabajo diario gracias a las pruebas que se basan en el fuzzing. Después de esta charla, esperamos que tu código React esté libre de condiciones de carrera o al menos que tengas las herramientas adecuadas para ayudarte.

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

FAQ

Una condición de carrera, según Wikipedia, es una condición donde el comportamiento sustantivo del sistema depende de la secuencia de tiempo de otros eventos incontrolables.

Nicolas mencionó un ejemplo donde inicialmente buscaba alojamiento en París y luego cambió a buscar en Londres, pero recibió resultados tardíos de París debido a una condición de carrera, lo que resultó en una mala experiencia de usuario.

Nicolas sugiere el uso de pruebas, en particular pruebas automáticas que involucren aleatorización y simulación de llamadas a la API para asegurarse de que el sistema maneje adecuadamente las condiciones de carrera.

Se puede testear un campo de autocompletado en React simulando llamadas a la API y escribiendo en el campo, luego verificando que las sugerencias coincidan con las entradas actuales del usuario, aun cuando las respuestas de la API se entreguen en un orden diferente al solicitado.

FastCheck es un marco de pruebas basado en propiedades que ayuda a probar condiciones de carrera mediante la generación de ejecuciones aleatorias y la gestión de la resolución de llamadas a la API de manera que se pueda verificar la robustez de la aplicación frente a condiciones incontrolables.

Nicolas discute sobre cómo las condiciones de carrera pueden afectar la precisión de los datos financieros en su empresa de planificación de negocios, Pigment, enfatizando la importancia de tener cifras correctas en tiempo real para la toma de decisiones.

Nicolas Dubien
Nicolas Dubien
31 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Las condiciones de carrera pueden ser complejas de depurar y reproducir, causando frustración para los usuarios. El orador discute ejemplos de condiciones de carrera y formas de solucionarlas y evitarlas. Demuestran un ejemplo de un campo de autocompletado en React y cómo manejar las condiciones de carrera en las llamadas API. El orador introduce el marco FastCheck para pruebas basadas en propiedades para abordar las condiciones de carrera y mejorar las pruebas. La aleatorización de entradas y salidas puede ayudar a descubrir errores específicos para ciertos escenarios. El orador también discute la mitigación de las condiciones de carrera en React y el manejo de la sobrecarga de pruebas y la reproducibilidad.

1. Introducción a la Condición de Carrera

Short description:

Hoy, hablaré sobre la condición de carrera. La condición de carrera es compleja de depurar y reproducir. Sucede inesperadamente y puede ser frustrante para los usuarios. Daré ejemplos y discutiré formas de solucionar y evitar las condiciones de carrera. Soy Nicolas, el autor de la biblioteca Fasttech y el fundador de Pigment.

Buenas tardes a todos. Hoy, hablaré sobre la condición de carrera. Mi nombre es Nicolas y la idea es abordar un problema que es complejo de debug, complejo para reproducir, y es por eso que quería discutir la condición de carrera. Porque básicamente, la condición de carrera resulta ser un poco así. Nunca sabes cuándo sucede y probablemente Oh, lo siento. No se suponía que fuera eso. Nunca sabes cuándo sucede y tienes que lidiar con ellos. Pero nos centraremos en la condición de carrera. Aquí hay un ejemplo de condición de carrera. En el pasado, hace unos años, estaba buscando alojamiento en París para ir a París. En el famoso sitio web, no estoy vinculado en absoluto a esta empresa, pero estaba buscando alojamiento en París, y en algún momento, cambié de opinión. Decidí ir a Londres. Puedes ver que estaba buscando alojamiento en Londres. Hay algunos alojamientos bonitos en Londres, y parecen bastante agradables, de hecho. Pero en algún momento, obtuve algunos resultados de París. Esto es exactamente de lo que trata la condición de carrera. Es como algo que pides en algún momento, pero sucede un poco tarde, y recibes resultados más tarde. En algún momento, el usuario se frustra un poco al obtener este resultado. En ese caso específico, es solo una mala UX para el usuario. Ellos lidiarán con eso, y aún podrán usar la aplicación. Pero eso no está bien. Daré algunos ejemplos adicionales para eso. Pero hoy, el objetivo será hablar sobre estas condiciones de carrera y encontrar algunas formas juntos para solucionarlas y evitar que sean una fuente de frustración para los usuarios.

Entonces, como me presenté rápidamente antes, avancemos un poco más. Soy Nicolas. Como se presentó, soy el autor de la biblioteca llamada Fasttech. Puedes tener el enlace allí. Puedes encontrarme en las redes sociales. Pero hablaré un poco sobre mi empresa. Mi empresa es

2. Entendiendo las Condiciones de Carrera

Short description:

Estoy haciendo planificación de negocios y quería hablar sobre las condiciones de carrera. Las condiciones de carrera son importantes para tratar, especialmente en finanzas donde las cifras precisas son cruciales. Una condición de carrera ocurre cuando el comportamiento del sistema depende del tiempo de eventos incontrolables. En una aplicación frontal o React, las entradas de los usuarios y las llamadas a la API son fuentes potenciales de condiciones de carrera. Para ilustrar, volvamos a visitar un video donde busqué estancias en París y cambié de opinión. Las llamadas a la API para París y Londres no devolvieron resultados en el orden esperado, causando una interfaz de usuario defectuosa.

llamado Pigment. Estoy haciendo planificación de negocios. Así que es como para datos financieros, y en finanzas, es importante tener las cifras correctas en el momento correcto en tiempo real. Y esto es principalmente por lo que quería hablar sobre las condiciones de carrera. En el trabajo, no puedo permitirme tener ninguna condición de carrera. Quiero decir, al menos no tener una condición de carrera que haría que las cifras fueran incorrectas, porque la gente las usará para tomar algunas decisiones. Por lo tanto, las condiciones de carrera son muy importantes para tratar, y tienes que ser capaz de lidiar con ellas en algún momento para evitar problemas. Pero veamos juntos qué es una condición de carrera. Y tomaré la definición que viene de Wikipedia. Entonces, una condición de carrera, según Wikipedia, es una condición donde el comportamiento sustantivo del sistema depende de la secuencia de tiempo de otros eventos incontrolables. Lo que me gusta de esta definición es como la secuencia de eventos incontrolables. Y si piensas un poco en tu aplicación frontal o tu aplicación React, porque estamos en una conferencia de React. Tenemos muchos eventos incontrolables. Va desde las entradas de los usuarios. Nunca sabemos cuándo ingresarán cosas en su aplicación a las llamadas a la API. Nunca sabemos cuándo responderá el backend. Y básicamente, estas son fuentes potenciales de condiciones de carrera. Para entender mejor qué es una condición de carrera, volvamos al video que hemos visto juntos cuando estaba buscando estancias en París, y cambié de opinión. Entonces, inicialmente, en este video, he estado buscando estancias en París. Así que hice una llamada para... Y escribí algunas cosas para buscar estancias en París. En este punto, espero que el sitio web estuviera haciendo algún tipo de llamada a la API para obtener estas estancias. En algún momento en el tiempo, debería haber recibido resultado para París, porque era mi consulta inicial. Luego hice una segunda llamada para buscar estancias en Londres. Luego, de nuevo, segunda llamada a la API. Y luego debería haber recibido resultado. En realidad, no sucedió de esa manera. Nunca recibí el resultado para París en el momento correcto. El resultado para París llegó un poco más tarde. Y esa es la razón por la que recibimos una interfaz de usuario defectuosa. Lo hemos visto

QnA

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
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.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
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
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.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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