Transcript
00:00:00Este es OpenTui, una biblioteca impulsada por Zig para crear interfaces de terminal con enlaces
00:00:04para React, Solid y FreeJS, para que puedas construir TUI de alto rendimiento de la misma forma en que construyes aplicaciones
00:00:09web. Fue creada por Anomaly, el equipo detrás de OpenCode, que es un popular código abierto
00:00:14agente de codificación, para potenciar realmente la interfaz de usuario de OpenCode, que es utilizada por millones de
00:00:19personas de forma regular. ¿Pero cómo se compara esta nueva biblioteca con la otra popular herramienta React
00:00:24de interfaz de terminal que ha existido por mucho más tiempo y se utiliza para potenciar muchos populares
00:00:29agentes de codificación? ¡Suscríbete y vamos a descubrirlo!
00:00:35Entonces, Ink es la biblioteca de referencia para construir interfaces de terminal con React. De hecho, he hecho un
00:00:40video al respecto que puedes ver por aquí. Pero tiene algunos problemas. Primero
00:00:44que nada, las aplicaciones simples consumen más de 50 MB de memoria y tienen un límite fijo de 30 fps, lo cual
00:00:51está bien para la mayoría de las aplicaciones. Pero si estás construyendo una aplicación que transmite mucho texto,
00:00:56como un agente de codificación, entonces el límite de fotogramas hace que todo se sienta lento. Así que el equipo
00:01:00de Anomaly, que originalmente usó Golang con Bubble Tea para construir OpenCode, quiso reescribirlo
00:01:06en TypeScript sin usar Ink. Así que crearon OpenTui. Es decir, compraron OpenTui. No exactamente
00:01:13lo construyeron desde cero porque Commander FX ya estaba construyendo una biblioteca de terminal
00:01:18basada en Zig. Así que Anomaly lo patrocinó y construyó OpenTui sobre su trabajo. Entonces el núcleo de Zig hace todo el
00:01:24renderizado pesado y los enlaces de TypeScript te permiten escribir componentes de UI en React o Solid. Pero la
00:01:30parte realmente ingeniosa es la interfaz de funciones foráneas de BUN, que te permite hablar directamente
00:01:36desde TypeScript al código nativo de Zig sin mucha demora, que es lo que hace que OpenTui sea súper
00:01:42de alto rendimiento. Usa yoga para diseños Flexbox, viene con componentes integrados como entradas y selecciones,
00:01:47e incluso hay un paquete 3.js que te permite renderizar gráficos 3D web GPU dentro de la terminal,
00:01:54lo cual es una locura. De hecho, veamos OpenTui en acción probándolo en una demostración muy simple. Hay
00:01:59muchas formas en las que puedes configurar un proyecto básico de OpenTui. Personalmente, me gusta usar BUN CreateTui
00:02:04porque te da este asistente muy útil que puedes usar para darle un nombre a tu proyecto y elegir
00:02:09la plantilla que deseas usar. Ahora voy a ir con React, pero explicaré más adelante en el video,
00:02:13las diferencias entre estas tres plantillas. Así que una vez hecho eso, obtienes algunos archivos estándar
00:02:17con un índice que ejecuta un proyecto básico de pantalla completa. Y si miramos el código,
00:02:21podemos ver aquí en la línea 15 que está usando el renderizador CreateCLI para hacer uso del motor de renderizado de OpenTui.
00:02:27Y debajo de eso está CreateRoot, que renderiza el componente de la aplicación. Y si estás familiarizado
00:02:32con React, este es el código que lo monta en un archivo HTML. Pero debido a que estamos renderizando en una terminal,
00:02:37este proyecto no tiene un index.html, sino que usa un reconciliador de React personalizado que usa
00:02:42cuadros de terminal y texto en lugar de componentes HTML. Encima de eso, tenemos el JSX que usa el componente de cuadro
00:02:49y algunas propiedades de yoga flexbox para alinear el cuadro probado dentro de él que renderiza una fuente ASCII y algo de texto básico.
00:02:55Ahora, si no quisieras que esta fuera una aplicación de pantalla completa, OpenTui admite múltiples modos de pantalla.
00:03:00Y podemos cambiar este a pie de página dividido con una altura de pie de página, que fija el renderizado en una región reservada
00:03:05en la parte inferior de la terminal. Pero intentemos hacer algo un poco más interesante que solo cambiar
00:03:10el modo de pantalla. Aquí hay un Tui básico con algo de texto de título y una entrada de nombre. Ahora, mira esto. Con OpenTui, obtienes
00:03:17respuesta a esto gratis. Así que no importa el ancho de mi terminal, todo sigue viéndose bien. Y si
00:03:21echamos un vistazo al código, está usando una sintaxis de React muy familiar. Así que por aquí, tenemos un useState
00:03:26que está configurando el nombre. Y en la entrada, estamos actualizando el nombre en la propiedad de entrada. Y eso
00:03:32se cambia en el texto. Ahora, una cosa realmente genial que hace OpenTui es una especie de recarga en vivo sin el
00:03:37HMR. Entonces podemos ver aquí, si cambio el texto a adiós y luego guardo el archivo, se actualiza automáticamente.
00:03:43Y es agradable tener una entrada receptiva, pero a veces el texto simplemente no se muestra. Esto puede
00:03:48arreglarse agregando un ancho, lo que hace que las cosas sean mucho más fáciles. Y con el componente de cuadro, tenemos
00:03:52algunas propiedades muy geniales como borde y color de fondo, que envejecen inmediatamente esta aplicación de terminal.
00:03:56Nuevamente, podemos usar una fuente ASCII en lugar de este texto, lo que hace que el encabezado destaque un poco más.
00:04:01Y por supuesto, hay muchas fuentes ASCII que puedes elegir. Recuerda, porque esta es una aplicación
00:04:05de terminal, no una página web, no renderiza todas las fuentes que tienes en tu sistema, solo cosas que admiten la
00:04:10terminal. También podemos hacer cosas como cambiar la vista al enviar de la misma manera que lo haces con una aplicación React regular
00:04:15cambiando el estado al enviar y mostrando diferentes JSX basados en esta condición. Pero aquí hay
00:04:20una cosa que no esperarías que una terminal pudiera hacer. Si envío mi nombre, el otro estado ahora se desvanece
00:04:25en su lugar. Y esto se hace con el gancho useTimeline de OpenTui, que se usa para establecer una duración de animación,
00:04:30establecer un objetivo. Entonces, en este caso, el componente tiene una opacidad de cero y un desplazamiento de ocho,
00:04:36lo que significa que tiene un margen superior debajo del centro. Y aquí la animación termina con un desplazamiento de cero
00:04:40y una opacidad de uno al actualizar los estados de desplazamiento y opacidad que se configuraron aquí. Y estos
00:04:45valores se actualizan en las propiedades del cuadro. Ahora se ve un poco entrecortado porque las animaciones de terminal necesitan
00:04:50moverse fila por fila. Así que algo así como en una cuadrícula, pero es genial que OpenTui te permita hacer esto
00:04:55tan fácilmente. Lo que es realmente genial es que podemos combinar todo lo que hemos aprendido hasta ahora usando el diseño flexbox
00:05:00para poner cuadros uno al lado del otro. Entonces tenemos una entrada en un lado y otro cuadro en el otro.
00:05:05Y si escribimos en la entrada al enviar, podemos animar el valor que entra en el otro cuadro,
00:05:10lo cual es un toque muy agradable. Y desde aquí, podemos hacer tantas cosas con OpenTui,
00:05:14como habilitar la navegación por teclado con el gancho useKeyboard, mostrar datos del sistema usando node OS,
00:05:19habilitar soporte de mouse para listas virtualizadas. Y debido a que todo esto se ejecuta sobre BUN,
00:05:24puedes usar cosas como BUN SQLite, BUN Postgres, o buscar información externa de la misma
00:05:28manera que lo haces en cualquier sitio web. Y lo genial de esto es que después de compilar mi aplicación, sí, es de 71
00:05:34megabytes porque incluye el tiempo de ejecución de BUN y la reconciliación de React. Pero cuando la ejecuto,
00:05:39puedes ver que usa menos de 50 megabytes de memoria. Y debido a que React es tan popular,
00:05:43los LLM lo conocen como la palma de su mano. Y así, construir aplicaciones en OpenTui puede ser muy simple
00:05:49sin la necesidad de ir y venir mirando la documentación. Así que ese es un recorrido muy, muy simple
00:05:53de OpenTui. Pero volvamos al principio del video, donde prometí que explicaría
00:05:58la diferencia entre React, Solid y Core. Así que es bastante simple si sabes sobre desarrollo
00:06:02web front-end. Básicamente, todos renderizan a través del mismo núcleo ZIC. Así que el dibujo real a
00:06:07tu terminal es bastante idéntico. La única diferencia es cómo escribes tus componentes
00:06:11y cómo se aplican las actualizaciones. Así que React vuelve a ejecutar tus componentes y compara un árbol virtual en cada
00:06:17cambio, lo cual es bastante similar a cómo funciona el DOM virtual. Solid usa actualizaciones de grano fino,
00:06:22por lo que solo actualiza lo que cambió. Y Core se salta todo eso, lo que significa que solo mutas
00:06:27los objetos directamente. Así que en papel, React es el más pesado y Core el más ligero. Pero en la práctica,
00:06:33para la mayoría de las aplicaciones de terminal, la brecha es pequeña porque todo el trabajo pesado lo realiza el núcleo ZIC,
00:06:38lo que significa que, en este caso, los marcos son solo una preferencia personal. Pero aunque una aplicación OpenTui
00:06:44se envía con todo el tiempo de ejecución de BUN y la reconciliación específica del marco, si tiene una,
00:06:50el rendimiento y el tamaño de la aplicación siguen siendo mucho más pequeños que Ink, pero por supuesto no tan
00:06:56de alto rendimiento como algo nativo como Ratatouille o Bubble Tea. Pero en mi opinión, JSX es la mejor
00:07:02y más intuitiva forma de componer cualquier interfaz de usuario. Y preferiría aceptar el ligero impacto en la memoria y el tamaño y tener
00:07:09una experiencia de desarrollo mucho mejor al construir una Tui que tener algo que sea ligero en tamaño y ligero
00:07:15en uso de memoria, pero un dolor de cabeza al escribir y actualizar. Entonces, con eso en mente, elegiría OpenTui
00:07:20sobre Ink cada vez, si alguna vez logro construir una aplicación de terminal,
00:07:25lo que prometo que haré pronto.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video