Gráficos, como una Función del Estado / Gráfico = fn(estado)

Mi nombre es Anil Durman. Soy ingeniero en el New York Times y esta es mi charla titulada Gráficos como una Función del Estado. Como dije, durante el día soy un ingeniero de software senior en el New York Times. En el Times, mi equipo ayuda a las personas a comprender las noticias con nuevos formatos y páginas. Es posible que hayas visto nuestra página de blog en vivo donde se muestra una secuencia de publicaciones y actualizaciones en tiempo real a medida que se desarrollan, o páginas con mucha información, como nuestro Centro COVID, donde las personas pueden actualizar información sobre la pandemia. Trabajo con muchas personas excelentes que están haciendo un trabajo altamente impactante y gratificante. Y como siempre, estamos contratando y buscando no solo desarrolladores, sino también diseñadores, gerentes de producto y cualquier persona que trabaje en tecnología.

Por la noche, soy un codificador creativo. Amo la web, y gran parte de mi trabajo tiene que ver con explorar cómo se intersectan e interactúan la creatividad y el código entre sí. Mi nombre de usuario en Twitter es MeloGood. Allí puedes ver donde publico muchos experimentos, especialmente cuadernos observables. Y mi último proyecto se llama Good Graphics, donde he estado haciendo muchos experimentos. Y esta charla surgió naturalmente a partir de algunos de mis hallazgos. Así que, esta es una breve descripción de hacia dónde nos dirigimos. Hablaremos sobre el principio de la UI, las funciones, el estado, hablaremos un poco sobre los SVGs, los abordaremos en el contexto de los componentes de React, y luego hablaremos sobre los sistemas gráficos que se pueden construir con ellos una vez que se tenga esta comprensión.

Entonces, cuando decimos UI, la función, el estado, es un principio fundamental de React. Puedes renderizar toda tu aplicación o sitio web como una función del estado que le proporcionas. Entonces, cuando le das el nombre y apellido, renderizará el mundo. Y a medida que cambia esa entrada, tu UI se vuelve a renderizar de forma natural y siempre está actualizada con el estado que se le proporciona. Y esto realmente significa que JSX nos permite escribir de forma declarativa en marcado, especialmente en el contexto de las actualizaciones. Así que este es un componente muy simple de React. Se llama click-text. Y realmente lo que hace es asumir que le darás un contador y a medida que se actualice el contador, se actualizará el texto. Entonces, cuando tenemos la propiedad de click igual a uno, simplemente dirá haz clic una vez. Cuando tiene la propiedad de dos, haz clic dos veces, y así sucesivamente. Pero esto realmente ilustra que React nos permite incorporar realmente el estado de los datos que se te proporcionaron y renderizarlo en la pantalla sin tener que hacer demasiado extra.

Hablemos de los SVGs. Si eres como yo antes de comenzar a aprender más sobre ellos, son simplemente un activo de diseño que mi diseñador me daría y que yo simplemente agregaría a un componente de React y usaría, pero nunca volvería a tocar. Pero resulta que son mucho más que eso. Es un lenguaje basado en XML, que describe gráficos 2D, lo que básicamente significa que hay un montón de primitivas que te permiten describir cosas como un círculo o un rectángulo en la pantalla. Esto debe ser compatible con JSX de forma nativa y el marcado se ve muy similar a los componentes de React, solo con props especiales. Entonces, en acción, esto es un SVG. Puedes ver que envolvemos los componentes de nivel superior SVG con una lista para la altura, algunos detalles sobre cómo dibujar líneas con un trazo y un relleno, y luego puedes ver que el componente de círculo tiene algunas props. El círculo tiene una coordenada x, el círculo tiene una coordenada y, y luego r que es el radio del círculo. Esto es simplemente la especificación de cómo dibujar un círculo usando SVGs, y ya se parece y se ve como un componente de React, por lo que se presta muy bien a pensar en React. Entonces, podemos comenzar a construir estos SVGs y componentizarlos. Podemos agregar más lógica a ellos y realmente comenzar a trabajar con gráficos en el mismo contexto de una manera en la que ya estamos

Entonces, cuando digo gráfico como una función del estado, realmente estoy tratando de transmitir que podemos usar HTML básico para construir estos sistemas gráficos realmente complejos y nuestra lógica se puede descomponer en componentes de manera similar a cómo ya trabajamos con interfaces de usuario y nuestros diseños gráficos pueden ser ricos y reactivos e intuitivos para el usuario final como lo son nuestras interfaces de usuario. Entonces, trabajemos y recorramos juntos la construcción de un gráfico. Entonces, este gráfico, nuevamente, es solo un gráfico de círculo muy simple. Abstraí el marcado de SVG del círculo en un componente que recibe las mismas propiedades que acabo de pasarle. Obtenemos una salida muy similar de un solo círculo. Pero si agregamos un poco de lógica y nos apoyamos en algunas de las funcionalidades que React puede brindarnos, podemos hacer cosas realmente geniales. Este componente se llama Grid. Y lo que hace Grid es básicamente un bucle for anidado de columnas y filas. Y si le das la entrada de cinco columnas, cinco filas, toma cualquier componente secundario que le des y lo traza varias veces en cada posición de esa cuadrícula. Entonces, en la práctica, al usarlo, hace algo como esto, donde le damos a esa cuadrícula un componente de círculo como hijo. Y va y crea una cuadrícula de cinco por cinco componentes de círculo usando mucha de la funcionalidad nativa de React en torno a los hijos y acoplando eso con el funcionalidad de grupo admitida que nos brindan los SVG. Entonces, como dije, podemos tomar nuestra lógica, descomponerla en componentes. Realmente comenzamos a combinar la lógica entre sí de una manera compatible con React para construir sistemas complejos. Entonces, ahora que tenemos este sistema en su lugar, puedes hacer cosas realmente geniales de inmediato con él. Incluso podrías reemplazar el círculo por un componente de rectángulo y realmente aprovechar lo que ya hemos escrito, similar a cómo podrías reutilizar la lógica de un componente que ya has escrito.

O podrías crear diseños realmente geniales y tener un montón de círculos anidados entre sí para no tener que hacer solo una cosa, puedes hacer muchas cosas diferentes. Pero aún reutiliza mucha de la misma lógica que teníamos antes, pero nos permite experimentar un poco más intercambiando cosas y ver cuánto puede soportar nuestro gráfico en términos de posibilidades. Pero creo que también hay un paso adelante que podemos dar, si observamos la capacidad de componentización. Entonces, este es un componente llamado círculos anidados. Y si volvemos al último ejemplo, es simplemente tomar esa lógica de tener cinco círculos anidados entre sí y realmente desarrollarla para que sea un poco más robusta y un poco más determinable y reutilizable. Entonces, lo que hace círculos anidados es esa misma lógica de bucle for con una matriz vacía, y simplemente traza la cantidad de círculos congruentes al primer círculo ocupando todo el espacio. Y luego, si hay dos círculos, el segundo círculo ocupa la mitad del espacio. Y si hay 10 círculos, se distribuye ese espacio aún más entre esos 10 círculos. Entonces, con un componente como este, puedes construir un sistema que no solo tiene una única salida, sino que puede tener una multiplicidad de salidas. Por lo tanto, usando nuestros componentes, en la esquina superior izquierda puedes ver un círculo anidado con un cierto número de círculos, la propiedad es igual a uno, mientras que en la esquina inferior derecha, con un número de círculos, la propiedad es igual a 10 o 15. Así que puedes ver cómo nuestros sistemas pueden ser más complejos una vez que dominamos esta componentización, y una vez que podemos comenzar a construir sobre ella y jugar un poco más con nuestro estado. Como dije en ejemplos anteriores, incluso podemos tomar círculos anidados y combinarlos con otras piezas de código en nuestra base de código para hacer algo realmente genial. Entonces, esto es un bucle de cuadrícula de círculos anidados, y se parece mucho al primer ejemplo de cuadrícula que te mostré, pero debido a que tenemos círculos anidados y ese componente puede manejar tantas opciones estatales diferentes, puedes ver cómo este sistema, este mismo sistema, dependiendo de las propiedades y el estado que le des, podría renderizar un solo círculo o renderizar estas dos salidas de manera alternativa al jugar con el número de círculos que el círculo anidado debe renderizar. Incluso si quisieras jugar con el número de cuadrículas también, podrías incluso renderizar un montón de círculos masivos, pero en una cuadrícula de dos por dos. Y eso realmente destaca el hecho de que este sistema no se trata realmente de combinar nuestros gráficos, sino que se trata más de crear un sistema que pueda contener una variedad de salidas diferentes y una multiplicidad de resultados. Entonces, para resumir, en React, tu interfaz de usuario es una representación de tu estado. Puedes usar SVGs para aplicar los principios de React al diseño gráfico. Cuando pensamos en nuestro estado, podemos contener infinitas posibilidades y no hay un solo diseño para el que puedas diseñar. Puedes diseñar para una amplia variedad de cosas y resultados. Y nuestros diseños gráficos pueden ser dinámicos y reactivos. ¡Gracias por venir!