Patrones avanzados para la gestión de API en aplicaciones React a gran escala

Rate this content
Bookmark

En esta charla, descubrirás cómo gestionar operaciones asíncronas y cancelación de solicitudes implementando una capa de API mantenible y escalable y mejorándola con una lógica de cancelación desacoplada. También aprenderás cómo manejar diferentes estados de API de una manera limpia y flexible.

This talk has been presented at React Advanced Conference 2021, check out the latest edition of this React Conference.

FAQ

La implementación de una capa de API en aplicaciones React ayuda a resolver problemas como la duplicación de código, la falta de reutilización y dificultades en la mantenibilidad. Permite que los cambios se concentren en un solo lugar, mejorando la escalabilidad y flexibilidad al agregar nuevos métodos o cambiar de cliente HTTP.

Para gestionar las solicitudes de API de manera escalable en React, se puede implementar una capa de API que centralice las llamadas y maneje la configuración inicial de los clientes HTTP como Axios o Firebase, facilitando la reutilización y mantenimiento del código.

Una capa de API en React es una abstracción que gestiona las comunicaciones HTTP entre la aplicación y los servicios externos. Se utiliza creando archivos base donde se configuran y exportan métodos HTTP, que luego pueden ser reutilizados en diferentes componentes de la aplicación sin duplicar código.

En React, se pueden manejar los estados de una API usando un hook personalizado que administra estados como 'idle', 'pending', 'success' y 'error'. Este enfoque reduce la necesidad de múltiples estados y facilita la gestión del estado general de las solicitudes API.

Para cancelar solicitudes en React utilizando Axios, se puede integrar lógica de aborto dentro de la capa de API. Esto involucra crear un método que permita pasar un token de cancelación a las solicitudes, que puede ser utilizado para abortar la solicitud si es necesario.

Para integrar React Query con una capa de API, simplemente importa el método API necesario y utiliza hooks de React Query como 'useQuery'. Esto permite manejar las solicitudes y estados de API de manera eficiente, proporcionando funcionalidades como la cancelación de solicitudes y la recarga de datos.

La implementación de una capa de API ofrece beneficios como la centralización de la gestión de solicitudes, facilitando la mantenibilidad, escalabilidad y flexibilidad. También mejora la reutilización del código y permite la fácil sustitución de clientes HTTP, añadiendo personalizaciones específicas sin alterar los componentes.

Thomas Findlay
Thomas Findlay
20 min
25 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla cubre patrones avanzados para la gestión de API en aplicaciones React a gran escala. Introduce el concepto de una capa de API para gestionar las solicitudes de API de una manera más organizada y mantenible. Los beneficios de usar una capa de API incluyen una mejor mantenibilidad, escalabilidad, flexibilidad y reutilización de código. La charla también explora cómo manejar estados y estatus de API en React, y proporciona ejemplos de cancelación de solicitudes con Axios y React Query. Además, explica cómo usar la capa de API con React Query para una gestión de API simplificada.

1. Introducción a la Gestión de API en React

Short description:

Bienvenidos a Patrones Avanzados para la Gestión de API en Aplicaciones React a Gran Escala. Hoy, cubriremos la gestión de solicitudes de API en React, el manejo de diferentes estados de API, la creación de hooks personalizados, la cancelación de solicitudes con Axios y React Query. Realizar solicitudes de API en React puede llevar a la duplicación de código y la falta de reutilización. Para abordar esto, podemos implementar una capa de API. Al crear un archivo base de API e importarlo en otros archivos de API, podemos gestionar las solicitudes de API de una manera más organizada y mantenible.

Hola, y bienvenidos a Advanced Patterns para la Gestión de API en Aplicaciones React a Gran Escala. Mi nombre es Tomasz Fienli y soy un desarrollador web y móvil full-stack con nueve años de experiencia en programación. Soy co-propietario de Fienli web tech y mentor y consultor en CodeMentor.io. También soy el autor de los libros Vue y React the Road to Enterprise, así como escritor técnico para Telerik y los blogs Road to Enterprise. Ahora, vamos a ver lo que vamos a cubrir hoy. Así que, en primer lugar, comenzaremos con cómo gestionar las solicitudes de API en React de una manera escalable y flexible con una capa de API. Luego veremos cómo manejar diferentes estados de API mientras realizamos solicitudes de API. También crearemos hooks personalizados para gestionar las solicitudes y estados de API, así como cómo cancelar solicitudes con Axios y una capa de API. Finalmente, echaremos un vistazo a cómo usar React Query y la capa de API y cómo cancelar solicitudes con ellos.

Bueno, entonces, ¿cómo podemos realizar solicitudes de API en React? En realidad, es bastante simple, ¿verdad? Podemos, por ejemplo, usar Axios para eso. Podemos simplemente importarlo y usarlo en nuestros componentes. Y, bueno, puede funcionar bien para, digamos, pequeñas aplicaciones. Pero hay algunos problemas a medida que el proyecto crece, especialmente los grandes, realmente. Entonces, ¿cuáles son los principales problemas con este enfoque? En primer lugar, la code duplicación y la falta de reutilización. Porque imagina que necesitamos, por ejemplo, obtener información sobre un usuario, digamos en la página de inicio de sesión, la página de registro, y la página de perfil del usuario. Así que, todos estos tendrían, bueno, el mismo fragmento de code. Así que, Axios obtiene un punto final de URL y así sucesivamente, ¿verdad? Así que eso no es realmente reutilizable. Y también, bueno, es difícil de mantener. Porque si tuviéramos que hacer cualquier cambio en este code, como digamos, por ejemplo, el cambio de punto final de URL o tuviéramos que cambiar el formato de la carga útil, o, digamos, tuviéramos que migrar de usar Axios a algo como Firebase, ¿verdad? Necesitaríamos visitar cada componente que es Axios y cambiarlos. Bueno, eso no es realmente genial, para ser honesto. Así que, vamos a ver cómo podemos solucionar estos problemas implementando una capa de API. Así que, primero, comenzaríamos con un archivo base de API, donde importaríamos Axios y crearíamos una nueva instancia con alguna configuración predeterminada, como, por ejemplo, una URL base. Luego tenemos una función de API que básicamente devuelve métodos de envoltura de API alrededor de nuestro cliente Http en este caso, Axios. Y finalmente, lo exportamos. Lo siguiente que podemos hacer es, podemos usar este archivo base de API e importarlo en otro archivo de API. Así que, por ejemplo, en este caso, tendríamos un archivo de API de usuarios. Porque queremos hacer algunas cosas con los usuarios, como obtener información sobre los usuarios, agregar un nuevo usuario, y así sucesivamente. En este ejemplo, tenemos tres métodos, listar usuarios, obtener usuario y agregar usuario. Y como puedes ver, todos ellos utilizan los métodos de API del archivo base de API. ¿Y cómo usaríamos esto en un componente ahora? Así que, básicamente, lo que haríamos es, importaríamos un método de API del directorio de API,

2. Beneficios y Flexibilidad de la Capa API

Short description:

La capa API en React te permite abstraer los detalles de los puntos finales de la API y cambiar fácilmente entre diferentes clientes HTTP. Al separar la lógica de la API en una capa separada, tus componentes permanecen agnósticos a la implementación subyacente. Esto mejora la mantenibilidad, escalabilidad y flexibilidad. Puedes agregar fácilmente nuevos métodos de API, reemplazar el cliente HTTP y mejorar la capa de API con lógica personalizada. La reutilización del código también se incrementa, ya que los métodos de API se pueden importar y utilizar en cualquier parte de la aplicación. El patrón de la capa de API es agnóstico al marco, lo que lo hace adecuado para varios entornos de desarrollo.

y luego simplemente usarlo en un componente. Entonces, como puedes ver, el componente no tiene que pensar en qué tipo de punto final de API tiene que ser golpeado, ¿verdad? El método de API se encarga de eso. Entonces, ¿qué pasa si queremos usar un cliente HTTP diferente, digamos, por ejemplo, Firebase en lugar de Axios. Entonces, nuestro archivo base de API se vería un poco diferente. Aquí, simplemente importaríamos algunos métodos necesarios de Firebase, inicializaríamos la aplicación Firebase. Y luego exportaríamos lo que necesitamos, por ejemplo, Firebase, Firestore, que nos da métodos para básicamente, bueno, conectar con la database, y así sucesivamente, y otras cosas como funciones de almacenamiento de autenticación, etc. Ahora, en el archivo de API de usuario, tendríamos de nuevo los mismos métodos, como listar usuarios, obtener usuario y agregar usuario. Sin embargo, en este caso, estamos usando Firebase, por supuesto, debajo del capó. Pero veamos cómo se vería desde la perspectiva del componente ahora. Bueno, en realidad, para el componente, nada cambiaría, porque todavía importaría el método de API del archivo de API de usuarios, y simplemente lo ejecutaría, ¿verdad? Así que eso es algo realmente genial de la capa de API, porque es como una caja negra para tus componentes. Porque tus componentes realmente no tienen que preocuparse por lo que usas para realizar solicitudes. Sólo le preocupa qué métodos deberías llamar, qué tipo de entrada debería proporcionar y qué tipo de salida puede esperar. Mientras puedas preservar este contrato de entrada y salida, no necesitas hacer ningún cambio en tus componentes. Sólo necesitas hacer cambios en la capa de API, en realidad.

Ahora, echemos un vistazo a los beneficios de la capa de API. En primer lugar, la mantenibilidad, ya que todo el code relacionado con la API está en un solo lugar. Scalability, ya que puedes agregar fácilmente nuevos métodos y archivos de API. Y también tenemos flexibilidad, es mucho más fácil reemplazar el cliente HTTP, y también mejorar la capa de API con lógica personalizada. Así que como acabas de ver, reemplazamos el acceso con Firebase y no necesitamos hacer ningún cambio en el componente. También la reutilización del code, porque los métodos de API pueden ser simplemente importados y utilizados en cualquier parte de la aplicación. Y el patrón de la capa de API también es agnóstico al framework.

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

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Despídete de tus esquemas de API con tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Despídete de tus esquemas de API con tRPC
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

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 🤐)
Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Práctica con AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Práctica con AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.- Comenzando e instalando AG Grid- Configurando ordenamiento, filtrado, paginación- Cargando datos en la cuadrícula- La API de la cuadrícula- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la cuadrícula con componentes de React
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.
Flujos de base de datos y desarrollo de API con Prisma
Node Congress 2022Node Congress 2022
98 min
Flujos de base de datos y desarrollo de API con Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma es un ORM de código abierto para Node.js y TypeScript. En esta masterclass, aprenderás los flujos de trabajo fundamentales de Prisma para modelar datos, realizar migraciones de base de datos y consultar la base de datos para leer y escribir datos. También aprenderás cómo Prisma se integra en tu stack de aplicaciones, construyendo una API REST y una API GraphQL desde cero utilizando SQLite como base de datos.
Tabla de contenidos:
- Configuración de Prisma, modelado de datos y migraciones- Explorando Prisma Client para consultar la base de datos- Construyendo rutas de API REST con Express- Construyendo una API GraphQL con Apollo Server