React Beyond the DOM

Hola, buenos días, React Summit. Mi nombre es Eric Rasmussen, y hoy estoy aquí para hablarles sobre pensar en lo que React puede hacer más allá del DOM. Desde React 0.14 en 2005, cuando usas React en un proyecto web, debes tener estas dos líneas en tu package JSON. Creo que muchos desarrolladores de React, especialmente los junior, realmente no entienden por qué necesitamos estas dos importaciones. Hacen dos cosas diferentes.

React es la biblioteca central que proporciona la API fundamental para construir componentes de UI. También tiene lógica de componentes, y gestiona el estado del componente y los métodos del ciclo de vida y hooks. Tiene un algoritmo de reconciliación que determina cómo deben aplicarse las actualizaciones a la UI, como qué partes volver a renderizar. Lo creas o no, es independiente de la plataforma. Puede usarse con diferentes renderizadores. React DOM es el más común, pero puede que hayas oído hablar de React Native para móviles. También maneja JSX, convirtiendo 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 real del navegador. Utiliza el DOM virtual renderizando primero a una versión en memoria del DOM, y luego haciendo diff para decidir qué partes actualizar. Hace esa manipulación del DOM. Maneja la actualización, montaje y desmontaje de elementos en el navegador. No es tan importante hoy en día, pero hace 11 años cuando React salió, la normalización de eventos del navegador era realmente importante porque diferentes navegadores tenían diferentes formas de eventos, y eso era realmente útil. También hace hidratación y renderizado del lado del servidor. No solo renderiza directamente al DOM, sino que puede renderizar a una cadena, que puede ser hecha en el servidor y descargada como si fuera un archivo HTML, y luego hidratada en el navegador, donde la hidratación significa simplemente reconectar todos tus listeners para hacer la página interactiva, y otras cosas como portales en las que no entraremos. El poder de React proviene del hecho de que, como desarrolladores de React, asumo que todos somos desarrolladores de React aquí, una vez que aprendes esto, sabes cómo crear UI declarativa que cambia con el tiempo. Pero, ¿a qué puedes renderizar que no sea el DOM? Bueno, hay bastantes renderizadores de React por ahí. El segundo más popular es React Native, donde no estás renderizando a un WebView en el entorno nativo, sino a componentes nativos reales. Luego hay cosas como React 360, que era una forma genial de renderizar a VR, pero Meta ya no lo gestiona. Presumiblemente todavía les importa VR, así que deben tener algo interno. Está React 3 Fiber para renderizar a 3.js. Está React Native Web, que es una forma de usar componentes de React Native en el DOM. Famosamente, el sitio web de Twitter fue construido con esto. Uno de mis favoritos es React PDF. No sé cómo son los interiores de un PDF, o cómo incluso construir un archivo PDF.

Pero con React PDF, nos dan componentes que podemos juntar. En varios trabajos, he creado algunos PDFs usando esto. Otro de mis favoritos se llama Ink. Nuevamente, no sé cómo dibujar cosas en la terminal, pero con Ink lo hace bastante fácil. Y algo que podrías construir podría entrar aquí. Para los propósitos de esta charla, quería construir algo que tomara JSX e hiciera algo interesante con ello. Se me ocurrió algo que realmente nadie quiere, una forma de renderizar HTML a Markdown. Nadie quiere ir en esa dirección. Solo tiene sentido tomar Markdown y HTML. Toma algo que se ve así, un bonito componente de React, nuevamente, JSX y HTML y lo convierte en Markdown, que supongo que todos podemos leer.

Esto fue solo un proyecto suficiente para manejar algo de anidamiento y props, como ves aquí. Así que antes de entrar en cómo construí eso, necesitamos hablar sobre algunos términos. El Reconciler es el motor central de React que determina cómo actualizar la UI en respuesta a cambios en el estado o props. El entorno host es la plataforma a la que estás renderizando, como DOM o Canvas o Terminal. El componente host se refiere a los elementos específicos de la plataforma, como un div en DOM o rect en Canvas. Y la configuración del host es este objeto de funciones que le das al React Reconciler para describir cómo debería interactuar con tu entorno objetivo. La instancia es un objeto que representa un solo elemento de UI en tu entorno, como un elemento HTML. Y el contenedor 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 para determinar qué componentes necesita volver a renderizar, y la fase de commit, donde realmente hace los cambios mínimos a tu entorno objetivo. Bien, entonces ahora que conocemos esas palabras, ¿cómo construimos uno de estos? Bueno, primero necesitas esta biblioteca llamada React Reconciler. Principalmente es mantenida por Meta, como la documentación está bien, pero realmente es el único juego en la ciudad si quieres construir uno de estos. Y necesitas una función de render que tome tu JSX y haga lo que quieras, y tu configuración del host que le diga al React Reconciler cómo manejar los cambios en tus elementos de React. Y a menos que estés construyendo algo tan tonto como mi idea, podrías realmente ganar algo de dinero. Así que veamos algo de código. No es tan aterrador como parece. Importamos React Reconciler y nuestra configuración del host a la que estamos a punto de llegar, y creamos un Reconciler. Y luego en nuestra función de render, definimos un contenedor, y esto depende completamente de nosotros cómo se ve esta forma. Y le decimos al Reconciler que cree un contenedor, y luego llamamos a updateContainer.

Y cuando llamamos a updateContainer, va a mutar la forma dentro de nuestro contenedor. Bien, ahora veamos la configuración del host. La función más importante en la configuración del host es createInstance. Esto se da el tipo, que es como el nombre de tu etiqueta JSX, y los props. Y luego sale con algún tipo de instancia, nuevamente, totalmente definible por ti. Pero en el mundo del DOM, por ejemplo, una instancia es un elemento. Así que creamos el elemento con ese tipo, digamos que es div o lo que sea. Y luego copiamos los props que queremos copiar, y luego devolvemos el elemento. Así que nuestro elemento HTML es nuestra instancia.

En mi caso, solo guardo esos valores en un JSON. Y luego está createTextInstance. Si no estás muy familiarizado con el DOM, un nodo de texto es el texto entre las etiquetas que en realidad es un nodo en el árbol. Solo tiene su función análoga en la API del DOM. Y en el mío, creo otra cosa JSON. Y luego hay cosas como appendChild al contenedor. Y esto es solo, en el DOM, simplemente llamas a appendChild. Y en mi caso, solo estoy empujando un hijo a los hijos.

Así que en interés del tiempo, voy a agitar mis manos aquí y decir, todo lo que el DOM tiene para insertar, mover y desmontar componentes tiene una función análoga en la configuración del host. Así que depende completamente de ti lo que hagas con eso. Y luego están estas dos funciones que manejan el renderizado real. Está la fase de preparación y la fase de commit. Y se les da la instancia, como tu elemento HTML, el tipo, como tu div, y los props antiguos y los nuevos props. Y luego la prepare update devuelve una carga de actualización que es como un diff o lo que sea que el commit update necesita.

Y eso se da a la commit update en la fase de commit. Y luego hay un par de otras cosas para hacer toda la otra magia que React sabe cómo hacer para la hidratación y suspense, yada, yada, yada, yada. Pero eso es para algo simple como lo que estoy haciendo, puedes simplemente ignorar eso.

Bien. Es hora de la demostración. Bien. Así que esta es mi cosa de HTML a markdown funcionando. Y puedo cambiar cosas aquí. Y se recarga automáticamente. Simplemente vuelve a generar este archivo.

Pero para mostrarte que esto es solo React, puedo hacer cosas como tener algún estado y un use effect. Y luego aquí, puedo imprimir mi count. Y puedes ver que está usando React como todos sabemos lo que React puede hacer. Y añadí cosas como listas desordenadas o si quisiéramos hacerlas ordenadas, ya sabes, cambios como ese. Incluso me emocioné y codifiqué una versión de tabla.

Así que eso es algo divertido. Gracias. Gracias. Y el código para esto se ve algo así. Genera un gran árbol JSON y lo recorre. Y para ULs, es algo bastante simple.

Así que pensé, bueno, ¿a qué más podría renderizar que no sea tan aburrido? Pensé, bueno, ¿y si pudiera renderizar al, como, el mundo real? Como a, como, un dispositivo IoT o algo así. Y no sería una charla de React sin algunos props.

De nada. Así que se me ocurrió una forma de renderizar a bombillas. Así que mira esto. Así que esta habitación es un... ¿Qué demonios, copilot? Eso es hilarante. Este componente de habitación es solo un componente JSX personalizado que tengo. Y vamos a intentar. Y puedo hacer cosas como esa.

Y porque compré dos bombillas... Pero de nuevo, esto es solo React. Así que puedo, como, tener algo de estado aquí. Así que este es nuestro estado encendido. Así que ahora está apagado. Pero como en tu típica demo de React que ves en un sitio web para empezar, tendrías, como, un botón para hacer clic y alternar esto encendido y apagado, ¿verdad?

Pero no tenemos un botón, ¿verdad? Pero si lo piensas, nuestros botones en nuestras páginas web... Puedes irte. Nuestros botones en nuestras páginas web son realmente solo, como, versiones eskeumórficas de botones en el mundo real. Y los botones existen en el mundo real. Así que compré uno. A veces es más inteligente que otras. ¿Verdad? Así que eso es algo genial.

Y luego, por supuesto, podemos hacer cosas como nuestro hook favorito de todos. Podemos hacer que parpadee. Bien. Genial. ¿O sabes qué? Ya que tenemos dos bombillas... Genial, ¿eh? Bien. Así que por ahora, apaguémoslas ambas, porque eso me está molestando. ¿Qué más podría construir? Bueno, dije apaga. Así que si me conoces o has visto alguna de mis charlas antes, sabrás que soy un gran fan de las máquinas de estado.

Pensé, bueno, ¿qué tipo de máquina de estados podría construir? {{^}}Pensé, ¿y si pudiera construir un semáforo? Porque, ya sabes, estas cosas hacen colores, ¿verdad? Así que hagámoslo en este Editor Visual. Y veamos qué podemos hacer aquí. Así que comencemos con rojo. Y rojo irá a verde. Y luego verde irá a amarillo. Y amarillo volverá a rojo.

Y no queremos realmente escuchar eventos aquí. Queremos simplemente tener un temporizador. Y podemos hacer eso con after. ¿Cuánto tiempo queremos hacer esperar a la gente en el semáforo? Dos segundos. Verde. Veamos. Puedes conducir durante tres segundos. Y luego amarillo, ups. Después de un segundo y medio. Muy bien.

Así que hemos construido una máquina de estados. Nota que mientras estaba construyendo esto visualmente aquí, estaba escribiendo código aquí, lo cual todavía me sorprende hasta el día de hoy. Así que tenemos la máquina de estados aquí. Y podemos ir a nuestra sala. Y como X state viene con un use, viene con hooks, podemos usar machine. Ups, eso era correcto. Y esto nos va a dar nuestro estado y una función para enviar de vuelta a él, lo cual no vamos a hacer. Así que necesito una cosa extra allí. David, ¿por qué está esto infeliz? Oh, no lo importé. Oh, dios. Estúpido. Copilot? Muy bien. Duh. Okay.

Así que ahora, si hiciéramos como nuestro color fuera como nuestros states.value. Los haremos ambos. Y lo encendimos, y rezamos a los dioses de la demo. Esa es una máquina de estados en el mundo real. No sé. Creo que eso es bastante interesante.

Bien. Vamos a apagarlo. Entonces pensé, bueno, ¿qué más puedo hacer con el mundo real? Y pensé, bueno, mi laptop tiene un micrófono. Así que pensé que podría escribir un hook useNoise. Y luego ajustar el brillo al ruido. ¿Me vas a ayudar aquí? Medidor de aplausos. Como, interesante.

Bien. Así que eso es todo por nuestro tiempo de demo divertido. Es hora de hablar de más cosas. Veamos. Bien. Sobrevivimos al tiempo de demo. Así que esto es todo como diversión y juegos y cosas. Pero, ¿por qué necesitamos usar esto? ¿Qué podemos hacer con esto en el mundo real? Así que quiero hablarles sobre para qué uso esto en mi empresa Atio. En mi trabajo en Atio, estamos construyendo la próxima generación de software CRM. Como Think Salesforce, pero no apesta.

Así que trabajo en un equipo que construye un ecosistema para que terceros desarrollen aplicaciones sobre Atio. Y una de las cosas que necesitábamos era una forma para que un desarrollador externo mostrara un formulario o mostrara alguna información dentro de nuestra aplicación web. Y no puedes simplemente tomar JavaScript de terceros y ejecutarlo en tu aplicación web, porque eso es un gran agujero de seguridad con cookies y fetch y window y todo. Diseñamos una forma de sandbox una aplicación. En un iframe que va a un nombre de dominio diferente, para que no tenga ninguna de las cookies, ejecutamos un runtime de JavaScript personalizado construido en C++ y Rust en Wasm.

Allí, ejecutamos el JavaScript de terceros. Hacemos eso para que solo le demos a ese JavaScript de terceros las APIs exactas que queremos que tengan. Así que no hay fetch, no puedes hablar con window. Pero aún queríamos que pudieran darnos una hermosa interfaz de usuario. Así que les permitimos renderizar nuestros componentes SDK personalizados en React, y luego lo serializamos con JSON fuera del Wasm, fuera del iframe, de vuelta a nuestra aplicación web, y luego renderizamos con nuestra hermosa interfaz de usuario. Entonces, ¿cómo se ve esto? Así que damos estos componentes SDK, esto debería parecer bastante autoexplicativo para la mayoría de los desarrolladores de React.

Tienes un formulario con un on submit, algún tipo de input, un buen input de texto enriquecido, y un botón de submit. Y luego esto se renderiza a nuestros componentes JSX personalizados, y esto se serializa y luego se muestra con nuestra hermosa interfaz de usuario. Esta es una aplicación real que construí para conectarse con Linear. El código fuente está en esa URL.

Y otra cosa que tenemos son lo que llamamos widgets, donde puedes mostrar datos de cualquier tipo en nuestra interfaz de usuario. Así que estos son bastante claros en lo que hacen. Y esto se renderiza a esto, y luego sale con nuestra hermosa interfaz de usuario. Así que el punto de esta charla es inspirarte a pensar en cómo puedes usar el poder de React para renderizar a otros objetivos.

Como no sé, una impresora 3D, posicionar un dron, o más luces inteligentes, cosas geniales, o no sé, configurar una base de datos en la nube o un LLM prompt, ya sabes, lo que sea. Cualquier cosa que sea inherentemente declarativa y con forma de árbol es un gran objetivo para renderizar a. Así que con eso diré muchas gracias. Y comencemos con la primera pregunta.

Alguien se preguntaba cuál era el plugin de VS Code que usaste para escribir la máquina de estado. Ese es un plugin de Stately AI que hace XState los autores en la audiencia. Realmente es una herramienta increíble. Puedes simplemente dibujar tus pensamientos, y luego tienes código. Es bastante poderoso. Soy un gran fan.

Bueno para visualizar también, ¿verdad? La otra cosa genial es que está sincronizado bidireccionalmente. Si alguna vez has dibujado un diagrama y luego escrito un código, inmediatamente tu diagrama está desactualizado. Pero con esta herramienta, cuando cambias el código, cambia el diagrama también. Así que siempre está actualizado. Increíble.

Siguiente pregunta. ¿Está el renderer en GitHub? Sí. Está en la URL que se mostró. Sí. Es Eric Grass slash React HTML to Markdown. Y la cosa de IoT está ahí también. Genial. Bien. Una persona preguntó, ¿por qué a veces las bombillas están fuera de sincronización? Eso es solo una cosa rara de Zigbee. Sí. Así que protocolo. Esos protocolos son locos, ¿eh? Sí. Eso es lo más robusto que he encontrado. Seguro que no quería usar Wi-Fi en un lugar de conferencias.

Sí. ¿Qué porcentaje de la especificación del navegador implementas en tu solución sandbox de WASM Rust en el navegador? ¿De la especificación del navegador? Ninguna de la especificación del navegador. Es más como la especificación de node es lo que pensarías. Hacemos set timeout y cosas así.

Pero muy, muy, muy poco. De acuerdo. Sigamos adelante. ¿Cómo controlas exactamente la luz en las bombillas? Bien. Así que con el renderer, tengo un callback de actualización. Cuando se ha realizado un render, voy y miro el estado y envío el... Y luego convierto eso en un mensaje imperativo para la bombilla. Genial.

Veamos. ¿Estás ejecutando algún script para la recarga en caliente del Markdown IoT? Sí. Bun watch. Bun. Sí. Genial. ¿Qué te parece usar Bun? Es increíble, especialmente para proyectos pequeños como este. Es tan rápido y TypeScript está integrado y simplemente lo ejecutas y listo. Sí. Sí. Gran fan.

¿Cuál es esa hermosa fuente que estás usando en VS Code? Se llama Dankamano. Sí. ¿Lo recuerdas? Sí. Oh, sí. Bien. Veamos qué más tenemos aquí. ¿Cuáles son las ventajas... ¿Qué ventajas tiene Wasm Solution sobre simplemente desarrollar un constructor de formularios WYSIWYG? Porque no es... Le da al desarrollador formas de ejecutar su código real. También tenemos una manera de... Así que para mostrar información en ese widget, por ejemplo, nosotros...

Aunque no tienes fetch en el navegador, sí tenemos una manera de llamar a una función de servidor que ejecutamos en un sandbox similar en la nube, y eso sí tiene fetch. Así que no es solo para la construcción de formularios. Genial.

¿Se preocupa mucho React Reconciler por los renders asincrónicos? Estoy asumiendo que el despacho de ZigBee es asíncrono. No lo sé. No, el despacho de ZigBee no es asíncrono. Es solo en render. Sí. Envía un mensaje. Sí.

¿Crees que algún día algo como esto podría usarse para programar robots con React? Claro. ¿Claro? Sí. Sí. Increíble. Bueno, muchas gracias, Eric. Ha sido genial. Gracias.