Todo lo que necesitas es un contrato...

Rate this content
Bookmark

¿Cuántas veces has tenido que esperar a que tu equipo de backend termine de construir la API para poder comenzar tus tareas? ¿Y si todo lo que necesitaras para mover esa tarea a en progreso fuera el contrato de la API? ¿Y si hubiera una biblioteca que hiciera esto para las API de REST y GraphQL y, al mismo tiempo, llevara tus pruebas al siguiente nivel? Únete a mí y prepárate para mejorar tu experiencia de desarrollo mientras aprendes todas las experiencias ganadas en batalla de usar una de mis bibliotecas favoritas: Mock Service Worker.

Daniel Afonso
Daniel Afonso
29 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El orador discute los desafíos del estado del servidor y el mantenimiento de pruebas, y cómo encontraron soluciones usando React Query y Mock Service Worker. Enfatizan los beneficios de definir contratos para un desarrollo más rápido y la reducción del estrés. El orador también destaca las ventajas de usar Mock Service Worker sobre los servidores simulados y explica cómo permite una fácil personalización y anulaciones de pruebas. Mencionan el próximo lanzamiento de la V2 de MS-Double y animan al público a mantenerse actualizado.

Available in English

1. Introducción y molestias como desarrollador

Short description:

En esta parte, el orador expresa gratitud hacia la audiencia y reconoce el arduo trabajo de los organizadores de la conferencia. También mencionan tres cosas que les molestan como desarrollador: código inmantenible, pruebas afectadas por la inmantenibilidad y tareas tardías en los sprints. El orador promete compartir una historia sobre cómo ellos y su equipo solucionaron estos problemas.

Bueno, permítanme aclarar la sala. No va a haber contrato testing aquí. Esta es una broma de la que estábamos hablando antes de subir al escenario. Además, me voy a mover mucho, así que estoy tratando de averiguar el lugar. Eso está bien, si no me ciega la luz.

Antes que nada, React Advance, muchas gracias por tenerme aquí. Es un placer. Caminaré por ese lugar porque aparentemente la cámara no me captará en el otro, así que intentaré no moverme mucho.

Solo quería comenzar esta charla con, me gustaría dar un aplauso alegre, porque hubo mucho trabajo duro para preparar esta conferencia para todos de Git nation, todos del equipo técnico. No sé si están al tanto, pero cuando comenzamos hoy, tuvimos algunos problemas para conectar todo, y ahora todo ya está funcionando hasta ahora, ¿puedo obtener un todos los que están trabajando en esto? Vale. Muchas gracias.

Entonces, comencemos esto porque ya pasó un minuto, y realmente hay tres cosas que me molestan como desarrollador. La primera es cuando tienes un código inmantenible. Conoces la sensación. Tu código no es realmente tan bueno a veces. Cuanto más agregas, peor se pone. Es difícil. Sí, es duro. Y luego la segunda cosa que realmente me molesta, es cuando esa inmantenibilidad encuentra una forma de meterse en tus pruebas. Ahora no es malo que tu código no sea bueno, tus pruebas tampoco son buenas. Probablemente no estás durmiendo tan bien por la noche porque sabes lo que se siente tener pruebas inestables. Y la tercera cosa que realmente me molesta, y prometo no empezar una diatriba aquí, es cuando tienes una tarea que llega tarde al sprint. Sé que algunos de ustedes se relacionan con la sensación. Imaginemos que tenemos un equipo donde dos partes están trabajando en una tarea y la primera parte toma el 98% del tiempo, y una vez que la tarea llega a ti, tienes el 2% del tiempo. Así que obviamente tu gerente de producto va a esperar que entregues eso ayer. Y este es un sentimiento del que podría empezar a hablar aquí y no pararía.

Así que continuemos, porque tengo una historia sobre cómo yo y mi equipo solucionamos estos problemas hace un par de años. Así que comencemos desde el principio sobre cómo acabamos de solucionar el primer problema. Yo y mi equipo acabamos de derrotar al monstruo del código inmantenible. Porque esto había sido algo que estaba rondando, nos amenazaba, era duro.

2. Desafíos del Estado del Servidor y Problemas de Pruebas

Short description:

El orador discute los desafíos del estado del servidor y cómo tuvieron que implementar varias funcionalidades por sí mismos. Luego descubrieron React Query, que resolvió sus problemas de estado del servidor. Sin embargo, surgió un nuevo desafío con pruebas inmantenibles y defectuosas. El orador finalmente encontró una solución y se presenta como Daniel Alfonso, un defensor del desarrollador en OLX.

¿Y cuál era la razón? Bueno, la razón era el estado del servidor. No sé si están al tanto de lo que es el estado del servidor. Normalmente es el estado que existe en algún lugar de Internet como externo a su aplicación. Y tiene un montón de desafíos. Caché, deduplicación de solicitudes, data prebúsqueda. Hay un mantenedor aquí de React Query del que puedes hablar de muchos de estos desafíos y probablemente puedes entender cuánto dolor es entender y tener que implementar esto a mano y puedo decirles que mi equipo y yo, no teníamos React Query en aquel entonces o al principio, no lo teníamos. Así que estábamos implementando todas estas cosas por nosotros mismos y cuanto más código teníamos, peor se volvía el monstruo del código inmantenible. Así que empezamos a pensar, ¿por qué estamos implementando esto nosotros mismos de nuevo? ¿Qué estamos tratando de demostrar al ir en esta dirección? Y bueno, pasaron un par de meses y fue cuando un par de, bueno, estos meses pasaron un compañero de trabajo, como el Rey Arturo en la película de la Espada y la Piedra. Creo que así se dice en inglés. Lo siento, hablante no nativo de inglés aquí. Un compañero de trabajo se acercó a la piedra y sacó una consulta de 10 pilas. Así que aparentemente, esta nueva cosa, React Query, acababa de aparecer y era la solución para nuestros problemas. Y la consulta de 10 pilas trajo armonía a nuestro código porque ahora todos los problemas e inconvenientes que teníamos con el estado del servidor se resolvieron y no tuvimos que preocuparnos por implementar eso por un tiempo.

Ahora, una nueva amenaza se cernía en las sombras. Verás, esa inmantenibilidad encontró una forma de salir de nuestro código y entrar en nuestras pruebas. Ahora, no sé si recuerdan esta imagen que les mostré hace un par de minutos, pero esto es Hydra. Y ya saben lo que dicen de las Hidras. Corta una cabeza, dos más toman su lugar. Y esto es más o menos lo que empezaba a suceder con nosotros porque ahora nuestras pruebas no solo eran inmantenibles. Eran defectuosas. Eran complejas. No podía dormir por la noche porque no confiaba en lo que estaba haciendo y ahora te preguntas, ¿cuál es la relación? ¿Qué vamos a ver? Bueno, ahora, hace un par de años puedo decirles que mi equipo y yo logramos solucionar estos problemas. Y la parte divertida fue que todo lo que necesitábamos era un contrato. Así que esta es la parte donde realmente empiezo la charla.

Permítanme presentarme rápidamente. Soy Daniel Alfonso. Trabajo como defensor del desarrollador en OLX. Soy instructor de AGIT y embajador de Out-there y puedes encontrarme, voy a decir Twitter debido a la encuesta anterior en Twitter y prácticamente en cualquier red social al final Así que Daniel GC Alfonso. También algo sobre mí, recientemente publiqué un libro llamado State Management con React Query. Gracias.

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.
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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
Get rid of your API schemas with tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

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.
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Database Workflows & API Development with Prisma
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
Best Practices and Patterns for Managing API Requests and States
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.