(Más fácil) Visualización interactiva de datos en React

Rate this content
Bookmark

Si estás construyendo un panel de control, una plataforma de análisis o cualquier aplicación web en la que necesites brindar a tus usuarios información sobre sus datos, necesitas visualizaciones de datos hermosas, personalizadas e interactivas en tu aplicación de React. Pero construir visualizaciones desde cero con una biblioteca de bajo nivel como D3 puede ser un dolor de cabeza, implicando mucha reinvención de la rueda. En esta charla, veremos cómo el desarrollo de visualizaciones de datos puede ser mucho más fácil gracias a herramientas como Plot, una biblioteca de visualización de datos de alto nivel para gráficos rápidos y fáciles, y Observable, un entorno de prototipado de visualización de datos reactivos, ambos creados por el creador de D3. A través de ejemplos de codificación en vivo, exploraremos cómo los refs de React nos permiten delegar la manipulación del DOM para nuestras visualizaciones de datos, y cómo la funcionalidad de incrustación de Observable nos permite reutilizar fácilmente visualizaciones creadas por la comunidad para nuestros propios datos y casos de uso. ¡Al final de esta charla sabremos cómo obtener una visualización de datos hermosa, personalizada e interactiva en nuestras aplicaciones con una fracción del tiempo y esfuerzo!

27 min
22 Oct, 2021

Video Summary and Transcription

Esta charla trata sobre la visualización interactiva de datos en React utilizando la biblioteca Plot. Plot es una biblioteca de alto nivel que simplifica el proceso de visualización de datos al proporcionar conceptos clave y valores predeterminados para decisiones de diseño. Se puede integrar con React utilizando hooks como useRef y useEffect. Plot permite la personalización y admite funciones como ordenar y agregar marcas adicionales. La charla también aborda preocupaciones de accesibilidad, soporte SSR y compara Plot con otras bibliotecas como D3 y Vega-Lite.

Available in English

1. Introducción a la visualización interactiva de datos en React

Short description:

¡Hola, gente! ¿Cómo va todo? Soy Anjana Vakil, una defensora del desarrollo en Observable. Hoy hablaré sobre la visualización interactiva de datos en React. La visualización de datos puede ayudar a descubrir significado, patrones e ideas. La visualización de datos es valiosa para aplicaciones web, paneles de control y conocimientos del usuario. Es un campo amplio, pero podemos construir visualizaciones efectivas sin aprenderlo todo. Exploraremos cómo crear una aplicación de visualización de datos reactiva en React utilizando Observable plot.

¡Hola, gente! ¿Cómo va todo? Es genial ver sus caras. Es genial verlos a todos aquí. ¡Dios mío! ¡Hola! Soy Anjana Vakil, una defensora del desarrollo en Observable y estoy muy feliz de estar aquí con todos ustedes, ya sea en persona o en la transmisión en vivo.

¿Qué tal, todos? Estoy realmente emocionada de hablar con todos hoy sobre la visualización de datos interactiva en React. Las diapositivas de esta presentación y todos los enlaces y todo están en esa URL en observableHQ.com y también trataré de tuitearlo después de la charla.

Así que soy relativamente nueva en el mundo de la visualización de datos como desarrolladora de software, como desarrolladora de JavaScript yo misma, pero aquí hay algunas cosas que he estado aprendiendo sobre la visualización de datos. Una cosa es que cuando tienes un montón de datos, visualizarlos, ponerlos frente a los ojos de las personas de manera efectiva puede ser la forma más increíble de descubrir rápidamente el significado real de esos datos, ver patrones en ellos, obtener ideas reales y poder tomar decisiones basadas en ellos. Eso significa que la visualización de datos es un componente extremadamente útil en muchos tipos diferentes de aplicaciones web.

Entonces, por supuesto, cualquier tipo de panel de control que estés construyendo probablemente va a tener una visualización de datos involucrada. Cada vez que intentas brindar a tus usuarios información sobre sus propios datos en tus plataformas. Levanta la mano si tuviste que construir algún tipo de visualización de datos en alguna de tus aplicaciones. Muchas manos. Y estoy segura de que también hay muchas manos en el ciberespacio. Esto significa que también es una habilidad muy valiosa para tener en tu currículum o como parte de tu portafolio de desarrollador. Algo que vale la pena aprender un poco. Sin embargo, la visualización de datos es un campo muy amplio. Es algo en lo que podrías pasar toda tu vida y carrera investigando y obteniendo un doctorado, escribiendo una tesis y convirtiéndote en un experto y nunca llegar al fondo. ¿Significa eso que para construir visualizaciones efectivas en mis aplicaciones, tengo que, además de todo lo relacionado con la web, React y JavaScript que necesito saber, también aprender sobre análisis estadístico, teoría del color y percepción visual humana, y todas estas cosas diferentes? Eso suena realmente abrumador y difícil. ¿Cómo puedo construir una buena visualización sin tener que dedicar mi vida a aprender todo lo que hay que saber sobre la visualización de datos?

Puede parecer muy desalentador, puede parecer muy difícil. Lo que esperamos explorar hoy en el poco tiempo que tenemos juntos es cómo podemos crear una aplicación de visualización de datos reactiva e interactiva no trivial en React sin tener que aprender todo lo que hay que saber sobre la visualización de datos. ¿Cómo puedo pararme sobre los hombros de gigantes y poner en marcha esta visualización de datos lo más rápido posible? Lo que tenemos aquí y esto es lo que vamos a construir hoy si los dioses de la demostración están con nosotros es una visualización simple de la frecuencia de diferentes letras en el idioma inglés y es algo que puedo ordenar de la manera que quiera verlo. Así que puedo ordenarlos por frecuencia descendente y ver que la E es la letra más frecuente. Esto es lo que vamos a intentar construir y espero ver cómo no necesitamos reinventar la rueda para hacerlo. La herramienta que vamos a utilizar para este trabajo es una biblioteca de visualización de datos de código abierto relativamente nueva llamada Observable plot.

2. Introducción a la biblioteca Plot

Short description:

Plot es una biblioteca de alto nivel creada por la misma persona que creó D3. Te permite crear visualizaciones significativas y personalizables de forma rápida. Plot utiliza una gramática de gráficos, una forma de describir y sistematizar la creación de gráficos. Proporciona conceptos clave como marcas, escalas, transformaciones y facetas para crear gráficos potentes y complejos. Los valores predeterminados de la biblioteca toman decisiones de diseño por ti, simplificando el proceso de visualización de datos.

Entonces, Plot, al igual que Observable, fue creado por la misma persona que creó la biblioteca D3 si algunas personas han oído hablar de eso o lo han encontrado, veo algunas cabezas asintiendo. Así que Mike Bostock, quien también es CTO en Observable y algunos de nuestros otros compañeros de equipo en Observable crearon esta increíble biblioteca de visualización de datos que se lanzó como código abierto a principios de este año.

Y Plot es una biblioteca de muy alto nivel. Te permite crear rápidamente un gráfico significativo y personalizable mientras al mismo tiempo te brinda la flexibilidad para personalizar y construir exactamente el tipo de visualización correcto que necesitas para tus propósitos, en lugar de elegir uno de un conjunto limitado de opciones predefinidas.

La forma en que logra esto es gracias a una API muy simple pero a la vez muy poderosa que se basa en el concepto de algo llamado gramática de gráficos. Esta es una forma de pensar en cómo describir y sistematizar cómo podemos crear un gráfico, prácticamente cualquier tipo de gráfico que podamos imaginar, a partir de unos pocos conceptos básicos.

Esto es algo que ha existido en el mundo de la visualización de datos durante mucho tiempo, por lo que tenemos expertos y décadas de investigación en visualización de datos integrados en esta gramática de gráficos. Y luego, Plot mismo emplea esta gramática de gráficos, pero la implementa sobre D3. Por lo tanto, también tenemos la experiencia de Mike y el resto del equipo de D3, que tienen décadas de experiencia en la creación de visualizaciones basadas en SVG para la web, todo integrado en esta biblioteca.

Esencialmente, es como tener un pequeño amigo experto en visualización de datos en tu bolsillo que puede ayudarte a determinar el mejor gráfico para construir. Y la forma en que lo hace es mediante unos pocos conceptos clave. No vamos a entrar en detalle en todos ellos. Puedes leer todo al respecto. Pero hay cosas como marcas, que son los elementos visuales que vemos en la página. Esto podría ser una barra. Podría ser una línea. Podrían ser puntos en un gráfico de dispersión. Hay escalas, que son básicamente funciones que transforman los valores que tengo en mi conjunto de datos, es decir, en mi espacio de datos, en valores en la representación visual real.

Por ejemplo, esto podría tomar esos números de frecuencia y convertirlos en píxeles para determinar la altura de la barra en la pantalla. Hay un par de características sobre las que no vamos a hablar mucho, pero que son muy útiles para crear visualizaciones más personalizadas, como transformaciones, para realizar agregaciones como suma, promedio, y facetas, que te permiten dividir una visualización de datos en subvisualizaciones más pequeñas que se centran en un subconjunto de los datos.

Con estos pocos conceptos, que no llevan mucho tiempo entender, puedes crear gráficos realmente potentes y complejos que se adapten perfectamente a tus necesidades. Pero al mismo tiempo, puedes permitir que los valores predeterminados incorporados en Plot tomen muchas de las decisiones por ti, para que no necesites aprender todo lo que hay que saber sobre cómo colocar perfectamente las cosas en la pantalla.

Entonces, veamos cómo se siente realmente escribir algo de Plot. Espero que todos puedan leer esto bien desde atrás. Lo tomaré como un sí. De acuerdo. Lo que tengo aquí es algo de datos sobre estas letras y su frecuencia relativa. Tengo una matriz de objetos de datos pequeños, datos, que tienen una letra y una propiedad de frecuencia. Para crear un Plot, simplemente llamamos al método Plot en este objeto Plot con mayúscula P, lo cual creará un SVG. Y este SVG es muy aburrido.

3. Visualización de datos con Plot

Short description:

Vamos a visualizar algunos datos utilizando el método de barras Y de Plot. Mapea automáticamente las propiedades de los datos al SVG. Plot toma decisiones informadas sobre el diseño, las etiquetas y las marcas. Es posible personalizarlo, como ordenar y revertir el orden. Se pueden agregar marcas adicionales para mayor flexibilidad.

Es solo un SVG en blanco que no hace nada. Así que arreglemos eso. Vamos a visualizar algunos datos aquí.

Mencioné brevemente que Plot tiene una noción de marcas, los elementos visuales que vemos en la página. Aquí quiero hacer un gráfico de barras. Puedo hacerlo llamando al método de barras Y en Plot, que es porque vamos a estar haciendo estas barras verticales. También hay una barra X para horizontal. Eso va a tomar los data que quiero visualizar, en este caso mi pequeño data array. Y luego voy a pasar un objeto que le dice a Plot cómo mapear las propiedades de los data a las propiedades del SVG real en la pantalla. En este caso, le diremos, hey, toma el eje X y usa eso para mostrar la propiedad de letra en mis data. Y luego en el eje Y, quiero que pongas la propiedad de frecuencia.

Y una vez que evalúo eso, boom, ya tengo un gráfico significativo. Y Plot hizo mucho trabajo pesado aquí que de otra manera habría tenido que pensar y construir yo mismo. Por ejemplo, descubrir cómo colocar todo en ambos ejes, descubrir cómo será la barra más alta en mi visualización y configurar el eje Y adecuadamente, agregar etiquetas, agregar las marcas en los lugares correctos, etc., etc. Plot está tomando muchas decisiones realmente informadas por mí detrás de escena. Y sin embargo, puedo personalizarlo como quiera.

Por ejemplo, de forma predeterminada, simplemente coloca todas estas letras en el orden en que aparecieron, en este caso, en orden alfabético. Pero si quiero cambiar eso, en mi marca de barras Y, puedo pasar una propiedad de ordenamiento y decir, hey, Plot, ordena las cosas en el eje X por su valor en el eje Y. Boom. Lo hace por mí. No tengo que preocuparme por los valores en los data. Plot lo descubrirá por mí. Y de la misma manera, si digo que en realidad quiero verlo en el otro orden, el orden descendente, solo puedo agregar un reverse true. Y ahí lo tenemos.

Así que ya estamos comenzando a tener un gráfico no muy trivial aquí construido a partir de, nuevamente, una API súper declarativa. Y hay otras configuraciones que puedo poner en el propio gráfico. Por ejemplo, si quiero agregar una cuadrícula en el eje Y, puedo hacerlo para que sea un poco más fácil ver los valores de esas barras a lo largo de la dimensión horizontal. Y puedo combinar diferentes tipos de marcas. Aquí es donde, nuevamente, no estamos limitados por un conjunto determinado de visualizaciones predefinidas. Puedo agregar marcas adicionales.

4. Creando un Gráfico Significativo

Short description:

Imagina que todas las letras en inglés se usaran por igual. Al agregar una línea recta en un valor específico en el eje Y, podemos comparar la frecuencia de diferentes letras con esa frecuencia uniforme. Con solo unas pocas líneas de código, podemos crear un gráfico significativo y personalizarlo según sea necesario.

Tal vez quiero mostrar, okay, imagina que todas las letras en inglés se usaran exactamente la misma cantidad. ¿Cuál sería esa frecuencia? Así que pongamos una regla, una línea recta, en un valor específico en el eje Y para que vaya recta a través y podamos comparar qué tan frecuentes o infrecuentes son diferentes letras en comparación con esa frecuencia uniforme. Así que puedo llamar al método de regla Y aquí. En este caso, voy a pasar solo un valor, que sería lo que esperaría que fuera esa frecuencia si todas las letras fueran iguales, que es uno dividido por el número de letras que tengo. En este caso, son 26. Y si recuerdo una coma aquí, Plot dibujará esa línea por mí. Y, por supuesto, en este momento no es el gráfico más emocionante visualmente. No tenemos ningún color, pero también puedo cambiar eso agregando opciones de configuración que se basan en gran medida en propiedades que podríamos estar familiarizados con los SVG. Así que puedo establecer, por ejemplo, el color del trazo en naranja. O tal vez quiero que sea un poco más ancho, así que estableceré un ancho de trazo de tres. Ahora puedo ver que, oh, la L está aproximadamente en equilibrio, y la C es mucho menos frecuente de lo normal, y la E está muy lejos, un valor atípico enorme. Así que ahora tenemos un ejemplo trivial, estas frecuencias de letras, a menos que seas un lingüista de formación, como yo, en cuyo caso es muy emocionante. Pero podemos ver que, con solo unas pocas líneas de código y probablemente más minutos de los que debería haber tomado porque he estado hablando, pero en solo unos minutos y unas pocas líneas de código, tenemos un gráfico significativo, y aún así no es algo predeterminado que tuve que aceptar. Puedo configurarlo como desee.

5. Integrando Plot con React

Short description:

Al usar Plot, podemos crear un SVG con barras, marcas y líneas sin codificarlos manualmente en nuestra aplicación de React. Plot manipula el elemento SVG y renderiza el gráfico utilizando hooks como useRef y useEffect. Estos hooks permiten que React delegue la manipulación del DOM a Plot y maneje la renderización y las actualizaciones.

De acuerdo. A estas alturas, probablemente estés pensando, bien, pensé que estábamos en una React conferencia ¿Dónde está el React? ¿Cómo hacemos esto con React? Entonces, lo que hace Plot, como dijimos, es crear un SVG con todas estas barras, marcas y líneas, y así sucesivamente. No quiero tener que codificar eso manualmente en mi aplicación de React. Así que lo que voy a hacer es permitir que Plot manipule su pequeño elemento SVG y lo llene con todo el contenido del gráfico que quiere dibujar. Y para permitir que React delegue esa manipulación del DOM a Plot, vamos a utilizar un par de hooks útiles. useRef, que nos permitirá conectarnos a un nodo del DOM en el que Plot pueda hacer su trabajo. Y useEffect, donde realmente permitiremos que Plot renderice ese SVG y cualquier actualización cuando cambie el estado. Luego, por supuesto, debemos recordar limpiar después de nosotros mismos.

6. Conectando Plot a la Aplicación

Short description:

Importemos Observable Plot a nuestro proyecto y creemos un componente llamado LetterVis para mostrar un div vacío. Pasaremos los datos como una prop y conectaremos Plot al div usando useRef. Finalmente, usaremos useEffect para renderizar el gráfico de barras.

De acuerdo. Entonces, si los dioses de la demo están con nosotros, vamos a ir al código sandbox y tratar de crear una aplicación de gráficos muy rápido. Lo que tengo aquí, y, nuevamente, espero que la gente pueda ver en la parte de atrás, lo que tengo aquí es una aplicación de React básica. Lo único que he hecho es cambiar el título y tengo algunas cosas listas para importar solo para ayudarnos aquí.

Lo primero que quiero hacer es agregar Observable Plot a mi proyecto como una dependencia para poder agregarlo como Observable HQ/Plot. Oh, gracias, Code Sandbox, por hacerlo tan fácil. Increíble. OK, ahora tenemos, ahora podemos importar esta P mayúscula Plot de Observable HQ Plot. OK, algunas otras cosas que tengo aquí, tengo mis datos. Los mismos datos de letras que acabamos de ver, y más adelante vamos a agregar un pequeño menú desplegable para explorar esa Reactividad. Así que voy a incluir mis datos aquí también. Ahora dijimos que queremos permitir que Plot haga su propia cosa en un div en nuestra aplicación. Así que voy a empezar a crear un componente aquí. Podemos llamarlo, no sé, lo llamaremos LetterVis por ahora. Va a ser lo más aburrido del mundo, va a devolver un div vacío. OK, todavía no es emocionante. Y luego podremos insertar esto en nuestra aplicación aquí. Y probablemente vamos a querer visualizar algunos datos, así que ¿por qué no paso esos datos como una prop aquí, y puedo pasarlos aquí. Ahora mismo solo estamos cargando estos datos de letras codificados en el archivo, pero probablemente estarías obteniendo tus datos de donde sea, tu API, lo que sea, no vamos a cubrir esa parte.

OK, ahora necesito conectar plot a este div aquí. Y para eso, entra en juego nuestro amigo useRef. Así que voy a tomar useRef, y también vamos a usar un par de otros hooks, useEffect y más adelante useState. Y vamos a crear una nueva referencia donde plot pueda hacer su trabajo. Puedo llamar a esto plotRef y simplemente llamar a useRef. Esto solo comenzará como un pequeño objeto que tiene una propiedad actual, que se establecerá inicialmente en null, pero si lo conecto a este div, plotRef aquí, ahora cuando React renderice este div, plotRef.current será el nodo real, este nodo div en el DOM, con el que luego puedo decirle a plot que haga su trabajo. Dentro de useEffect es donde voy a hacer que eso suceda. Así que vamos a empezar con nuestro useEffect aquí. Oops. Y lo que vamos a hacer es tomar nuestro gráfico de barras de aquí. ¡Doop doop da do!

7. Creando el Gráfico de Barras y Limpiando

Short description:

Doop doop da do. El gráfico de barras será este plot.plot. Para capturar el elemento SVG e incluir datos, agrega los datos a las dependencias de useEffect. Deja que plot haga su trabajo al renderizar el div y luego usa plot bar chart para mostrar el gráfico. Limpia después de usar useRef devolviendo una función de devolución de llamada que elimina el gráfico de barras del DOM. Agrega márgenes para mejorar el diseño y hacer el gráfico más legible.

Control C. Doop doop da do. El gráfico de barras será este plot.plot.

Bien, exactamente lo que hice antes, ahora vamos a capturar ese elemento SVG y, oh sí, aquí está involucrado data. Así que voy a agregar data a las dependencias de este useEffect aquí. Muy bien, ahora no hay nada en la pantalla porque aún no he dejado que plot haga su trabajo, así que vamos a hacer que eso suceda. Como dijimos antes, una vez que React ha renderizado el div y eso es después de eso es cuando este useEffect se ejecutará, voy a tener una referencia a plot ref.current que será ese div. Lo que puedo hacer es colocar plot bar chart justo dentro de eso. Ahora, estamos obteniendo algunas cosas en la pantalla, excepto que hay demasiadas cosas. Uh-oh, porque no estoy limpiando después de mí mismo. Este es el problema. Si estoy usando useRef, estoy, para citar a Rachel de ayer, escapando, usando la salida de emergencia de React. No obtengo todas las cosas agradables que React normalmente hace por mí, como limpiar después de mí como si fuera mi criada. En cambio, tengo que limpiar después de mí mismo. Oh, no, ¡ay de mí! Eso no es tan malo, aunque, porque puedo devolver una función de devolución de llamada, que esencialmente hace lo contrario de esta operación de append. Podemos tomar nuestro gráfico de barras y eliminarlo del DOM. Este es el compromiso, si quiero que plot haga el trabajo pesado de armar todo este gráfico por mí para que no tenga que codificar a mano pequeños elementos rect y lo que sea dentro de un SVG, esto es todo lo que tengo que hacer. Tengo que usar useRef. Pero recuerda que, dado que estoy escapando de React, también tengo que limpiar después de mí mismo y ser un buen vecino. Muy bien. Ahora, si actualizo mi aplicación aquí, con suerte, solo tendremos un gráfico. Muy bien. Excelente. Ahora, tenemos algunos problemas con el diseño aquí. Agreguemos algunos márgenes, que puedo hacer rápidamente en plot para solucionar eso un poco. Y esto esperemos que lo haga más legible.

Muy bien. Aquí lo tenemos. Permíteme ocultar esto. Estamos avanzando.

8. Agregando un Selector de Ordenamiento para Personalización

Short description:

Hemos agregado un selector de ordenamiento para permitir a los usuarios personalizar su visualización de datos. Al elegir diferentes opciones, los usuarios pueden explorar conjuntos de datos y encontrar información más fácilmente. El componente de menú desplegable permite a los usuarios seleccionar opciones como orden alfabético, frecuencia descendente y frecuencia ascendente. Conectamos el menú desplegable al gráfico utilizando un hook de estado y un controlador onchange. La opción seleccionada actualiza el estado, pero aún no lo hemos incorporado al useEffect.

Tenemos un gráfico. Lo logramos. Y nuevamente, el patrón que estamos utilizando es tomar esta useRef, conectarla a nuestro activo, y luego en el useEffect, dejar que plot o cualquier otra biblioteca de manipulación del DOM que puedas estar usando haga su trabajo, agregue su SVG y luego lo elimine cuando queramos actualizar la próxima vez.

Muy bien. Ahora, para la parte de reactividad. ¿Me sigues? Ahora vamos a crear este pequeño selector de ordenamiento para que mi usuario pueda decidir cómo le gustaría ver mejor su información, lo cual es realmente poderoso. Cuando tienes acceso a los datos y puedes jugar con ellos, y cambiar la visualización de ciertas formas para explorar un conjunto de datos, eso hace que sea aún más fácil encontrar esos conocimientos y esos patrones.

Entonces, en este ejemplo simple, vamos a agregar ese pequeño menú desplegable, para lo cual tengo un pequeño componente en otro archivo. Voy a importarlo y luego crear un menú desplegable dentro de mi gráfico de barras. Para hacer eso, simplemente voy a traer mi componente de menú desplegable. Puedo darle un título, llamarlo 'Ordenar por'. Puedo darle algunas opciones, un array de valores para elegir. La opción predeterminada era alfabética, así que mantengámosla ahí. Y luego tendremos frecuencia descendente y frecuencia ascendente, en caso de que mis usuarios quieran usar alguna de esas opciones. Si recuerdo cerrar todas mis cosas y hacer esto simétrico... Esperemos... Ok.

Ahora tenemos una pequeña cosa en la pantalla que permite a las personas usar este widget de selección para elegir una opción. Solo que aún no hace nada, porque no lo hemos conectado al gráfico de barras. Así que arreglemos eso. Anteriormente había traído un hook de estado, nuestro buen amigo. Entonces lo que podemos hacer es crear una propiedad de ordenamiento y un setOrdenar usando nuestro hook de estado. Podemos darle el valor predeterminado de alfabético para comenzar con algo. Y luego lo que puedo hacer en mi menú desplegable es pasarle un pequeño controlador onchange, que va a recibir el evento de cambio cuando alguien elija una opción diferente en el menú desplegable y va a establecer el ordenamiento en la opción que realmente eligieron. Así que ahora esperemos que esto esté actualizando nuestro estado, pero no hay un efecto visual de eso porque aún no hemos incorporado el estado a nuestro useEffect. Así que hagamos eso. Lo primero que quiero hacer es llevar mi variable de ordenamiento aquí a las dependencias de useEffect. Y luego, por ejemplo, aquí agregamos esa propiedad de ordenamiento con este pequeño objeto de configuración. Ahora podemos tomar decisiones sobre cómo queremos que se vea esta propiedad en función del valor de el ordenamiento. Entonces, si el ordenamiento es alfabético, en realidad puedo decidir no hacer nada.

9. Creando un Gráfico Declarativo

Short description:

Al utilizar una API declarativa, Plot nos permite crear un gráfico que se actualiza de forma reactiva sin manipularlo manualmente. Podemos centrarnos en declarar la apariencia deseada del gráfico y dejar que Plot se encargue del dibujo. Esto facilita tomar decisiones basadas en el estado de la aplicación.

Y luego, si tengo un ordenamiento no alfabético, puedo elegir el orden, ya sea que esto se invierta o no, según si ese valor es descendente. Si lo es, entonces invertir las cosas. Y si no, entonces no hacerlo. Así que ahora, si no he cometido errores, lo cual es una gran incógnita, tengo un gráfico que se actualiza de forma reactiva, pero escrito de forma declarativa en mi aplicación. Así que espero que todos ustedes sientan, al igual que yo, que debido a esta API declarativa que ofrece Plot, porque no estoy manipulando el gráfico manualmente de forma imperativa, simplemente estoy declarando cómo quiero que se vea el gráfico. Plot, tú te encargas de cómo dibujarlo. No me voy a preocupar por eso. Debido a eso, se siente bien con esta aplicación reactiva. Porque puedo tomar decisiones como lo haría en otro componente para decidir qué elemento renderizar según el estado de mi aplicación.

10. Construyendo una Aplicación de Visualización de Datos Reactiva con Plot

Short description:

Creamos una aplicación de visualización de datos reactiva con Plot, mostrando la facilidad de construir aplicaciones personalizadas y responsivas. La API declarativa de la biblioteca maneja escalas y mapeos, permitiendo una fácil personalización.

Lo logramos. Creamos en poco tiempo una aplicación de visualización de datos reactiva. Es... No sé con qué frecuencia vamos a querer ver la frecuencia relativa de las letras en el idioma inglés. A menos que seas un amante del lenguaje, como yo. Pero espero que esto te dé una idea del tipo de aplicaciones personalizadas y responsivas que puedes construir con una biblioteca como Plot. Y su API declarativa. ¡Hurra!

Muy bien. Gracias, dioses de la demostración. Ok... Ya casi se nos acaba el tiempo aquí. Pero solo un par de palabras más. Espero que esto haya sido bastante fácil. ¿Qué opinan ustedes? Quiero decir, no tuvimos que preocuparnos por las escalas. No tuvimos que preocuparnos por los mapeos entre los valores de mis datos reales y el diseño de las barras en la pantalla. Plot se encargó de todo eso por nosotros. Y aún así pude anular valores según fuera necesario. ¿Podría ser más fácil agregar un gráfico a mi aplicación? Bueno, Observable, ObservableHQ es un entorno de prototipado y visualización de datos reactivos basado en JavaScript en el navegador.

11. Incrustando Visualizaciones y Personalizando Gráficos

Short description:

Puedes encontrar montones de ejemplos en el sitio, incluyendo la biblioteca Plot y otras bibliotecas como D3. Obtén el código de incrustación o el código del componente React desde cualquier cuaderno Observable para integrar visualizaciones en tu aplicación. Se han lanzado funciones reutilizables de código abierto para generar gráficos D3. Puedes personalizar los gráficos utilizando el mismo patrón que antes. Plot es una biblioteca de alto nivel que permite la creación conveniente y personalizable de gráficos. Tiene una API declarativa y funciona bien en aplicaciones reactivas. Useref y UseEffect se pueden utilizar para delegar la manipulación del DOM. Hay recursos adicionales de lectura disponibles para Plot y D3.

Puedes explorar el sitio y encontrarás montones de ejemplos porque también es una increíble comunidad de creadores que construyen las visualizaciones más geniales. No sé cómo lo hacen. Así que hay ejemplos increíbles, no solo con la biblioteca Plot, sino también con otras bibliotecas como D3.

Y desde cualquier cuaderno Observable, puedes obtener un fragmento de código de incrustación para insertar un elemento de iFrame autocontenido, ¡plunk, listo!, o para generar el código del componente React que necesitarías si quieres pegarlo en tu aplicación y manipularlo según lo desees para integrarlo con el resto de tu aplicación. Así que eso es bastante fácil. Súper emocionante, justo la semana pasada, como hace cinco minutos, lanzamos algunas funciones reutilizables de código abierto que puedes llamar para generar un gráfico completo basado en D3. Así que este es un nuevo desarrollo en los ejemplos de D3 donde no tienes que descubrir cómo replicar imperativamente estos geniales gráficos D3 que ves por ahí. Hay un montón de funciones diferentes como histogramas, diagramas de arena, diagramas de árbol, todo tipo de cosas diferentes. Puedes encontrar todos los ejemplos en observablehq.com.

Y utilizando el mismo patrón exacto que acabamos de ver, puedes insertar esto en una aplicación React. Así que utilizando el patrón useRef y useEffect que acabamos de ver, puedes llamar a una función de histograma y obtener un histograma instantáneo, personalizarlo como desees, hacerlo rojo, hacerlo lo que sea, y nuevamente, utilizando ese mismo patrón de useRef y useEffect, limpiar después de ti mismo que acabamos de ver. Y nuevamente, ambas son formas realmente fáciles de aprovechar todos los increíbles años y décadas de experiencia que tienen estos increíbles desarrolladores de visualización de datos que se han integrado en estos ejemplos y estas APIs, estas bibliotecas, para no tener que aprender todo eso nosotros mismos. Así que podemos obtener un gráfico genial que muestra la información que queremos que nuestros usuarios comprendan. De acuerdo.

Así que un resumen súper rápido, porque creo que me he pasado un par de minutos, lo siento, es que Plot es una biblioteca de suficiente nivel que puedes obtener un gráfico realmente conveniente y en funcionamiento con un par de líneas de código y aún así no te limita a ejemplos específicos. Puedes personalizarlo combinando estos pocos conceptos diferentes. Debido a que tiene una API declarativa, se siente muy bien en una aplicación reactiva. De hecho, fue diseñado para ser utilizado en un contexto reactivo en Observable, pero React es otra aplicación perfectamente genial. Entonces, Useref y UseEffect son nuestros amigos si queremos delegar la manipulación del DOM a otra biblioteca para no tener que codificar todo a mano. Y los ejemplos que vimos con gráficos D3 y otros ejemplos que puedas encontrar en Observable, también puedes incorporarlos en tus aplicaciones. Así que muchas gracias, hay muchos recursos adicionales enlazados en las diapositivas. Si quieres profundizar más en Plot, si quieres profundizar más en D3, también hay muchos buenos recursos disponibles. Y les agradezco mucho por estar aquí conmigo. Ha sido genial hablar con todos ustedes. Muchas gracias. Mis compañeros de equipo en Observable, gracias. Gracias. Gracias. Gracias. Por favor, tomen asiento.

QnA

Preguntas y Accesibilidad

Short description:

Por favor, tomen asiento. Estaremos respondiendo algunas preguntas en breve. Una pregunta se refiere a las pruebas de estrés de Plot con muchos puntos de datos y cualquier problema de rendimiento con SVG. Plot se basa en D3, que ha sido optimizado durante años, por lo que debería manejar bien los gráficos grandes. Plot está vinculado a la representación de SVG, pero se podría construir una biblioteca basada en lienzo utilizando los mismos principios. Las pautas de accesibilidad aún están en proceso.

Por favor, tomen asiento. Tenemos un problema de programación un poco incómodo donde la transmisión en vivo se interrumpirá en un conjunto diferente de programación en un par de minutos. Pero también han batido el récord de preguntas, creo que tienen la mayor cantidad de preguntas de cualquier charla hasta ahora. No sé si es una buena señal o una mala señal. Tampoco lo sé. Pero vamos a responder algunas de esas preguntas para las personas que están aquí en la sala Siéntanse libres, en un par de minutos, de ir a tomar café durante el descanso de media hora que vamos a tener, o quedarse aquí y responderemos preguntas durante unos 10 minutos. ¿Les parece bien? Claro. Genial.

La pregunta número uno que tenemos aquí es, ¿Plot ha sido sometido a pruebas de estrés con muchos puntos de data y, de ser así, encontraron algún problema de performance con SVG? Esa es una gran pregunta. Si estás dibujando un SVG cada vez, probablemente tendrás un poco más de dificultades que con 26 letras como teníamos antes. Sin embargo, Plot se basa en D3. Y como muchos saben, D3 definitivamente ha pasado 10 años optimizando y cosas como actualizar data cuando cambia para que solo necesites actualizar las partes que importan. Y así tienes esencialmente todas esas ventajas de D3 debajo de Plot. Entonces, no estoy seguro, como Plot es tan nuevo, no estoy seguro cuál es el límite máximo de tamaño de Plot que se ha creado. Esa es una buena pregunta, se lo preguntaré a mi equipo. Pero espero que el hecho de que D3 haya estado trabajando en ese problema durante mucho tiempo le dé una buena base para intentar hacerlo, no de la manera más lenta posible, digamos. Bien. Y tal vez como seguimiento a eso, ¿hay algo en Plot que lo vincule a la representación de SVG o también se podría usar con el renderizador basado en lienzo? Plot se basa en SVG. No creo que lo haga. Creo que tendrías que volver a empezar para hacer que las cosas se representen en lienzo. Sin embargo, esto es, nuevamente, un enfoque para implementar esta idea de una gramática de gráficos. Entonces, es un sistema formal de representación de los diferentes tipos de gráficos que podemos crear a partir de estos conceptos clave. Así que puedo imaginar totalmente y tal vez ya existan, otra biblioteca basada en lienzo que tome los mismos principios y los haga traducirse en un lienzo en lugar de elementos SVG. Genial. Solía trabajar en Victory en el pasado, así que tuvimos que lidiar mucho con los mismos problemas. Soy muy comprensivo con su causa. Creo que la transmisión en vivo podría estar cortándose ahora, así que si todavía están ahí, adiós. Continuaremos aquí en la sala por un poco más de tiempo.

Andy H está preguntando, ¿las visualizaciones de Plot cumplen fácilmente con las pautas de accessibility? Esa es una gran pregunta. Definitivamente es algo en lo que todavía tenemos trabajo por hacer.

Accesibilidad y Contribuciones

Short description:

Plot es una biblioteca de código abierto que todavía está en fase beta. El equipo está trabajando activamente en abordar las preocupaciones de accesibilidad y da la bienvenida a las contribuciones y comentarios. El objetivo es hacer que Plot sea más accesible y mejorar el campo de la visualización de datos basada en la web.

Afortunadamente, todo es de código abierto, como mencioné, por lo que si te encuentras con obstáculos de accesibilidad específicos o cosas que aún no están en la biblioteca, porque se lanzó recién la primavera pasada, por lo que todavía está en una fase beta de su vida. Todavía estamos trabajando en resolver algunos problemas. Si tienes preguntas o dificultades específicas en ese sentido, te recomendaría que vayas a GitHub.com y revises los problemas para ver qué se ha señalado, tal vez haya cosas adicionales por las que te gustaría informar un nuevo error, y ver cuáles son las posibilidades allí. Se aceptan contribuciones. Sí, esa es la forma más amable de decir que se aceptan solicitudes de extracción (PR). Si no te gusta algo, puedes solucionarlo. Y se agradecen los comentarios, ya sabes, los problemas y plantear esas preocupaciones, definitivamente es algo que queremos escuchar. Definitivamente hay mucho impulso por parte del equipo para asegurarse de que Plot se mueva en una dirección de visualización más accesible. La accesibilidad en la visualización de datos es, como, en sí misma un campo o un área en la que creo que todo el campo de la visualización de datos basada en la web necesita abordar un poco mejor, por lo que es un trabajo en progreso, pero llegaremos allí.

Soporte de Plot para SSR

Short description:

El soporte de Plot para SSR es incierto. Utiliza D3 para crear elementos DOM, por lo que podría ser posible pero requiere una investigación adicional. Para obtener información precisa, se recomienda consultar la documentación de Plot o discutirlo en el foro de Observable.

Genial. Otra pregunta, tal vez una respuesta similar. ¿Plot admite SSR? Buena pregunta. Me gustaría pasarle eso a mi equipo, si es posible. Creo que, ya sabes, como estamos usando básicamente D3 para crear los elementos DOM reales en la página. Creo que probablemente se pueda hacer, pero no estoy completamente seguro de cuáles podrían ser los obstáculos o implicaciones de eso, así que diría que es una excelente pregunta para plantear en Plot o en conversaciones con el equipo de Observable en el foro. Así que tenemos un foro en talk.observablehq.com. Antes de decir algo incorrecto, investiguemos allí.

Comparando Plot con otras bibliotecas

Short description:

Plot se basa en D3, lo que lo convierte en parte de la familia de pensamiento de D3. Proporciona una forma más rápida de comenzar en comparación con D3. Vega-Lite es otra biblioteca que utiliza un concepto similar de gramática de gráficos. Plot te permite crear tus propios gráficos combinando fácilmente diferentes tipos de marcas. Fue diseñado para funcionar bien en un entorno reactivo y ofrece documentación comparándolo con otras bibliotecas como D3 y Vega Lite.

Genial. Muy bien. La siguiente pregunta es un poco complicada y puedes abordarla de la manera que desees, pero se ha hecho tantas veces que tenemos que hacerla. ¿Cómo compararías Plot con otras bibliotecas de gráficos de código abierto como Chart.js o Victory o cualquier otra? Claro. Como dije, siendo nuevo en la visualización de datos, no estoy familiarizado en profundidad con estas otras bibliotecas. Sin embargo, diría que las principales distinciones de Plot son, nuevamente, que se basa en D3 y aprovecha todo el conocimiento acumulado en D3 en los últimos 10 años. Entonces, D3 es esta biblioteca de visualización de datos de bajo nivel enormemente poderosa que tiene muchas capacidades. El hecho de que Plot se base en eso lo convierte en parte de la familia de pensamiento de D3, por así decirlo. Entonces, si estás familiarizado con D3 pero a veces lo encuentras un poco demasiado detallado para tus necesidades y deseas una forma más rápida de comenzar, Plot es la opción. Sin embargo, hay otras bibliotecas de visualización de datos disponibles, por ejemplo, Vega-Lite es una para JavaScript basada en Vega que también emplea este concepto similar de gramática de gráficos. Entonces, si has trabajado con cosas como ggplot de R o Vega-Lite, es posible que encuentres que Plot se siente ergonómicamente similar porque emplea muchos de los mismos conceptos y marcos conceptuales. Nuevamente, muchas bibliotecas de gráficos que he visto te ofrecen algunas opciones predefinidas que tienen algunas propiedades configurables pero no te permiten crear tus propias combinaciones o combinar diferentes tipos de marcas, como combinar líneas con barras o gráficos de puntos o cosas así. Pero lo bueno de Plot es que no necesariamente te ofrece gráficos predefinidos pero debido a que es tan rápido, como hemos visto, y simple de agregar diferentes tipos de marcas a tus gráficos, te permite construir tu propio conjunto de Lego, por así decirlo, a partir de estas piezas recomponibles. Así que creo que eso es algo bueno. Y lo otro importante de Plot es que fue diseñado para funcionar en un entorno reactivo. Por ejemplo, los cuadernos observables son este tipo de entorno funcional reactivo en el navegador y Plot fue diseñado para funcionar muy bien con eso. Fue diseñado con su API declarativa para funcionar muy bien con la actualización de valores basada en las entradas del usuario y la interactividad. Así que creo que también funciona muy bien en esos casos. Y hay documentación en el sitio observable sobre comparaciones entre Plot y algunas otras bibliotecas como D3, como Vega Lite. Así que eso podría ser interesante para aquellos que se preguntan sobre esas comparaciones.

Manejo de puntos de datos agrupados y personalización

Short description:

Puedes confiar en los valores predeterminados del gráfico para manejar la mayoría de los puntos de datos agrupados. Sin embargo, si los valores atípicos no son relevantes o deseas proporcionar opciones de personalización, puedes anular el dominio y el rango predeterminados. Esto te permite restringir el dominio para excluir los valores atípicos y distribuir la visualización adecuadamente en la pantalla. Observables y D3 proporcionan ejemplos y herramientas para manejar desafíos de visualización de datos y explorar diferentes formas de visualizar datos. Puedes encontrar inspiración en cuadernos y ejemplos existentes, e incluso integrarlos en tu propia aplicación. Observable es una herramienta poderosa para explorar y crear visualizaciones.

Sí. Muy bien. ¿Crees que puedes responder un par de preguntas más? Estoy lleno de cafeína y listo para continuar. Vamos a hacerlo. No suenas así para nada. Bueno, aquí hay una pregunta. Voy a elegir una que no sea la primera en este momento, pero iré por la siguiente aquí, porque es una pregunta real sobre la visualización de datos y no necesariamente sobre el gráfico, pero me interesaría escuchar tus pensamientos al respecto. ¿Cómo resolverías el problema de tener la mayoría de los puntos de datos agrupados sin valores atípicos en el extremo de la escala? Por ejemplo, el 99% de los valores entre 0 y 1, y luego el 1% de los valores en el primer percentil?

Sí, este será uno de esos casos en los que puedes confiar en los valores predeterminados del gráfico. Lo que el gráfico podría hacer es analizar todos los puntos en tus datos y decir: `OK, aquí está el más pequeño, aquí está el más grande`. Esa es básicamente la dimensión de mi problema aquí. Ese es el espacio de entrada. Y voy a mapear eso a mi rango, mi espacio de salida, que es el número de píxeles que tengo disponible en la pantalla. Sin embargo, si para tu aplicación esos valores atípicos no son relevantes, o deseas que las personas tengan la opción de cambiar eso, lo que puedes hacer en el gráfico es anular ese dominio y rango predeterminados según lo que se ajuste a tus propósitos. Entonces, si deseas, por ejemplo, restringir el dominio para excluir esos valores atípicos, puedes pasar una propiedad de dominio al gráfico y decirle los valores mínimo y máximo que realmente deseas visualizar, y luego hará todo el mapeo que necesita hacer para distribuir eso adecuadamente en la pantalla. También puedes conectar eso a la interactividad en tu aplicación, por ejemplo, permitir a las personas elegir los límites que están viendo y hacer zoom, por así decirlo, dentro o fuera. Eso es probablemente a lo que terminarías recurriendo desde esa perspectiva. Creo que eso plantea un punto muy importante que muchas personas... Hay muchas preguntas aquí que se refieren al rendimiento en tiempo de ejecución, a la capacidad de tree-shaking, a cosas que tienen que ver con la naturaleza de JavaScript de esta biblioteca. Pero fundamentalmente, los problemas de visualización de datos son problemas porque algunos datos son más difíciles de visualizar. Y por eso me gusta mucho Observables como herramienta, porque los cuadernos te permiten jugar con los datos y verlos de diferentes maneras, y encontrar formas intuitivas de ver algo en un conjunto caótico de datos.

Sí, definitivamente. Y también creo que, una vez más, en términos de no tratar de reinventar la rueda y tener que aprender todo sobre la teoría de la visualización de datos, explorar Observable y los diferentes cuadernos que la gente ha creado para ver algunos ejemplos de cómo las personas han abordado exactamente ese problema, cómo... También hay ejemplos en D3 de cómo usar cosas como animación para ayudar a las personas a ver cómo cambia el dominio, o se expande o contrae, según se hace zoom dentro o fuera de un gráfico. Esos tipos de ejemplos pueden ser realmente útiles para orientarte en la dirección correcta, o en el caso ideal, simplemente puedes tomarlo, incluyendo el crédito donde corresponda, y pegarlo en tu aplicación, como dijimos antes. Así que sí, espero que eso oriente a las personas en algunas buenas direcciones. Sí, quiero decir, no tengo preferencia por ninguna herramienta en particular, pero me encanta Observable como herramienta. He jugado mucho con ella. Y me encanta explorar las visualizaciones que otras personas han creado. Ya sabes, los conjuntos de datos son simplemente increíbles. Lo sé.

Prototipado y Compartir con Observable

Short description:

Observable permite un prototipado rápido en React con retroalimentación instantánea. Puedes exportar e incrustar visualizaciones en tu propia aplicación, o compartirlas como aplicaciones independientes utilizando la URL. Además, puedes bifurcar ejemplos de otras personas y personalizarlos para tu caso de uso.

Es realmente sorprendente, a veces, las cosas que la gente crea. Y lo bueno de Observable es que también puedes incluir texto explicativo, puedes vincular una visualización y su interactividad con otras partes de una página completa que describe los datos, etc., por lo que también es muy útil para aplicaciones de narración de datos. Y debido a esa funcionalidad de incrustación o exportación, puedes prototipar rápidamente en React porque todo es retroalimentación instantánea, lo siento, puedes prototipar rápidamente en el entorno Reactivo de Observable que está construido con React. Puedes ponerlo en funcionamiento rápidamente y luego, cuando funcione, cuando te guste cómo es, puedes exportarlo, incrustarlo en tu propia aplicación. Incluso puedes obtener la URL para enviar a las personas como una aplicación independiente, así que sí, es una forma bastante rápida de ponerse en marcha y también puedes bifurcar ejemplos de otras personas para no tener que hacer todo el trabajo que ya hicieron. Solo ajústalo para tu caso. Genial. Voy a hacer una última pregunta y luego dejaremos que estas buenas personas tomen un poco de café porque no creo que todos hayan tomado tanto como nosotros. Hay un montón de preguntas que básicamente son las mismas preguntas. Voy a parafrasearlas todas aquí. ¿Qué tan personalizable es el diseño de la visualización del gráfico? ¿Puedes pasar tus propios componentes o elementos SVG en lugar de los componentes que ya tienes, por ejemplo, las barras? De hecho, creo que sí. Nuevamente, todos los enlaces a la documentación del gráfico están en las diapositivas, pero puedes pasar tus propias funciones y nuevamente, también es posible extenderlo con tus propios tipos de marcas, por ejemplo, si hay algo más que quieras usar. Sin embargo, las marcas incorporadas pueden ser realmente útiles, como la marca de texto, por ejemplo, que puede ser muy útil para hacer cosas como, oh, quiero que mi gráfico de puntos no sean puntos, sino emojis, o lo que sea, ¿verdad? Por lo tanto, incluso puedes obtener mucho provecho de las marcas incorporadas tal como están. Genial. Y hay una pregunta realmente divertida aquí que tengo que hacer. ¿Cuál es tu secreto para una precisión de escritura impecable durante la codificación en vivo? Porque es bastante impresionante. No hay ninguno. Me equivoco todo el tiempo, solo, ya sabes, mucha práctica frenética antes de la charla. Pero estaba, estaba preocupado por, ya sabes, los dioses del Wi-Fi estuvieran con nosotros, pero llegamos hasta aquí, así que. Genial. Hemos respondido muchas preguntas, y aquellos que están viendo esto más tarde, ya sabes, la grabación en vivo, no han estado viendo esto a doble velocidad. Solo estamos hablando muy rápido. Y sí. Las personas aquí en Londres, disfruten del descanso para tomar café. Volveremos en unos 20 minutos, así que habrá charlas rápidas. Se llevarán a cabo en el escenario principal, pero también se transmitirán aquí, así que si quieres venir aquí en preparación para las charlas posteriores, bienvenido. Gracias. 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 Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

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