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

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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 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.

3. Manejo de Estados de API en React

Short description:

Exploremos cómo manejar los estados de API en las aplicaciones React. El uso de indicadores booleanos para cada estado puede llevar a la duplicación de código y complejidad. Podemos mejorar esto utilizando estados de API e implementando un useApiStateUseHook. Los cuatro estados de API son Idle, Pending, Success y Error. Al abstraer los estados, podemos gestionar las solicitudes de API de manera más eficiente.

Bien, a continuación, veamos cómo podemos manejar los estados de API. Lo que he visto en muchas aplicaciones es básicamente el uso de indicadores booleanos. Por ejemplo, si quieres mostrar un spinner, tendrías un estado isLoadingState. Si quieres mostrar un error, si por ejemplo la solicitud falló, tendrías un indicador isError. Y veamos si queremos inicializar una solicitud más tarde. Por ejemplo, si un usuario hace clic en un botón, o si un usuario se desplaza hasta un cierto elemento, entonces también podemos tener un indicador isInitialized. Así que como puedes ver aquí, tenemos tres estados diferentes, y todos ellos se actualizan en consecuencia.

Sin embargo, el problema, y aquí como puedes ver, si se inicializó, mostraría un botón. Si está cargando, mostramos un mensaje de carga data, canDisplaySpinner. Si hubo un error, entonces hubo un problema. Y finalmente, si todo salió bien, estamos mostrando los data. Pero sí. Sin embargo, el problema es que para cada estado de API, necesitamos un nuevo hook de estado, ¿verdad? Porque tenemos inicializado, está cargando, es un error. Así que ya son tres estados. Eso es solo para una solicitud de API. Si necesitamos hacer dos solicitudes, podríamos necesitar tener seis estados. Si necesitamos hacer tres solicitudes, podríamos necesitar nueve, y así sucesivamente. Pero eso no es realmente genial.

Así que veamos cómo podemos mejorarlo utilizando estados de API en su lugar. Y también implementaremos un useApiStateUseHook para ayudarnos con eso. En primer lugar, tenemos cuatro estados de API diferentes. Idle, que significa que básicamente la solicitud aún no ha comenzado. Y tenemos pendiente, que significa que la solicitud se está realizando. Y luego también tenemos éxito y error. Así que obviamente, éxito es para cuando la solicitud se completó con éxito, y error si hubo un problema. También tenemos un array aquí, que básicamente solo exporta las constantes, ya que lo necesitaremos en un momento. Así que vayamos ahora a useApiStateUseHook. En primer lugar, necesitamos importar useState y useMemo. Y también obtenemos la constante idle, ya que es nuestro estado inicial para el hook. Y también obtenemos los estados predeterminados.

4. Gestión de Estados de API en React

Short description:

Podemos usar el useApiStateUseHook para gestionar los estados de API en React. Con este hook, podemos tener un solo estado que contenga todos los estados de API, como inactivo, pendiente, éxito y error. Podemos actualizar fácilmente el estado de la API utilizando el método setApiStatus. Al implementar un hook useAPI personalizado, podemos mejorar aún más la gestión de la API en React. Este hook acepta un método para ejecutar solicitudes de API y un objeto de configuración para establecer datos iniciales en el estado.

Y la razón por la que los necesitamos es porque queremos básicamente tomar todos nuestros estados y luego básicamente devolver un objeto con los estados, como si estuviera inactivo, pendiente, tuvo éxito, tuvo un error, como puedes ver en el lado derecho de la diapositiva. Y solo uno de ellos estará activo en un momento dado. Entonces, por ejemplo, al principio, solo isIdle se establecerá en verdadero.

Y ahora, aquí está nuestro useApiStateUseHook. Así que tenemos nuestro estado para ello. Así que en comparación con los indicadores booleanos, solo tenemos un estado que contiene todos los estados de la API. Y solo uno de ellos puede estar activo al mismo tiempo. Luego, tenemos el resultado de prepareStateUses. Como mencioné, es un objeto que tiene su estado inactivo, pendiente, y así sucesivamente. Y usamos useMemo aquí para que solo se vuelva a evaluar si el estado de la API cambia. Y luego, finalmente, devolvemos un objeto con apiStatus, el método setApiStatus, y todos los estados normalizados.

Ahora, veamos cómo podemos usarlo. Entonces, como puedes ver aquí, básicamente inicializamos el hook useApiStatus, y podemos pasar el estado inactivo allí, aunque es el estado predeterminado de todos modos. Si queremos comenzar con pendiente inmediatamente, puedes hacerlo. Y luego desestructuramos todos los estados, así como el método setApiStatus, que luego se usa para básicamente actualizar este estado de la API en consecuencia. Antes de que se inicie la solicitud, lo establecemos en pendiente. Si se completa con éxito, lo establecemos en éxito. Si hay un problema, lo establecemos en error. Y como puedes ver en el marcado, básicamente podemos agregar operadores ternarios, ¿verdad? Si está inactivo, entonces hacemos algo. Si está pendiente, entonces mostramos el spinner o el mensaje de carga. Si es un error, entonces un error, y así sucesivamente. Así que es mucho más limpio de esta manera. No necesitamos tener tantos indicadores booleanos. Y el code es mucho más limpio y conciso.

Entonces, ahora veamos cómo podemos mejorarlo aún más implementando un hook useAPI personalizado. Entonces, en primer lugar, importamos useState de nuevo, así como el hook useApiStatus que acabamos de cubrir, y tres estados de api. Entonces, pendiente, éxito y error. Luego, useAPI acepta dos parámetros. El primero es el método que ejecutará una solicitud de API, y el segundo es un objeto de configuración. Entonces, por ejemplo, en este ejemplo, podemos pasar data inicial dentro del objeto de configuración y establecerlo en el estado para los data.

5. Gestión de Estados y Solicitudes de API

Short description:

Dentro del hook useAPI, la función exec se encarga de establecer los estados de la API, actualizándolos en función del estado de la solicitud, y gestionando los estados de datos y errores. El hook useAPI devuelve un objeto con datos, estado de la API, error y método exec.

Además del estado data, también tenemos un estado para el error, y por supuesto inicializamos el hook useApiStatus. Ahora, a continuación, dentro del hook useAPI, tenemos la función exec. Entonces, como puedes ver, lo que hace es, se encarga básicamente de establecer los estados de la API y actualizarlos en consecuencia, dependiendo del estado de la solicitud. También se encarga de establecer los data después de que la solicitud se haya completado con éxito, y también se encargará de establecer el error si hubo un problema, y lo eliminará si se supone que una solicitud debe comenzar de nuevo. Y finalmente, el método exec devuelve un objeto con data y error si necesitamos manejarlos. Y por último, pero no menos importante, simplemente devolvemos todo desde el hook useAPI data, estado de la API error exec y así sucesivamente.

6. Uso del Hook de API y Cancelación de Solicitudes

Short description:

Para usar este hook, impórtalo y pasa el método que ejecuta la solicitud de API. El hook devuelve un objeto con los estados de la API, datos y un método exec. Dependiendo del estado, se devuelve el marcado apropiado. Para cancelar solicitudes con Axios y la capa de API, mejora la capa de API con lógica de aborto. El método con aborto acepta un método de Axios y devuelve una función. La función crea un método de cancelación y token, mejora el objeto de configuración y ejecuta la solicitud. Si hay un error, el método isCancel comprueba si la solicitud fue cancelada. Envuelve los métodos del envoltorio de API con aborto para completar la configuración. Por ejemplo, en una función de cuadro de búsqueda, se puede hacer una solicitud de API para autocompletar.

Y ahora, ¿cómo podemos usar este hook? Entonces, obviamente, necesitamos importarlo y luego simplemente pasar el método que se supone que ejecuta la solicitud de API. Entonces, en este caso, estamos pasando un método que simplemente devolverá el resultado de getUser, que obviamente proviene de la capa de API. Y desde el uso de API, recibimos un objeto del cual desestructuramos los estados normales, los data y el método exec. Y como puedes ver en el JSX, de nuevo, dependiendo del estado, simplemente devolvemos el marcado apropiado. Entonces, ya sabes, para cada estado inactivo, el botón para iniciar la búsqueda para gastar el spinner y así sucesivamente.

Bueno, ahora, ¿cómo podemos cancelar solicitudes al usar Axios con la capa de API? Entonces, en realidad, podemos mejorar la capa de API con lógica de aborto. Entonces, en el archivo base de API, agregaríamos el método con aborto que primero aceptaría la función. Entonces, esta función sería uno de los métodos de Axios, como Axios.get, Axios.put, post, y así sucesivamente. Luego, con aborto devuelve una función, que, básicamente, estos argumentos deberían ser los que se pasan al método de Axios. Entonces, por ejemplo, URL, cuerpo y configuración. Y lo que estamos haciendo allí es que necesitamos obtener acceso a la configuración original. Y la razón de ello es porque como parte de esta configuración, queremos pasar una propiedad de aborto, que debería tener una función como valor. Y lo que estamos haciendo aquí, si abort es una función de hecho, entonces creamos un nuevo método de cancelación y el token de cancelación usando el método de origen de Axios, y en el objeto de configuración, asignamos este token de cancelación, y, finalmente, ejecutamos el método de aborto y pasamos el cancelador allí. Y verás lo que hicimos en un momento. Y finalmente, después de mejorar el objeto de configuración, simplemente ejecutamos la solicitud. Reenviamos todos los parámetros además del último. La razón de ello es porque no queremos pasar la configuración original con la propiedad de aborto, sino que queremos pasar nuestro propio objeto de configuración mejorado que no tiene la propiedad de aborto pero podría tener un token de cancelación. Y ten en cuenta que es importante que usemos await aquí porque si hubo un error... Básicamente, sin await, este error no sería capturado en el contexto de con aborto. Y por eso necesitamos await aquí. Y luego finalmente, si hay un error, usamos el método isCancel de Axios para comprobar si la solicitud fue cancelada. Y si lo fue, básicamente establecemos una propiedad abortada en el objeto de error y simplemente lanzamos el error más adelante para que pueda ser manejado desde fuera. Entonces vamos... Bueno, una cosa más. También necesitamos envolver, por supuesto, nuestros métodos de envoltura de API con aborto. Entonces, como mencioné antes, primero pasamos los métodos de acceso y luego lo inicializamos de nuevo y reenviamos todos los parámetros.

Bueno, así es como podemos usarlo. Ahora, entonces, imagina básicamente una función como un cuadro de búsqueda. Por ejemplo, el usuario puede introducir alguna consulta y se hará una solicitud de API para buscar alguna información. Por ejemplo, para autocompletar.

7. Almacenando Canceladores y Manejando Errores

Short description:

Para almacenar el método cancelador entre re-renderizados, utilizamos ref. El operador de encadenamiento opcional asegura que el método cancelador se ejecute si existe. La propiedad abort en el objeto de configuración recibe el método cancelador como argumento y lo asigna al ref. La declaración catch verifica si el error fue abortado. Los detalles de implementación del cliente HTTP están abstraídos, y solo necesitamos proporcionar la propiedad abort.

Entonces tenemos dos estados, uno para los data que se obtendrán de la API y uno para la consulta que introduce el usuario. Y también tenemos el ref de búsqueda. Esa es una parte importante aquí. Porque lo que necesitamos es ser capaces de almacenar el método cancelador entre re-renderizados, ¿verdad? Por eso lo pondremos en el ref. Pero primero, echemos un vistazo a la función onQueryChange.

Entonces, ¿qué está pasando aquí? Bueno, obviamente estamos estableciendo el valor de entrada en la consulta, pero eso realmente no es la parte importante aquí. Pero aquí, antes de que se inicialice la solicitud, estamos intentando cancelar la anterior. Sin embargo, puede que no haya métodos canceladores cuando se inicializa onQueryChange por primera vez. Por eso usamos el operador de encadenamiento opcional. Básicamente, si hay un método cancelador, ejecútalo. Pero si no lo hay, entonces está bien. No nos importa, pero no queremos que el motor de JavaScript lance un error aquí, ¿verdad? Por eso usamos el operador de encadenamiento opcional. Y luego, como parte de aquí, la propiedad abort. Básicamente, como parte del objeto de configuración, pasamos esta propiedad abort que recibe una función. Y el método cancelador se pasa como primer argumento. Y luego podemos asignar este cancelador en el ref. Así que cuando se inicialice de nuevo onQueryChange, tendremos acceso a este cancelador. Y finalmente, en la declaración catch, básicamente comprobamos si el error fue abortado. Y lo fue. Y lo realmente genial de la forma en que está implementado es que básicamente los detalles de implementación del cliente HTTP, que se accede en este caso, no se filtraron en nuestro componente en absoluto. No tuvimos que importarlo en ningún lugar. Más bien, solo tenemos que proporcionar la propiedad abort. Y ahí es donde obtenemos el método cancelador. Lo establecemos en el ref, y voilà, está disponible para nosotros. Y podemos simplemente llamarlo.

8. Uso de la Capa API con React Query

Short description:

El uso de la capa API con React Query es simple. Importa el método API y el hook de React Query necesario, como useQuery. Pasa la clave de consulta y el método API, luego desestructura los datos requeridos, el método refetch y los estados. Renderiza el contenido basado en el estado.

Bueno, ahora veamos cómo podemos usar la capa API con React Query. Pero en realidad, es bastante simple, porque realmente lo único que necesitamos hacer es importar el método API de la capa API. También importamos el hook que necesitamos de React Query, como por ejemplo, useQuery en este caso. Y luego simplemente lo usamos. ¿Verdad? Pasamos la clave para la consulta, luego pasamos nuestra lista. Bueno, en este caso, lista usuarios. Así que el método API. Y simplemente desestructuramos lo que necesitamos. Así que, por ejemplo, en este caso, obtenemos data. Obtenemos el método refetch, que puede ser utilizado para inicializar la solicitud. Y también obtenemos nuestros estados normales. De nuevo, y esta parte es básicamente la misma que lo era con, digamos, con nuestro propio hook use API, ¿verdad? Y dependiendo del estado, renderizamos el contenido apropiado. ¿Y cómo podemos cancelar una solicitud al usar la capa API con React Query? Bueno, de nuevo, podemos básicamente pasar una propiedad abort. Sin embargo, esta vez, lo que estamos haciendo es que no estamos usando un ref, sino que tenemos una variable cancelar, y asignamos este método cancelar que fue pasado a través de la propiedad abort a esta variable cancelar. Porque lo cierto es que la forma en que React Query funciona es que espera una propiedad cancelar disponible en la promesa que se devuelve. Por eso necesitamos hacerlo de esta manera. Pero también es muy conciso y limpio. Y finalmente, si quieres cancelar la solicitud, sólo necesitamos llamar a cancel queries. Eso es todo por hoy. Aquí están los enlaces al repositorio de Github con ejemplos completos de code, diapositivas para esta charla, y sitios web donde puedes encontrarme. Además, tengo un regalo especial para todos los asistentes a la conferencia. React el Camino a Enterprise llega este diciembre. Es un libro avanzado con mejores prácticas, patrones y técnicas que cubre muchos conceptos variados como la arquitectura de proyectos escalables, la gestión de estados locales y globales, el manejo de API de pruebas, la optimización del rendimiento, SSG y SSI con Next.js, y más. Puedes obtener un 35% de descuento con el código REACTADVANCED. Bueno, espero que hayas disfrutado de esta charla ¡y feliz codificación!

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 ContentPremium
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.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 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.
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.
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
Top Content
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 Workshop
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 🤐)
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería 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 de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del 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 la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Aprende patrones de React ampliamente utilizados, incluyendo HOCs, Compound Components, Provider Patterns, Functions as Child, y Portals, para escribir código más limpio y eficiente y crear aplicaciones escalables y mantenibles.Visión general En esta masterclass, los espectadores aprenderán sobre patrones clave de React que pueden hacer su código más eficiente, legible y mantenible. Presentaremos cada patrón, explicaremos cómo funciona y demostraremos ejemplos prácticos. Al final de la sesión, los participantes tendrán una comprensión sólida de cómo usar estos patrones en sus proyectos.Objetivos de aprendizajeHOCs Compound Components Provider Patterns Functions as Child Portals Modularidad Mantenibilidad Aplicación en el mundo real.
Práctica con la Rejilla de Datos React de AG Grid
React Summit 2022React Summit 2022
147 min
Práctica con la Rejilla de Datos React de AG Grid
Top Content
Workshop
Sean Landsman
Sean Landsman
Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla 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 inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
Workshop
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
Workshop
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