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.

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.

Available in English

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

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
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.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
API Testing with Postman Workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.