React Beyond the Browser

Hola, bienvenidos a mi charla, React Más Allá del Navegador. Soy Menahi Shayan. Principalmente trabajo en proyectos de código abierto en el área de Boston. Anteriormente fui CTO y cofundador de NextUp. Fui el ingeniero fundador de ZenDuty, y me uniré al equipo de gestión de productos en T-Mobile.

Y hoy vamos a hablar sobre React Más Allá del Navegador. Ahora somos desarrolladores de JavaScript, ¿verdad chicos? Amamos todo lo que JS tiene para ofrecer. Es realmente fácil de aprender. Es amigable para los desarrolladores. Es débilmente tipado. Bueno, débilmente. Tiene prototipado rápido. Tiene una comunidad realmente útil. El marco de ReactJS, TypeScript, NPM. El ecosistema de paquetes más grande del mundo, por cierto. Lo amamos tanto, tanto. ¿Y qué queremos? No mucho, dominación mundial. Lo habitual. ¿Verdad?

No, pero en serio, piensa en los fundamentos del ecosistema nativo de React y en lo que representa. Aprende una vez, escribe en cualquier lugar. Y eso tiene sentido. Así que JavaScript, en mi opinión, es uno de los dos lenguajes que hace que el poder del código sea más accesible. Así que solo tendría sentido que poder usar React en cualquier escenario de desarrollo de software que requiera una interfaz de usuario tendría sentido para nosotros. Haría las cosas increíblemente fáciles. Agilizaría la experiencia. Y ayudaría a más desarrolladores a comenzar en más plataformas con un esfuerzo mínimo. Entonces, ¿cómo se ve hoy? ¿Ya llegamos? Bueno, no. No, no estamos. No estamos en ningún lado todavía. No todo es JS.

Y como desarrollador JS, llegará un momento en tu vida en el que tendrás que salir de la zona de confort de JS. Especialmente si tienes que construir herramientas para otras aplicaciones. Toma, por ejemplo, plugins y extensiones para aplicaciones comunes en el mercado. Así que, por ejemplo, para un motor de juego, estarías escribiendo código en C sharp. Para programas y herramientas de OS, probablemente estarías escribiendo bash. Si estás escribiendo plugins para la suite de Adobe, probablemente escribirías con su propio script extendido. Hay muchos de nosotros que usamos .NET y sistemas embebidos en C++, tal vez C, Python, los complementos de office utilizan Visual Basic y así sucesivamente.

Y con toda esta diversidad en la creación de diferentes UIs para estas plataformas de nicho, surgen nuevos paradigmas, nueva sintaxis, nuevas restricciones. Déjame darte un ejemplo de lo que quiero decir tomando complementos de office con Visual Basic. Por ejemplo, así es como se ve un fragmento de un módulo de análisis JSON en office. Y desde el principio, hay tanto sucediendo con el análisis masivo de cadenas, teniendo dígitos significativos, gestión de memoria de bajo nivel, paradigmas y sintaxis completamente nuevos que la mayoría de los desarrolladores simplemente no conocen. De hecho, la mayoría de los desarrolladores JS ni siquiera tratan con la gestión de memoria de bajo nivel en un día a día base, sin mencionar el IDE al que estás restringido.

Y esto es solo la CLI. La UI es toda otra cosa encima de esto. Ahora imagina aprender todo esto desde cero para un caso de uso muy específico. Piensa en cuánto tiempo tendrías que gastar, cuánto cambio de contexto tendrías que hacer solo por todo esto. Piensa en la complejidad de nuevos paradigmas que esto trae consigo. Bueno, afortunadamente, ya no tenemos que hacer eso. Y eso es exactamente lo que estoy aquí para mostrarte. Vamos a intentar construir complementos de office con, ¿estás listo? React. Sí, así es.

Vamos a llevar la filosofía nativa de aprender una vez, escribir en cualquier lugar a un nuevo cuadro delimitador. Y déjame mostrarte cómo podemos hacer eso. {{^}}Vamos a comenzar con algo llamado Yeoman, y vamos a tener un rápido generador que vamos a instalar, y vamos a ejecutar el generador de office usando Yeoman.

Ahora, esto en realidad se encarga de la mayor parte del trabajo por nosotros, donde solo podemos seleccionar qué tipo de plantilla queremos para comenzar. Voy a ir aquí y seleccionar el panel de tareas del complemento de office usando el marco de React. Y estamos listos para empezar. Va a configurar todo el boilerplate que necesitamos para comenzar. Y veamos cómo se ve.

Sí, eso se ve bastante bien. Así que tenemos un bonito panel de tareas del complemento que está configurado para nosotros. Está funcionando. Tiene algo de texto. Tiene un campo de entrada, y tiene un botón justo allí. Veamos cómo se ve la estructura de la base de código para este complemento de Excel. Relativamente familiar, sí. Tenemos una carpeta de panel de tareas aquí. Tenemos la carpeta de componentes, y ahí es donde sucede la mayor parte de nuestra magia.

El archivo app.tsx, como puedes ver, estamos escribiendo en TSX en Excel. Sí, eso en sí mismo es una mención digna. Y también tenemos nuestro taskpane.ts, donde va a ir nuestra lógica no UI. Ahora vamos a jugar un poco con esto. Intentemos familiarizarnos con cómo podemos aprovechar esto. Ahora, por ejemplo, para SARS, solo voy a cambiar un poco de cómo se ve la UI. Voy a decir la mejor conferencia de la historia. Y ahí lo tienes.

El HMR ha entrado en acción y ha actualizado ese título en Excel. No tienes que construir tu VBA de nuevo y nada de eso. Vamos a llevar esto un paso más allá y ver qué puedes hacer más allá de solo React. Porque tenemos una herramienta increíblemente poderosa en nuestra caja de herramientas, la API de ExcelJS. Sí, podemos acceder directamente a toda la hoja de Excel y manipularla también.

Y esa es la verdadera esencia de las ventajas que podemos obtener de esto. Así que en este ejemplo que nos ha puesto en marcha, está utilizando un simple get active worksheet para averiguar en qué hoja estamos actualmente. Está tratando de acceder a ese rango y tratando de agregar valores, insertar texto específico en ese rango en un formato de matriz bidimensional. Y finalmente, vamos a llamar a algo llamado context.

sync, que dado que todo esto es una operación asíncrona que está sucediendo, y nuestro JS se está comunicando con nuestro entorno de Excel, necesitamos tener una función de sincronización que se comunique en ambas direcciones y ejecute actualizaciones en ambas direcciones para que el contexto esté sincronizado entre nuestros entornos de Excel y JavaScript. Bueno, bastante directo. Sí, intentemos escribir algo por nuestra cuenta. Ahora tenemos nuestra función de insertar texto. Ahora también intentemos obtener texto de lo que se ha seleccionado o ingresado en la hoja de trabajo. ¿Cómo hacemos eso? Tomemos inspiración de esto. Ahora tengo una función de boilerplate lista para mí justo aquí, y voy a hacer algo muy similar.

Así que solo voy a obtener el rango seleccionado del libro de trabajo. Ahora voy a extraer dos parámetros de él, valores y dirección. La razón por la que necesitamos hacer esto es que una vez que obtienes el rango, Excel maneja los atributos de manera diferente. Ahora, debido a que hay tantos atributos, en realidad no consulta todo de una vez. Consultas atributos bajo demanda. Así que en este momento, solo quiero acceder a lo que hay en la celda, los contenidos mismos, y quiero acceder a la dirección que es donde están dentro de la masterclass.

Voy a llamar a context.sync de nuevo, y también estoy pasando una función setState útil donde vamos a enviar esos datos. Ahora esos datos se enviarán en el lado de JSX o TSX, y veamos cómo se ve eso. Voy a crear un nuevo estado simple, y voy a llamar a nuestra función que acabamos de crear en nuestro use effect y luego llamar a la función setState para que podamos establecer esos datos en el estado. También vamos a renderizar esos datos en el DOM mismo usando nuestra etiqueta p, y veamos cómo se ve eso.

Sí, ahí lo tienes. Así que he seleccionado mi F3 a F5 en mi hoja de Excel, y en el momento en que hago eso, puedo ver que JavaScript o React puede acceder a los datos que he seleccionado. Me dice la dirección de lo que he seleccionado y los valores que están en esas celdas exactas. Pero esto es agradable, ¿verdad? Pero déjame decirte dónde ocurre la verdadera magia, donde realmente podemos aprovechar todo el poder de escribir estos complementos en React o JavaScript.

Podemos aprovechar 3 millones de paquetes de NPM. Desde el principio, para construir algo práctico, yo, así de repente, usaría la IA generativa de Google solo porque, y ver qué podemos hacer si podemos rápidamente juntar una aplicación de IA para Excel utilizando el poder de React. Agrega algunas llamadas a la API de IA generativa a través de un paquete de NPM, añade otro paquete para Tailwind CSS solo para que nuestro código se vea realmente bonito. Nuestra interfaz de usuario se veía realmente bonita con un código CSS mínimo. Y también, podríamos incluso usar los propios componentes de React de Fluent UI si queremos hacer que nuestra interfaz de usuario sea más consistente con la interfaz de Microsoft Excel. Y combinar tres de estos juntos, agregar un poco de químico x y el Profesor Utonium, ¿y qué obtenemos? Ahí lo tienes.

Sí, así que tenemos un bonito complemento de Excel al lado. Tiene una pequeña descripción de lo que puede hacer. Tenemos nuestro rango seleccionado que se ve más discreto en este momento, y también está en un bonito tono de azul. Tenemos un campo de entrada y un botón por ahí. Veamos si podemos juntar esto y qué hace. Así que, solo voy a escribir, dame una lista de transacciones bancarias, envíalo a la IA. Y ahí lo tienes. A través del poder de JS, he hecho una llamada a la API de IA, lo he ingresado en una hoja de Excel, y también tengo una pequeña descripción útil. Espero que esa sea una descripción útil de lo que hizo la IA.

Y un pequeño tooltip que está utilizando la biblioteca de componentes de React de Fluent UI para que se vea increíblemente consistente con el resto de Excel. Y si has notado, también está en modo oscuro. También es consciente del contexto del resto de la aplicación de Excel. Solo para llevar las cosas un poco más lejos, veamos si podemos hacer una solicitud adicional, no solo para modificar texto, sino también para leer texto y luego agregar texto justo al lado de eso. Y dado que éramos conscientes de todo el contexto dentro de Excel y de dónde están las cosas, JS puede modificar las cosas en los lugares correctos. Ahí lo tienes. Aprende una vez, escribe en cualquier lugar. Tenemos el poder de React funcionando dentro de Excel. En menos de unas pocas horas, pudimos construir una aplicación bastante completa para Excel utilizando React. Pero veamos hasta dónde podemos empujar estas cajas delimitadoras porque cualquier lugar significa cualquier lugar. Imagina usar React en sistemas embebidos.

Sí, así que esta es una pantalla LCD, una pantalla LCD de sistemas embebidos de 128 por 160 que utiliza el controlador IO line 9341. Y para los no iniciados, es bastante básica. Así que tienes, suele ser de una a tres pulgadas de tamaño. Tienes entre 128 y 320 píxeles. Así que no son muchos con los que estás trabajando. No tienes un puerto HDMI o VGA al que puedas simplemente conectar y extender tu pantalla o reflejar tu pantalla. Solo se controla a través de algo llamado la interfaz de programación serial, que son como cinco cables conectados a un microcontrolador. Tiene apenas 150 kilobytes de RAM, generalmente controlado a través de un controlador ESP como el que tengo aquí o una placa Arduino o una Raspberry Pi.

Y todo el renderizado se realiza generalmente utilizando C++ o Python. Ahora, para darte un ejemplo de cómo se ve la forma tradicional de renderizar en esto, esto es lo que escribirías en C++ para generar la interfaz de usuario en esta pantalla. Así que sería mucho de dibujar un rectángulo aquí, dibujar un círculo aquí y píxeles exactos de como, esta es nuestra coordenada X, esa es nuestra coordenada Y, esta es nuestra altura y ancho. Así que son instrucciones de dibujo muy específicas, como hacemos en el canvas. Y esto es más o menos cómo se vería. Puede tener cierto grado de texto y instrucciones de dibujo muy específicas. Y de manera similar en Python, esto es lo que haríamos, el equivalente de eso. Pero como puedes ver, la sintaxis es en gran medida la misma. Instrucciones específicas como canvas sobre dónde renderizar, qué renderizar.

Y esto es un cuadro a la vez. Entonces, ¿qué falta aquí? Para empezar, ¿dónde está el CSS? ¿Qué pasa con la gestión de estado? ¿Cómo desencadeno actualizaciones y refrescos? ¿Qué pasa con las animaciones? Quiero que mi contenido se vea suave. ¿Dónde están las actualizaciones del DOM impulsadas por JS? ¿Biblioteca de diseño, tailwind, DOM, gifs, algo? No, ¿cuál es el sueño? El estándar de oro, si se quiere, React, ¿verdad? O otros sabores de React. Ahora, ¿crees que este sueño es alcanzable? ¿Podríamos lograr que React funcione en una pantalla como esta, donde gran parte está en solo unos pocos píxeles, sin placas HDMI o VGA, interfaz SPI, solo unos pocos kilobytes de RAM gráfica. Y todo tu renderizado se accede a través de C++ o Python, lo que significa que no tienes fácilmente un navegador disponible en esto. Y lo más grande de todo, estás ingresando un cuadro a la vez.

¿Cómo resolvemos este problema? Hay varias soluciones disponibles. Algunas de las más populares aún se encuentran dentro de Python, donde tienes un navegador en funcionamiento. Supongamos que tienes tu aplicación React funcionando en tu local 3000. Y lo que hace Python es tomar capturas de pantalla de cada cuadro y redimensionarlo y luego enviarlo a la pantalla. Ahora, eso puede ser increíblemente ineficiente y consumir muchos recursos, pero tampoco vas a obtener animaciones suaves porque esta lógica se verá limitada a aproximadamente tres cuadros por segundo. Otros enfoques para este problema en línea tienden a incluir iniciar tu navegador o tener tu código React ejecutándose en él, extrayendo el estado actual del DOM, recorriendo cada atributo dentro del DOM y recreando esos atributos en un paquete equivalente de Python que luego puedes enviar a la pantalla.

Pero piensa en eso por un momento, esencialmente estás escribiendo tu propio navegador. Eso es intenso. Tienes que tener en cuenta cada posible estado y atributo que los elementos del DOM pueden tener. No vas a disfrutar haciendo esto. Pero estoy a punto de mostrarte algo hoy, una solución radicalmente nueva. Y esto va a ser un cambio total de juego que te permitirá renderizar React en pantallas de sistemas embebidos. Y esta solución implica trabajar directamente con el búfer de marco del sistema Linux, donde vamos a configurarlo como una pantalla secundaria y hacer que Chromium se ejecute en él. Eso significa que vamos a tener HTML, CSS y JavaScript listos para usar con animaciones suaves, gran soporte de frameworks, y también va a soportar renderizado parcial de pantalla o actualizar solo partes específicas de la pantalla ya que es un búfer de control del sistema.

Y vamos a obtener altas FPS. ¿Cuán altas preguntas? En pruebas, 52 cuadros por segundo. Sí, eso es suave. ¿Cómo construimos esta solución radicalmente nueva? Bueno, no voy a entrar en demasiados detalles de este código porque se desvía un poco del alcance de esta conferencia. Pero primero tendrías que configurar el controlador en Linux, tendrías que instalar X11 y Chromium. También tendrías que configurar un búfer de marco para la pantalla en X11, tenerlo configurado para que se inicie al arrancar, y también tendrías que configurar tu X11 para ejecutar Chromium junto con todos tus módulos de node si es necesario. Pero el resultado final... ¡Ta-da! Vercel me ofreció una galleta en una pantalla de sistema embebido. ¿Qué tan genial es eso? ¿Verdad? Ahora, en este ejemplo aquí, en realidad estoy ejecutando un paquete basado en React llamado Magic Mirror en este sistema embebido y puedo hacer llamadas API sin problemas a través de JavaScript.

¿Qué tan genial es eso? ¿Verdad? Ahora, en este ejemplo aquí, en realidad estoy ejecutando un paquete basado en React llamado Magic Mirror en este sistema embebido y puedo hacer llamadas API sin problemas a través de JavaScript. Estoy obteniendo mi renderizado completo de UI en HTML, CSS y JS aquí. De hecho, incluso puedo abrir el inspector de Chromium y tengo acceso completo a DevTools aquí. Tengo todo mi CSS cargado, tengo... Puedo inspeccionar mi DOM, tengo animaciones, tengo tailwind. De hecho, incluso pude reproducir video en esto y fue bastante fluido. También puedo llevar esto al siguiente nivel y la guinda del pastel aquí es tener Chromium DevTools remoto... con una experiencia de depuración remota completamente en una laptop mientras tengo HMR. Esto puede parecer bastante común en una laptop pero esto es diferente a cualquier cosa que hayamos visto en la comunidad de sistemas embebidos.

Pero, ¿sabes cuál es la mejor parte? Podemos aprovechar cada paquete que puedas encontrar ahora más allá de tu navegador. Podemos desbloquear el potencial completo de JavaScript en un sistema embebido. Quiero que vayas y lo intentes. Así que este es un tutorial de configuración increíblemente apresurado pero habrá un código QR después de esto que puedes escanear y acceder al repositorio de GitHub. Pero quiero que intentes configurar React en un lugar no convencional y veamos qué podemos lograr desbloqueando estos límites más allá del navegador y realmente llevar la filosofía nativa de aprender una vez, escribir en cualquier lugar a una nueva caja de límites así que no solo quiero saber qué vas a construir. Quiero que sepas dónde lo construirás.

Así que si estás interesado, adelante y escanea el código QR revisa el repositorio para ejecutar React más allá del navegador. Eso ha sido todo de mi parte. He sido Minay Shahyan. Gracias por escuchar React Más Allá del Navegador.