Usando MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con React

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Slides
Rate this content

Esta charla ofrece una introducción sobre MediaPipe, que es una solución de aprendizaje automático de código abierto que permite ejecutar modelos de aprendizaje automático en dispositivos de baja potencia y ayuda a integrar los modelos con aplicaciones móviles. Proporciona a estos profesionales creativos muchas herramientas dinámicas y utiliza el aprendizaje automático de una manera realmente fácil para crear aplicaciones potentes e intuitivas sin tener mucho o ningún conocimiento previo de aprendizaje automático. Así que podemos ver cómo se puede integrar MediaPipe con React, brindando un acceso fácil para incluir casos de uso de aprendizaje automático en la construcción de aplicaciones web con React.

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

MediaPipe es un marco de código abierto multiplataforma que se utiliza para construir percepciones basadas en video y audio. Permite desarrollar aplicaciones de aprendizaje automático de extremo a extremo, desde la preparación de conjuntos de datos hasta la realización de inferencias de aprendizaje automático.

MediaPipe puede utilizar la CPU o la GPU del sistema para acelerar el rendimiento de los modelos de aprendizaje automático. Además, utiliza WebAssembly en el backend para aprovechar el hardware del sistema en plataformas que soporten JavaScript.

MediaPipe es compatible con múltiples plataformas incluyendo JavaScript, Android, iOS, y también puede ser desplegado en dispositivos como Raspberry Pi para aplicaciones de IoT o Edge.

Las aplicaciones que se benefician de MediaPipe incluyen detección de rostros, efectos de realidad aumentada, seguimiento de posturas humanas, y aplicaciones de fitness que utilizan cámaras para rastrear movimientos y contar repeticiones.

Para integrar MediaPipe con ReactJS, se utilizan paquetes NPM específicos de MediaPipe que se pueden incorporar directamente en el código de React. Esto permite capturar imágenes de la cámara y ejecutar inferencias sobre ellas utilizando los modelos proporcionados por MediaPipe.

MediaPipe ofrece soluciones de aprendizaje automático de extremo a extremo como la detección de objetos, seguimiento de objetos, y malla facial. Estas soluciones están disponibles en el sitio web de MediaPipe, MediaPipe.dev, y son completamente de código abierto.

Un gráfico de MediaPipe representa el proceso de percepción de extremo a extremo. Consiste en nodos que representan calculadores de MediaPipe, conectados por flujos que manejan los paquetes de datos. Estos gráficos permiten transformar inputs en inferencias útiles mediante la ejecución de la tubería de percepción.

Shivay Lamba
Shivay Lamba
20 min
05 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenido a una charla sobre el uso de MediaPipe para aplicaciones de aprendizaje automático multiplataforma con ReactJS. MediaPipe proporciona soluciones listas para usar para la detección de objetos, seguimiento, malla facial y más. Permite la transformación de video y la conversión de tensores, lo que permite la interpretación de imágenes de video de una forma legible para los humanos. MediaPipe utiliza gráficos y calculadoras para manejar el pipeline de percepción. Aprenda cómo usar los paquetes de MediaPipe en React y explore una demostración que muestra el modelo de manos para detectar puntos de referencia. Se puede escribir lógica personalizada para detectar puntos de referencia abiertos y cerrados, lo que lo hace útil para aplicaciones como el lenguaje de señas americano.

1. Introducción a MediaPipe

Short description:

Bienvenidos a mi charla en React Day Berlin 2022. Soy Shivaay y hablaré sobre cómo utilizar MediaPipe para aplicaciones de aprendizaje automático multiplataforma con ReactJS. MediaPipe es un marco de código abierto que permite la inferencia de aprendizaje automático de extremo a extremo y es especialmente útil para el análisis de video y audio. Proporciona aceleración utilizando el hardware del sistema y se puede utilizar en múltiples plataformas.

Bienvenidos a todos a mi charla en React Day Berlin 2022. Soy Shivaay y presentaré virtualmente sobre el tema de cómo utilizar MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con la ayuda de ReactJS. Soy un mentor de código de Google en MediaPipe y también lidero el grupo de trabajo de TensorFlow.js, y pueden conectarse conmigo en mi Twitter, how-to-develop. Y sin perder más tiempo, comencemos.

Hoy en día vemos muchas aplicaciones de aprendizaje automático en todas partes. Y esto es especialmente cierto para las aplicaciones web con la llegada de bibliotecas como TensorFlow.js, MediaPipe. Hay muchas de estas aplicaciones de pila completa que utilizan las capacidades de aprendizaje automático en sus aplicaciones web, y las estamos viendo también en producción con muchas startups e incluso empresas como LinkedIn, que están utilizando el aprendizaje automático para potenciar múltiples aplicaciones. Y eso se debe a que el aprendizaje automático es tan versátil que se puede utilizar para una variedad de aplicaciones diferentes. Y aquí hay algunas áreas comunes donde se utiliza el aprendizaje automático. Y especialmente una cosa que es común entre todas estas aplicaciones. Podemos ver en el lado izquierdo que algunas personas utilizan la detección de rostros en el iPhone XR. Puedes ver algunos puntos que pueden detectar tus manos. Luego puedes ver algunos efectos realmente geniales con la web y podemos ver algunas expresiones faciales. Y luego tienes la cámara Next que utiliza la cámara para poder detectar objetos. Luego tenemos OkGoogle o el asistente de Google e incluso cosas como Raspberry Pi, Coral, Edge TPUs. Así que todos ellos tienen una cosa en común y esa cosa común es que están siendo impulsados con la ayuda del aprendizaje automático y eso con la ayuda de MediaPipe.

Entonces, ¿qué es MediaPipe? MediaPipe es un marco de código abierto multiplataforma que se utiliza para construir percepciones y está dedicado al análisis basado en video y audio. Así que solo piensa en esto, en caso de que quieras construir una aplicación de aprendizaje automático de extremo a extremo, MediaPipe te permite preparar no solo tus conjuntos de datos, sino que también te permite pasar por toda la inferencia de aprendizaje automático. Eso significa que no solo obtendrás los objetos que se utilizarán para la detección, sino que también podrás obtener las visualizaciones y las salidas para un modelo en particular que estés ejecutando. Porque en un escenario típico de aprendizaje automático o en un algoritmo típico de aprendizaje automático, comenzarás tomando algunos datos de entrada y ejecutarás un modelo de aprendizaje automático sobre ellos y luego obtendrás alguna inferencia. Así que MetaPy permite un pipeline de extremo a extremo para poder hacer inferencia de aprendizaje automático. Y es especialmente útil para analizar video o audio. Y hoy veremos algunos ejemplos donde podrías usarlo para un audio en vivo, video en vivo o un escenario basado en cámara. Y, por supuesto, hay muchas características diferentes que vienen incluidas. Así que proporciona aceleración de extremo a extremo. Eso significa que MetaPy puede utilizar la CPU o GPU de tu sistema también. Y la tecnología subyacente, especialmente si la estás utilizando con JavaScript, es que utiliza WebAssembly en el backend. Y eso significa que con la ayuda de WebAssembly también puedes aprovechar el uso del hardware de tu sistema para acelerar y mejorar el rendimiento de los modelos de aprendizaje automático. Y una de las grandes cosas es que solo necesitas un pipeline de MediaPipe y un modelo de MediaPipe, y se puede utilizar en múltiples áreas porque MediaPipe es compatible con múltiples frameworks, incluyendo JavaScript, Android, iOS y otras plataformas, y también puedes implementarlo en plataformas como Raspberry Pi para aplicaciones de IoT o Edge. Y hay soluciones listas para usar.

2. Explorando las soluciones de MediaPipe

Short description:

Exploraremos las soluciones listas para usar de MediaPipe que cubren la detección de objetos, el seguimiento, la malla facial, el seguimiento de posturas humanas y más. Estas soluciones se utilizan en diversas aplicaciones, como el seguimiento de ejercicios virtuales y técnicas de lápiz labial basadas en realidad aumentada. MediaPipe proporciona tuberías de aprendizaje automático de extremo a extremo que se pueden integrar fácilmente en tus programas. Visita MediaPipe.dev para obtener más información y ejemplos de cómo se utiliza MediaPipe en JavaScript y otras plataformas.

Esto significa que exploraremos algunas de estas soluciones de MediaPipe en un momento. Y estas están completamente listas para usar. Solo tienes que importarlas dentro de tus funciones, dentro de tus programas.

Por ejemplo, si estás utilizando JavaScript, solo tienes que importar la función real y podrás usarla rápidamente y todas estas diferentes soluciones que exploraremos están completamente de código abierto. Así que si estás interesado en nivelar con ellas, también puedes consultar su código fuente y aplicarlo a tu propio caso de uso.

Y aquí hay algunas de las soluciones que están disponibles actualmente. Y cuando hablamos de soluciones, nos referimos esencialmente a tuberías de aprendizaje automático de extremo a extremo. Eso significa que desde la detección hasta la clasificación o la ejecución de tu inferencia, todo eso se maneja con la ayuda de estas tuberías de aprendizaje automático proporcionadas por MediaPipe. Así que tienes algunos modelos estándar que también verás en Python. Cosas como la detección de objetos, el seguimiento de objetos, pero también la capacidad de hacer cosas como la malla facial o el seguimiento de posturas humanas, todas estas se utilizan realmente en muchas startups que básicamente proporcionan la capacidad de hacer ejercicios de gimnasio o hacer tus ejercicios y realizar un seguimiento de ellos virtualmente solo con la ayuda de tu cámara web para hacer cosas como contar repeticiones o tener un fisioterapeuta virtual, por lo que se utilizan para eso.

Luego tenemos la detección facial, que es utilizada por empresas como L'Oreal para técnicas de lápiz labial basadas en realidad aumentada. Por lo tanto, muchas de estas soluciones ya se utilizan en producción. Y luego, por supuesto, hay más soluciones y puedes, por supuesto, consultarlas en el sitio web de MediaPipe. Se llama MediaPipe.dev. Así que puedes visitarlo y ver todas estas diferentes soluciones. Cosas como la solución de segmentación de selfies se ha utilizado en Google Meet para poner fondos virtuales. Estas son solo algunas de las soluciones que puedes usar directamente e incrustar en tu programa. Y, por supuesto, estas son algunos ejemplos que podemos compartir. Por lo tanto, puedes ver a la izquierda, uno que es muy similar al de LogL que puedes usar para lápiz labial basado en realidad aumentada. Luego puedes ver algunos avances de películas basados en realidad aumentada en YouTube. Puedes usar Google Lens, que es capaz de agregar objetos basados en realidad virtual o aumentada frente a ti utilizando la visión por computadora. Por lo tanto, estas son algunos ejemplos donde MediaPipe se utiliza no solo para aplicaciones deJavaScript, sino también para otras plataformas. Pero, por supuesto, también me gustaría explicar cómo se realiza esta inferencia en primer lugar. Para eso, echemos un vistazo a una percepción en vivo. Y para eso, tomaremos el ejemplo de un algoritmo de seguimiento de manos. La idea es que si usas una cámara web y colocas tu mano frente a la cámara, debería poder detectar algo que llamamos puntos de referencia. Básicamente, la idea es que tomarás la imagen o unvideo de tu mano y el modelo de aprendizaje automático, típicamente la tubería de MediaPipe, será capaz de obtener estos puntos de referencia específicos. Y estos puntos de referencia generalmente indican las diferentes articulaciones dentro de tu mano. Y podrás superponer los puntos de referencia sobre tu mano para que detecte tu mano y detecte la ubicación exacta de los puntos de referencia y los superponga. Eso es lo que estamos tratando de hacer con el significado de localizar los puntos de referencia de tu mano.

3. Transformación de video y conversión de tensores

Short description:

La idea es transformar la imagen de video en tensores, que son matrices matemáticas de n dimensiones utilizadas para el aprendizaje automático. Estos tensores se someten a transformaciones y se convierten en puntos de referencia que se superponen en la imagen capturada. Este proceso es la base de las soluciones de MediaPipe, que permiten la interpretación de imágenes de video de forma legible para los humanos.

Entonces, la idea es que primero tomarás tu video. Esto puede ser una grabación de una cámara web o una grabación de una cámara Nest, por ejemplo. Luego, lo que hacemos es transformar esta imagen a un tamaño que será utilizado por el modelo de aprendizaje automático. Supongamos que el tamaño original es de 1920 por 1080, por lo que se realizará una transformación donde redimensionamos la imagen y la ajustamos al tamaño esperado por el modelo de aprendizaje automático. Luego, convertimos la imagen que tenemos en nuestros tensores. Ahora, si estás familiarizado o no has oído hablar de los tensores, los tensores son como los bloques de construcción del aprendizaje profundo o de TensorFlow. Si has escuchado antes la palabra TensorFlow o no, es algo así como grandes matrices numéricas y lo que estamos haciendo es convertir nuestra imagen en estas grandes matrices matemáticas de n dimensiones. Estas matrices luego se someterán a algunas transformaciones para ser utilizadas en nuestra propiedad de aprendizaje automático. Una vez que se han convertido en tensores, ejecutaremos la inferencia de aprendizaje automático sobre estos tensores, lo que, por supuesto, realizará algunos cambios dentro de los tensores y luego lo que haremos es básicamente convertir estos tensores en los puntos de referencia que ves en el lado derecho y luego renderizaremos estos puntos de referencia en la imagen que ha capturado tu mano y una vez que obtengas eso, finalmente obtendrás una salida de video donde verás algo así, donde los puntos de referencia se han superpuesto en la mano. Este será un tipo similar de tuberías de percepción para diferentes soluciones, soluciones de MediaPipe que uses, pero la idea típica de utilizar tu grabación de video, capturar la entrada y convertirla en tensores matemáticos y ejecutar la inferencia sobre ellos, realizar algunos cambios en estos tensores y finalmente obtenerlo de nuevo para que sea comprensible de forma legible para los humanos es lo que se utiliza con la ayuda de MediaPipe.

4. Gráficos y Calculadoras de MediaPipe

Short description:

En las soluciones de MediaPipe, hay nodos y aristas que forman un gráfico que representa la tubería de percepción. Cada nodo representa un calculador de MediaPipe conectado por flujos. Estos calculadores manejan el flujo de paquetes y realizan los cálculos necesarios. Los nodos de entrada y salida manejan los paquetes entrantes y salientes. Para obtener más visualizaciones, visita wiz.mediapipe.dev.

Ahora vamos a hablar un poco más sobre el uso de gráficos y calculadoras. Básicamente, cuando hablamos de cualquier solución de MediaPipe, hay principalmente dos puntos de conversación o dos puntos diferentes a considerar. El primero es un gráfico de MediaPipe y eso denota todo el proceso de percepción de extremo a extremo que acabamos de mencionar o mostrar en los ejemplos de detección de manos y, dentro de este gráfico, si, si conoces cómo funcionan los gráficos en las estructuras de datos, hay aristas y nodos.

En el caso de un gráfico de MediaPipe, cada nodo representa un calculador de MediaPipe único y, de manera similar a cómo los nodos están conectados en el caso de MediaPipe, estos dos nodos estarán conectados por algo llamado un flujo. Y estos nodos básicamente aceptan nuevos inputs o paquetes que contienen la información sobre la tubería que estamos ejecutando. Y nuevamente, todos estos calculadores están escritos en C++.

Entonces, cada vez que estés realizando cualquier tipo de inferencia o ejecutando la tubería de percepción real, todo eso se maneja con la ayuda del flujo de los paquetes dentro de estos nodos. Y los cálculos se realizan con la ayuda de los calculadores de MediaPipe que están presentes en estos nodos. Y tendrás tanto tus nodos de entrada como tus nodos de salida. Los puertos de entrada se encargarán de los paquetes entrantes y los nodos de salida se encargarán de los paquetes resultantes salientes que verás como la salida. Y nuevamente, si estás más interesado en ver diferentes tipos de visualizaciones, puedes echar un vistazo a wiz.mediapipe.dev para ver las tuberías de percepción para diferentes tipos de soluciones de MediaPipe. Definitivamente recomendaría echar un vistazo si estás interesado en saber qué está sucediendo detrás de escena. Nuevamente, no es necesario si vienes de un fondo de JavaScript, puedes usar directamente la solución. Pero en caso de que quieras, si estás interesado, definitivamente puedes echar un vistazo.

5. Uso de paquetes de MediaPipe en React

Short description:

Aprende cómo usar los paquetes de MediaPipe dentro de React importando los paquetes NPM específicos para el módulo o solución deseada. Además, instala otros paquetes NPM necesarios, como camera utils, para capturar imágenes de la cámara. Utiliza la webcam, la referencia y el lienzo para ejecutar el modelo y realizar inferencias en las imágenes de la webcam. Explora una demostración que muestra el modelo de manos, el cual detecta puntos de referencia de la mano y los superpone. Importa la solución de manos de MetaPipe y configura los puntos de referencia y obtén la cámara en el archivo index.ts.

Bien. Ahora, por supuesto, pasemos a la parte más importante, y eso es cómo usar estos paquetes de MediaPipe dentro de React. Hay varios paquetes de MediaPipe junto con sus paquetes NPM que puedes incorporar directamente en tu código de React. Algunos de los más comunes se muestran aquí en la pantalla que puedes ver, incluyendo face mesh, face detection, hands, holistic, object drawn pose.

Entonces, nuevamente, se pueden utilizar para una multitud de aplicaciones diferentes. Y en caso de que estés interesado, puedes consultar los ejemplos específicos que proporciona el equipo de MediaPipe en mediapipe.dev/demo con la demo que desees. Si deseas integrarlo con el código de React JS, esto es muy simple. Dado que tenemos los paquetes NPM, lo primero que harás es importar los paquetes específicos de NPM para el módulo o solución específica que deseas usar. Y además de eso, habrá varios otros paquetes NPM que tendrás que instalar. Uno de ellos es camera utils. Nuevamente, encontrarás la documentación para esto en el sitio web de MediaPipe en JavaScript y se utilizan para capturar imágenes de tu cámara y luego utilizar los fotogramas para ejecutar las inferencias. En la mitad inferior, estamos utilizando el modelo de segmentación de selfies.

Entonces puedes ver que primero utilizamos la webcam, la referencia y el lienzo. Primero ejecutamos nuestro modelo y es capaz de localizar el archivo donde hemos utilizado el modelo de aprendizaje automático real. Luego tomará las imágenes de tu webcam, capturará la entrada y ejecutará la inferencia sobre ella y la representará en el lienzo. Así de simple es el código y puedes ver que en solo 10-29 líneas de código puedes crear una solución de aprendizaje automático de extremo a extremo.

Y por supuesto, ahora vamos a ver una demostración que he creado. Básicamente, la demostración es prácticamente la percepción de manos que hemos creado. Aquí tengo, digamos, levanto mi mano y puedes ver que dice que está abierta. Y si la cierro, puedes ver que cambia la etiqueta a cerrada. Así que veamos cómo funciona esto realmente. Correcto. El modelo que vamos a ver es básicamente el modelo de manos que, como mostramos en la tubería de percepción, es capaz de detectar los puntos de referencia de tu mano y luego los superpone. Y aquí tengo mi código que estoy ejecutando en un espacio de código de github. El más importante que vamos a ver es el archivo index.ts. Aquí es donde verás que hemos importado la solución de manos de MetaPipe. Y aquí tengo dos objetos diferentes que estoy usando. Uno es la mano en sí y la conexión de la mano. Estos son básicamente todos los puntos o puntos de referencia diferentes que tenemos. Muy similar al ejemplo que mostramos en las diapositivas reales. Primero tomamos algunas constantes importantes, que son principalmente la configuración de nuestros puntos de referencia y la obtención de nuestra cámara, el elemento video. Y por supuesto, lo primero que hacemos es que, dado que va a detectar manos, simplemente ejecutamos esto en nuestro lienzo.

6. Renderización de puntos de referencia y conclusión

Short description:

En la demostración, renderizamos puntos de referencia en un lienzo, procesamos las imágenes y dibujamos la imagen encima. Se carga el modelo de manos, se inicializa la cámara y se renderizan los resultados, conectando y superponiendo los puntos de referencia. Se puede escribir lógica personalizada para detectar puntos de referencia abiertos y cerrados. La demostración de manos se puede utilizar para diversas aplicaciones, incluyendo el lenguaje de señas americano. Visita MediaPipe en JavaScript para obtener más información y ejemplos.

Así que dentro de la demostración estamos renderizando todo esto encima de un elemento de lienzo. Básicamente, renderizamos nuestros puntos de referencia para ver cuántos puntos de referencia obtenemos dentro de nuestro lienzo. Y luego lo que hacemos es dibujar la imagen real encima de nuestro lienzo. Y aquí es donde principalmente procesamos nuestras imágenes reales.

Si observas desde las líneas de código 36 a 48, aquí es donde cuando traes tu imagen y en este caso, como en la grabación de la cámara web cerca de tu cámara web, entonces será capaz de obtener los puntos de referencia y encontrar las coordenadas para cada uno de estos puntos de referencia ya que es una imagen 2D. Obtendrá las coordenadas X e Y de cada punto de referencia y las almacenará en un array. Y luego lo que hacemos es dibujar un rectángulo. Como puedes ver, cuando levanto mi mano dentro de la demostración, en realidad se encargará de renderizar estos puntos de referencia obteniendo las coordenadas X e Y de cada punto de referencia que encuentra y los renderizará encima de la imagen real que se está representando en el lienzo.

Y aquí es donde básicamente cargamos el modelo real, y ese es el modelo de manos. Y aquí es donde inicializamos nuestra cámara. Así que cuando ejecutamos la demostración, aquí es donde inicializamos nuestra cámara y luego tenemos un par de funciones que ejecutamos, incluyendo la carga del modelo de manos. Y finalmente, lo que estamos viendo es que estamos renderizando los resultados utilizando la función asíncrona en los resultados, que básicamente captura tu grabación. Y básicamente se encarga de renderizar los puntos de referencia y conectarlos, asegurándose de que se ajusten o se superpongan encima de tu grabación. De esta manera, lo que puedes hacer es, por supuesto, este es un ejemplo para poder ejecutar la demostración de manos. Y, por supuesto, la lógica separada que se ha añadido a esto es poder detectar cuando los puntos de referencia están cerrados o abiertos.

Pero en este caso, cuando los puntos de referencia se superponen entre sí, podemos ver que estoy imprimiendo la etiqueta como cerrado. Así que dependiendo de la necesidad, o dependiendo de cómo quieras utilizar este modelo en particular, puedes escribir tu lógica personalizada en JavaScript para ver si, por ejemplo, digamos que estás, porque cada uno de estos diferentes puntos de referencia tiene sus coordenadas únicas. Así que podrías hacer mucho más con esto específicamente, por ejemplo, si quisieras crear algo como un lenguaje de señas americano, podrías entrenar tu modelo de tal manera que, dependiendo de los puntos de referencia o las posiciones de tus puntos de referencia, y la forma en que están orientados, podrías crear una demostración completa de lenguaje de señas americano de principio a fin con la ayuda de la demostración de manos o el modelo de segmentación de manos. Así que eso, por supuesto, depende totalmente de ti en términos de cómo quieras hacerlo.

Entonces, por supuesto, en este caso, la lógica que utilizo es que cuando todos los puntos de referencia no se superponen entre sí, simplemente se imprime como abierto.

Entonces, básicamente, volviendo a nuestra pantalla. Esta es básicamente la demostración rápida que quiero mostrar. Con eso, concluyo mi charla. Y, por supuesto, en caso de que tengas alguna pregunta sobre cómo comenzar con MediaPipe en JavaScript, definitivamente puedes comunicarte conmigo y te recomendaré que consultes MediaPipe en JavaScript, donde encontrarás una lista de todas las diferentes soluciones y sus respectivos módulos NPM. Y, por supuesto, verás algunos ejemplos de trabajo que ya están disponibles. Con eso, concluyo y muchas gracias. Y espero verte en persona el próximo año en React Dev Berlin. Muchas gracias.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
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.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

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 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.