Video Summary and Transcription
Anil Durman, ingeniero en el New York Times, habla sobre el papel de los gráficos en el contexto del estado. Destaca el trabajo realizado por su equipo para ayudar a las personas a comprender las noticias a través de nuevos formatos y páginas. El equipo está contratando para varios roles técnicos. Por la noche, Anil es un codificador creativo que explora la intersección entre la creatividad y el código, y su último proyecto, Good Graphics, se centra en la UI como una función del estado, componentes de React y SVGs. Demuestra cómo los componentes pueden actualizarse en función del estado, lo que permite gráficos declarativos. Anil también muestra cómo se pueden utilizar círculos y cuadrículas anidados para crear sistemas complejos en React, lo que permite diseños gráficos dinámicos y reactivos.
1. Introducción a los Gráficos como una Función del Estado
Anil Durman, ingeniero en el New York Times, habla sobre el papel de los gráficos en el contexto del estado. Destaca el trabajo realizado por su equipo para ayudar a las personas a comprender las noticias a través de nuevos formatos y páginas. El equipo está contratando para varios roles técnicos.
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.
2. Explorando UI, Componentes de React y SVGs
Por la noche, soy un codificador creativo que explora la intersección de la creatividad y el código. Mi último proyecto, Good Graphics, surge de mis experimentos. Cubriremos la UI como una función del estado, los componentes de React y los SVGs. Los SVGs son más que activos de diseño; describen gráficos 2D utilizando un lenguaje basado en XML. JSX admite SVGs y su marcado se asemeja a los componentes de React. Podemos construir y agregar lógica a los SVGs, trabajando con gráficos en el mismo contexto que las UIs.
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
3. Explorando Componentes y Gráficos
Nuestros componentes pueden actualizarse en función de un estado, lo que nos permite escribir gráficos de manera declarativa. Por ejemplo, el componente ColorBar renderiza un rectángulo que actualiza su color en función de la propiedad pasada. También podemos crear gráficos complejos utilizando HTML básico y descomponer la lógica en componentes. El componente Grid, por ejemplo, utiliza un bucle for anidado para crear una cuadrícula de componentes secundarios, lo que nos permite construir sistemas complejos combinando lógica de una manera compatible con React.
Saber cómo trabajar con nuestras interfaces de usuario. Nuestros componentes pueden actualizarse en función de un estado, y realmente el poder que esto desbloquea es que JS establece un SVG que nos permite escribir gráficos de manera declarativa. Así que hablemos a través de un ejemplo de lo que quiero decir. Este componente se llama ColorBar. Recibe una propiedad de color de stock y luego renderiza un rectángulo que tiene 20 píxeles de altura y el ancho completo. Si llamamos al componente ColorBar con el color negro, puedes ver en la parte inferior que tenemos una barra negra. Pero porque, como dije, JSX nos permite renderizar nuestros componentes y gráficos de una manera muy declarativa, podemos pasar una propiedad de color rojo y ver nuestra barra actualizarse automáticamente y volver a renderizarse de la misma manera que lo haría una interfaz de usuario. O podemos pasarle el color verde y lo mismo con el color azul. Entonces, esta es otra forma de pensar en trabajar con el estado y trabajar con React y pensar de manera muy declarativa en cómo escribimos nuestros componentes, siendo la salida un gráfico en lugar de una interfaz de usuario completamente funcional, pero permitiéndonos usar los mismos principios. Podemos comenzar a pensar y agregar una gran cantidad de lógica complicada a estos componentes porque, como dije, son componentes completamente funcionales y tienen todo lo que un componente regular de React haría y tendría. Entonces, en este ejemplo tenemos props.colors y también este se llama multibar o barra multicolor para retroceder un poco. Recibe la propiedad props.colors, que es simplemente una matriz de colores, y luego traza esos colores dentro de un degradado. El componente degradado lineal es una etiqueta SVG compatible nativamente y simplemente permite declarar un degradado y luego en nuestro rectángulo podemos aplicar ese degradado como el relleno. Entonces, el color del rectángulo coincidirá con el degradado. Entonces, en este ejemplo lo llamamos negro por lo que renderiza una barra completamente negra todo el tiempo porque no tienes que espaciar los colores son todos de un solo color, pero usando el mismo componente puedes actualizar un estado para que sea rojo verde azul y obtienes una barra de colores completamente degradados de rojo verde azul. Entonces, siguiendo nuevamente esa misma idea de que el estado que pasas a tu gráfico se actualiza automáticamente y nuestros gráficos pueden volverse super complejos para manejar todos estos estados diferentes.
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.
4. Sistemas Complejos con Círculos Anidados
Puedes crear sistemas complejos con círculos anidados, lo que permite una multiplicidad de resultados. Al combinar círculos anidados con otros códigos, como una cuadrícula, puedes crear diferentes resultados. React permite que tu interfaz de usuario represente tu estado, y los SVGs permiten diseños gráficos dinámicos y reactivos.
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!
Comments