React para la Terminal en Rust con Flexbox y Hooks

Si alguna vez has escrito una interfaz de consola en Rust, probablemente has usado Ratatui. Es una biblioteca sólida que impulsa docenas de grandes utilidades. Pero una vez que un proyecto va más allá de un par de botones, comienza el trabajo familiar: tienes que dividir manualmente la pantalla en rectángulos usando Layout, calcular porcentajes y márgenes, y pasar eventos a través de estructuras masivas de match. En el desarrollo web, hace mucho que estamos acostumbrados al enfoque de componentes y flexbox, pero en la terminal todavía a menudo escribimos como si fuera 1998.

Descubrí recientemente el crate iocraft, cuyo autor resolvió este problema radicalmente. Trajeron la experiencia de React, SwiftUI e Ink directamente al mundo de la programación de sistemas en Rust.

Un Modelo de Componentes Familiar

La biblioteca se construye alrededor de la macro element!. Construye un árbol de elementos usando una sintaxis que se parece mucho a JSX o Swift declarativo. Sin cálculos manuales de coordenadas. El diseño es manejado por el motor taffy, que implementa fielmente la especificación flexbox para Rust.

Así es como se ve un Hello World clásico:

use iocraft::prelude::*;

fn main() {
    element! {
        View(
            border_style: BorderStyle::Round,
            border_color: Color::Blue,
        ) {
            Text(content: "Hello, world!")
        }
    }
    .print();
}

Simplemente envolvemos Text en un contenedor View, aplicamos un borde azul redondeado y llamamos a .print(). El resultado va a la salida estándar sin necesidad de capturar la terminal en modo pantalla completa. Esto es útil si necesitas salida de comandos de consola o logs bien formateados en lugar de un panel interactivo.

Hooks y Estado Dentro de la Terminal

La similitud con el desarrollo frontend no termina con el diseño estático. Para interfaces dinámicas, el autor agregó la macro #[component] y hooks de ciclo de vida familiares.

En el código a continuación, el componente Counter mantiene su propio estado local mediante use_state e inicia un temporizador asíncrono en segundo plano a través de use_future:

use iocraft::prelude::*;
use std::time::Duration;

#[component]
fn Counter(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
    let mut count = hooks.use_state(|| 0);

    hooks.use_future(async move {
        loop {
            smol::Timer::after(Duration::from_millis(100)).await;
            count += 1;
        }
    });

    element! {
        Text(color: Color::Blue, content: format!("counter: {}", count))
    }
}

fn main() {
    smol::block_on(element!(Counter).render_loop()).unwrap();
}

Cuando el valor de count cambia, iocraft provoca un redibujado de la parte afectada de la pantalla. El motor optimiza el paso de props: el contexto y los parámetros se pasan por referencia, por lo que no hay asignaciones de memoria innecesarias ni clonación de estructuras pesadas aquí.

Lo Que la Biblioteca Puede Hacer en la Práctica

Los primitivos incorporados son suficientes para construir interfaces de cualquier complejidad. Los ejemplos del repositorio contienen recetas listas para usar para las tareas más comunes:

• Aplicaciones de pantalla completa con entrada de texto y manejo de enfoque
• Tablas adaptativas de múltiples columnas
• Formularios interactivos con validación
• Calculadoras y overlays con ventanas modales flotantes

Veamos cómo se ven en la práctica los diseños de elementos complejos:

El estilo es multiplataforma. Las aplicaciones se renderizan igual de correctamente en terminales estándar de Linux/macOS y en Windows PowerShell.

¿Vale la Pena Cambiar desde Ratatui

Si ya tienes un cliente de terminal complejo escrito en Ratatui, no tiene mucho sentido reescribirlo desde cero. Ratatui es más maduro, con una comunidad grande a su alrededor y decenas de widgets de terceros escritos para él.

Pero si estás comenzando una nueva utilidad CLI, escribiendo una herramienta interna para tu equipo, o simplemente estás cansado de contar manualmente las filas y columnas de la terminal, iocraft ahorra mucho tiempo. La sintaxis declarativa hace que el código sea más compacto, y flexbox elimina el dolor de cabeza de redimensionar ventanas.

El proyecto se distribuye bajo licencia dual MIT/Apache-2.0. La documentación en docs.rs es lo suficientemente detallada, y el código fuente de ejemplo en el repositorio muestra claramente cómo construir tus propios componentes.