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

Rate this content
Bookmark
Slides

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.

20 min
05 Dec, 2022

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.

Available in English

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

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

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn