React Más Allá del DOM

Así que, gracias por invitarme en el día más sagrado del año, Black Friday. Mi nombre es Eric Rasmussen, y hoy voy a hablarles sobre pensar en lo que React puede hacer más allá del DOM. Así que cuando comenzamos como desarrolladores de React, al menos desde 2005, cuando empezaste un proyecto de React para la web, tienes que instalar estos dos paquetes en tu package JSON.

Pero la mayoría de los desarrolladores de React, al menos cuando están comenzando, probablemente no entienden por qué necesitamos ambas importaciones, porque en realidad hacen varias cosas bastante diferentes. Así que React es la biblioteca principal que proporciona la API fundamental para construir componentes de UI, y tiene la lógica de los componentes. Gestiona el estado del componente y los métodos de ciclo de vida y hooks, y también tiene un algoritmo de reconciliación que determina cómo se deben aplicar las actualizaciones a la UI, como qué partes volver a renderizar.

Y aunque no lo creas, es totalmente independiente de la plataforma. Puede ser utilizado con muchos renders diferentes, React DOM para la web, quizás hayas oído hablar de React Native para móviles, y también maneja JSX, convierte el JSX en funciones de JavaScript, pero no dicta cómo se renderizan. React DOM, por otro lado, es un renderizador específico para la web. Renderiza componentes de React al DOM del navegador real. Y lo hace usando un DOM virtual, donde en realidad renderiza al DOM en memoria primero, porque eso es mucho más rápido, y luego utiliza un algoritmo de diferencias para decidir cómo cambiar el DOM real.

Y eso es bastante lento. Así que en realidad hace toda la actualización, montaje y desmontaje de los elementos en el navegador. Y cuando React salió por primera vez, fue realmente útil que normalizara todos los eventos del navegador, porque aquellos de nosotros que hemos estado haciendo web durante mucho tiempo podríamos recordar cuando los navegadores te daban eventos de formas diferentes, y tenías que estar verificando en qué navegador estabas. Así que eso es muy bueno. Y también gestiona el renderizado del lado del servidor. Así que no solo puede renderizar al DOM, sino que puede renderizar a una cadena en el servidor, por lo que el navegador piensa que solo está descargando un archivo HTML, y luego rehidrata en el navegador, lo que significa conectar todos los listeners de eventos. Y otras cosas como portales, de las que no vamos a hablar. Quiero que te vayas de mi charla hoy con esto: una vez que eres un desarrollador de React, y asumo que la mayoría de nosotros aquí lo somos, una vez que conoces esta parte, en realidad es un superpoder para hacer muchas más cosas que solo hacer páginas web.

Entonces, ¿qué tipo de renders de React existen? Bueno, está React DOM, y luego tenemos React Native que no está renderizando a una vista web, sino a componentes nativos reales en móviles. Y luego hubo una cosa llamada React 360, pero Meta lo ha deprecado, pero claramente todavía les importa el 3D, pero era genial en su momento. Está React 3 Fiber para renderizar a 3JS. Está React Native Web, que te permite renderizar componentes de React Native al DOM, lo cual podría parecer una locura, pero la aplicación web de Twitter fue construida usando eso. Y uno de mis favoritos, React PDF. No sé sobre la estructura interna de un PDF, pero he usado React PDF para generar facturas y etiquetas y cosas a lo largo de mi carrera, lo cual es bastante genial. Y luego hay uno llamado Ink, que te permite construir interfaces de línea de comandos de terminal realmente bonitas usando React. Y de nuevo, no sé cómo hacer nada de eso, pero he usado Ink, y es bastante fácil. Y tal vez algo que puedas idear. Así que hablando de idear renders, para aprender más sobre esto y prepararme para esta charla, pensé en qué puedo construir que tome algo que sea JSX y lo renderice a algo que sepa si está bien o no. Y se me ocurrió la cosa más inútil posible, renderizar HTML a Markdown. Nadie quiere ir en esa dirección. No tiene sentido, pero fue bueno para practicar y aprender. Así que mi HTML a Markdown toma algo que se ve así, y lo renderiza a Markdown, que supongo que la mayoría de ustedes puede leer. Así que antes de entrar en cómo construí esto, necesitamos repasar algunos términos para poder entender. El reconciler es el motor central de React que determina cómo actualizar la UI en respuesta a cambios en el estado o las props. El host environment es la plataforma a la que estás renderizando, como DOM o Canvas o Terminal. Un host component se refiere a los elementos específicos de la plataforma, como un div para el DOM o un rect en Canvas. El host config es este objeto que le das al reconciler de React para describir cómo debería interactuar con el entorno objetivo. Una instance es un objeto que representa un elemento de UI en tu entorno, como un elemento HTML en el DOM. Container es la raíz de todo tu árbol renderizado, y React se renderiza en dos fases. Está la fase de actualización, donde el reconciler recorre tu árbol JSX y mira todos tus estados y determina qué necesita volver a renderizar.

Y luego está la fase de commit que realmente hace los cambios mínimos en el entorno objetivo. Entonces, ¿cómo construimos uno de estos? Bueno, primero necesitas usar este paquete llamado React Reconciler. Es más o menos mantenido por Meta, pero es el único juego en la ciudad si quieres construir uno de estos. Necesitas una función de render que tome tu JSX y haga lo que sea que estés haciendo. Tienes tu host config, que le dice al reconciler cómo cambiar cosas en tu entorno objetivo. Y a menos que estés construyendo HTML markdown, tal vez puedas convertir esto en algo de valor.

Un pequeño fragmento de código. No es tan aterrador como parece. Importamos React Reconciler. Tenemos nuestra host config que vamos a ver en un segundo. Creamos un reconciler, y creamos un contenedor. Esto depende completamente de nosotros cómo es la forma de esto. Es arbitrario. Y luego le decimos al reconciler que cree un contenedor, y luego llamamos a updateContainer. Y todo este otro material es para todas las cosas locas que React es capaz de hacer con concurrent y hydration y bla bla bla.

Así que nuestra host config, la función más importante es createInstance. Se le da el tipo, que es la etiqueta JSX, y las props dadas a ella. Por ejemplo, si estás haciendo DOM, podrías crear un elemento, y luego copiarías todas las props que quieres copiar, y luego devolver el elemento. En este caso, nuestra instancia es un elemento HTML. Para markdown, solo estoy creando una estructura JSON con espacio para hijos. Y luego está createTextInstance. Si estás familiarizado con la API del DOM, sabes que no todos los nodos son etiquetas reales, pero el texto entre ellos también son nodos. Esto tiene un equivalente exacto en el DOM, y en el mío, solo estoy creando una cosa JSON.

Luego tienes appendChild, y en el mío, solo estoy empujando bajo los children. Y tendrás que tomar mi palabra para ello, porque no tengo todo el tiempo para repasar todos ellos, pero para cada API del DOM que está agregando o eliminando hijos, hay una función equivalente en la configuración de host con la que puedes hacer lo que quieras. Y luego están estas dos funciones que manejan las dos fases de renderizado. PrepareUpdate recibe la instancia. Recuerda, eso es como tu div real o lo que sea, y su tipo, y las props antiguas y nuevas. Y devuelve una carga útil de actualización que se da al commit para hacer lo que necesites hacer allí. Y hay algunas partes más que no te he mostrado para toda la otra locura que React sabe hacer. Basta decir que no necesitas implementar ninguna de estas para tu renderizador típico, pero es bastante bueno que todo esté ahí si las cosas se vuelven realmente locas.

Bien. Intentemos una demostración. Eso siempre pasa. Vuelve aquí. Muy bien. Ve por este camino. Lo mismo aquí. Bien. Yay. Bien. Entonces, este es mi HTML a Markdown. Este es un JavaScript. Este es mi JSX aquí. Puedo agregar cosas aquí, y se renderiza aquí. Pero quería demostrar que esto es solo React. Podemos usar gestión de estado y cosas así. Entonces, si quisiera usar estados y tener un use effect, puedo ir aquí. Este podio es muy bajo. Mantendrá los estados y seguirá escupiendo este archivo aquí. Puedo hacer... Implementé cosas locas como lista desordenada, o si quisiera que esto fuera ordenado, lo soportará. Incluso me volví loco y codifiqué en vivo una tabla. Eso es bastante divertido.

Sí, lo que sea. Esto es genial. El código que... entonces, lo que estoy haciendo es construir este árbol JSON, y luego estoy iterando a través de él y haciendo lo obvio que podrías imaginar. Así que, está bien, pero pensé, ¿a qué más puedo renderizar que sea algo genial y no realmente algo que pensarías como UI? Así que pensé en qué pasaría si pudiera renderizar a, como, dispositivos IoT? Como, luces inteligentes. Así que no sería una charla de React sin algunos props. Así que tengo estas bombillas aquí, y tengo mi componente JSX personalizado llamado Room, y puedo hacer algo como... Podemos deshacernos de ti. Podría decir bombilla... y podría encenderla. Pero espera, pagué dinero extra, y conseguí una segunda. Pero luego podemos hacer cosas como... sí, tengamos nuestro encendido en estado, ¿verdad? Así que, ahora está apagado. Pero, como en una demostración típica de React, tendrías, como, un botón que harías clic y el contador subiría, ¿verdad? Entonces, ¿qué pasaría si tuviéramos un botón que fuera a, como, alternar esto? Pero, como, no tenemos un botón porque no estamos en HTML. Como, ¿qué es un botón HTML si no es una versión esquemórfica de un botón del mundo real? Y así compré un botón. Y si los dioses de la demo están conmigo en este hermoso Black Friday, puedo hacer clic y encenderlo y apagarlo. Muy divertido. Y luego puedes hacer cosas como... ups. Tengamos algunos efectos de uso. Hagámoslos parpadear. Eso es bastante genial. Pero lo que quiero transmitirles es que esto es solo React. Este es el React que todos conocemos. Podemos usar cualquier biblioteca de gestión de estado que queramos usar aquí. Podemos usar React Query. Podemos usar Redux. Podemos usar lo que sea. Así que mi biblioteca de gestión de estado favorita es... apaguemos ustedes por ahora... es una biblioteca llamada XState que te permite construir una especie de máquinas de estado. Así que pensé, ¿qué tipo de máquina de estado podría construir? Y pensé, bueno, ¿qué tal un semáforo? Que cambia de estados y tengo luces. Así que XState viene con este increíble editor visual aquí. Y mira cómo agrego cosas al diagrama de estado aquí, está escribiendo código en el otro lado. Así que comencemos con rojo. Vamos a verde.

Luego iremos a amarillo. Y luego volveremos a rojo. Pero en lugar de escuchar eventos, hagamos que estos sean como un temporizador. Así que si digo después, haremos que la gente se quede en el tráfico durante tres segundos. Y luego verde, puedes conducir por... te dará cuatro segundos. Y luego amarillo, tienes que... frenar... te dará 1.5 segundos. Bien.

Así que acabo de dibujar esto, ¿verdad? Pero escribió todo este código aquí y ahora, en mi habitación aquí, puedo consumir esto con obviamente un hook que se llama use state machine, creo. No. No se llama así. ¿Cómo se llama? Use machine. Ahí vamos. Tráfico. Asegúrate de importarlo. Y esto me dará mis estados y una función para enviar de vuelta. Pero aquí ahora, puedo decir color = state.value. Y aquí, y puedo encender estos chicos. Y los dioses de la demo están con nosotros. Rojo, verde.

Así que, de nuevo, cualquier biblioteca de gestión de estado que quieras usar, si quieres obtener el clima y luego cambiar tus luces, lo que sea. Así que pensé, está bien, eso es bastante genial, pero ¿qué más puedo hacer? Pensé, ¿qué más puedo manipular en el mundo real? Y se me ocurrió la idea de que mi MacBook tiene un micrófono. Así que, creé un hook de uso de ruido. Y aquí, puedo decir que el brillo es igual al ruido. Vamos. Espera. Déjame ver. Hmm. ¡Oh! Aplausos. Así que eso es algo un poco tonto, pero bueno. Muy bien.

Se acabó el tiempo de la demo. Pantalla. Pantalla. Pantalla extendida incorrecta. Pérdida de tiempo. Desenchufar y volver a enchufar. Bien. Déjame agarrarte. Ahí vamos. Bien.

Así que, excelente. Así que, esto es todo, como, diversión y juegos y demás, pero quiero hablar sobre cómo estamos realmente usando esto en mi empresa, Atio. En Atio, estamos construyendo un CRM que no apesta. Es como, todos los que han usado Salesforce o HubSpot saben que no es divertido. Pero Atio es realmente genial. Y estoy trabajando en el equipo para desarrollar un ecosistema de desarrolladores que permitirá a los desarrolladores de terceros construir aplicaciones dentro de nuestra aplicación web.

Y es un desafío técnico realmente interesante, porque queremos que tú, como desarrollador de una aplicación de Atio, puedas dibujar cosas en la pantalla dentro de nuestra aplicación web. Pero no podemos simplemente dejarte ejecutar JavaScript, porque eso es súper inseguro. Tienes todas las cookies y demás. Así que lo que hemos construido es en un iframe separado, en un host diferente, para que no obtengas ninguna cookie, ejecutamos un tiempo de ejecución de JavaScript personalizado a través de Rust y Wasm y cosas locas. Y allí, ejecutamos tu JavaScript. Pero queremos que puedas renderizar la interfaz de usuario en nuestra aplicación web. Y por eso elegimos React, obviamente, porque eso es lo que... Hay tantos desarrolladores de React, y eso es en lo que todos los LLMs son buenos.

Y así, en tu aplicación, puedes renderizar a React. Y lo que hacemos es que tenemos un renderizador personalizado que toma código que se ve así. Esto es bastante obvio lo que hace. Estos son componentes que damos al desarrollador en nuestro SDK. Y con esto, lo convertimos en nuestros componentes personalizados de React que luego transferimos fuera del sandbox, fuera del iframe, y luego renderizamos con nuestros hermosos componentes, así. Y esta es una aplicación real que ayudé a construir para una integración con Linear.

Nuevamente, tenemos otras cosas que son como widgets para mostrar pequeños fragmentos de texto. Y todo esto es bastante sencillo de lo que es. Y nuevamente, lo convertimos en nuestra cosa personalizada y lo pasamos y renderizamos un hermoso fragmento de UI. Así que lo que quiero dejarles hoy es que quiero inspirarlos a pensar sobre... Ahora que... Porque son desarrolladores de React, tienen este superpoder para renderizar a otras cosas.

Entonces, ¿en qué podrían pensar para renderizar? ¿Podrían... A una impresora 3D, como, eso es bastante... Componentes componibles o lo que sea. O para posicionar un dron u otra cosa rara de luz inteligente.

Así que cualquier cosa que sea inherentemente declarativa y con forma de árbol es un gran objetivo para renderizar. Y espero que hagas algo genial. Gracias. Aplausos Eric, ¿por qué crees que no hay muchos más renders personalizados que no funcionan en el navegador? Como, 3-Fiber y cosas así, que son los más conocidos, funcionan en el navegador. La gente simplemente no lo sabe. Ese es uno de los puntos de mi charla, educar a la gente de que esto es algo de lo que nadie habla. Puedes hacer muchas cosas diferentes, pero... Y también... No puedo... Si me preguntas qué es... Para idear un proyecto genial, también... Tiene que... He visto a otras personas haciendo cosas como lo que estamos haciendo en Atio, construyendo UI. Pero teniendo más control sobre ello. No sé. Oh, ahora tenemos un montón.

Está bien. ¿Has hecho de código abierto tu HTML to Markdown Render? También creo que es muy bueno aprender. Sí, estaba en mi última diapositiva. Lo... Publicaré en internet. Ya está de código abierto en GitHub. Pero tienes que encontrarme y encontrar el... ¿Dónde lo publicaría? Puedo tuitearlo. ¿Unirse al WOTC? No sé. ¿Qué es un tweet?

Son 140 caracteres. Está bien. ¿Conoces algún render personalizado para escritorio? Quiero decir...

Creo que React Native puede funcionar en escritorio. Eso fue algo de Microsoft, ¿verdad? Creo que fue Microsoft quien estaba trabajando en ello. Quiero decir, serían ellos. No lo sé. No lo sé, pero creo que había algo con React... Con Microsoft trabajando en ello. Está bien.

¿Cuál es tu render personalizado favorito? Además de los que hiciste. Eso no cuenta. Realmente me gusta Ink. Me gusta poder construir cosas geniales en el terminal. Y ahora estamos en esta era donde el terminal está regresando y todo el asunto de los agentes de codificación. Así que... Sí, puedes hacer cosas geniales.

Tengo dos preguntas para mí mismo. Una de ellas es más de un... Oh Dios mío. Es más un comentario que una pregunta. La primera es una pregunta. ¿Tienes atajos de Vim en tu VS code? Tengo la asignación de teclado de Vim. Quiero decir, sí. Qué héroe. Por supuesto. Gracias. Esta siguiente no tiene nada que ver con la charla. Tiene que ver con el hecho de que las luces tienen este pequeño y adorable adaptador que tuviste que comprar dos adaptadores para los enchufes británicos. Y el maldito adaptador es del tamaño de la luz. Sí. Oye, eso es el... Y tuviste que gastar como 20 libras probablemente.

Eso es el Reino Unido para ti. Probablemente fue más caro que las luces y me encanta eso para ti. Oh, alguien está preguntando qué fuente usas en tu IDE. Se llama Dank Mono. Y lo dijiste con una cara seria. Respeto eso. Está bien.

Oh, sí. Y alguien tiene una pregunta final porque no tenemos mucho tiempo. ¿Cómo funcionó lo de la luz en el fondo? ¿Cómo identificaste cuál es la luz uno y cuál es el botón? Está codificado, ¿verdad? Sí, está usando este protocolo Zigbee. Ese es el que usa IKEA, ¿correcto? Creo que ahora. No lo sé. Creo que quieres intentar usar Wi-Fi porque no haces eso en una conferencia. Y es bastante confiable. La forma en que funciona es tengo un... Después de que el render se compromete tengo un callback que luego miro la diferencia y envío el comando imperativo real para encender o apagar o cambiar de color o lo que sea.

Está bien, entonces esto funcionaría... ¿Cuál es el botón que usas entonces? Es un botón compatible con Zigbee. Oh, está bien, por eso parece un interruptor de IKEA. Sí. Yo estaba como, hombre, simplemente fuiste a IKEA en España. ¿Qué demonios? Es cierto. Tenemos IKEA. Entonces, el punto de esta pregunta IKEA. Diez de diez. Quiero decir, alguien está preguntando cómo reaccionan los usuarios de Windows y creo que es un renderizador personalizado pero de nuevo, no estoy seguro y no creo que tú... ¿Cuál es la pregunta? Oh, está aquí. ¿Cómo usa Windows React? ¿Puedo orquestar un robot humanoide con React? ¿Cómo usa Windows... Windows usa mucho React para crear aplicaciones y creo que mucho de eso es un renderizador personalizado pero no estoy seguro. No uso Windows.

Awww, digan eso juntos. Tengo un Macbook. Está bien.

Oh sí, ¿pueden los renders personalizados interactuar con React DevTools? No, ¿verdad? ¿Pueden? Yo no... Creo que DevTools usa principalmente React. Sí, eso es en el navegador. No lo sé. No lo creo. Está bien. Tampoco estoy seguro de lo que significaría eso. Eso es lo que quiero decir, ¿verdad?

Creo que esto es todo. Creo que deberían ser libres de irse y Nico ya no es libre. ¿Sí? ¿Correcto? Gracias. Estaré en el otro lugar de preguntas y respuestas. Si alguien tiene más preguntas, por favor contacten a Eric y nuevamente, muchas gracias por su charla. Gracias.