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.

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
Pocos desarrolladores disfrutan depurando, y la depuración puede ser compleja para las aplicaciones web modernas debido a los múltiples marcos, lenguajes y bibliotecas utilizados. Pero, las herramientas de desarrollo han avanzado mucho en facilitar el proceso. En esta charla, Jecelyn profundizará en el estado moderno de la depuración, las mejoras en DevTools y cómo puedes usarlas para depurar tus aplicaciones de manera confiable.
Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Ya sea que estés probando tu UI o API, Cypress te proporciona todas las herramientas necesarias para trabajar y gestionar solicitudes de red. Esta tarea de nivel intermedio demuestra cómo usar los comandos cy.request y cy.intercept para ejecutar, espiar y simular solicitudes de red mientras pruebas tu aplicación en el navegador. Aprende cómo funcionan los comandos, así como los casos de uso para cada uno, incluyendo las mejores prácticas para probar y simular tus solicitudes de red.
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
Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress ha tomado al mundo por sorpresa al traer una herramienta fácil de usar para pruebas de extremo a extremo. Sus capacidades han demostrado ser útiles para crear pruebas estables para aplicaciones de frontend. Pero las pruebas de extremo a extremo son solo una pequeña parte de los esfuerzos de prueba. ¿Qué pasa con tu API? ¿Qué pasa con tus componentes? Bueno, en mi charla me gustaría mostrarte cómo podemos comenzar con pruebas de extremo a extremo, profundizar con pruebas de componentes y luego subir a probar nuestra API, circ
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
Los desarrolladores quieren dormir tranquilos sabiendo que no rompieron la producción. Las empresas quieren ser eficientes para satisfacer las necesidades de sus clientes más rápido y obtener una ventaja competitiva antes. TODOS queremos ser coste efectivos... o debería decir... ¡PRUEBA EFECTIVA!¿Pero cómo hacemos eso?¿Nos sirve bien la terminología de "unidad" e "integración"?¿O es hora de un cambio? ¿Cuándo deberíamos usar cada estrategia para maximizar nuestra "efectividad de prueba"?¡En esta charla te mostraré una nueva forma de pensar sobre las pruebas coste efectivas con nuevas estrategias y nuevos términos de prueba!¡Es hora de ir MÁS PROFUNDO!

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.
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.
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
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.