React fürs Terminal in Rust mit Flexbox und Hooks

Wenn Sie jemals eine Konsolenoberfläche in Rust geschrieben haben, haben Sie wahrscheinlich Ratatui verwendet. Es ist eine solide Bibliothek, die Dutzende großartiger Utilities antreibt. Aber sobald ein Projekt über ein paar Buttons hinausgeht, beginnt die vertraute Plackerei: Sie müssen den Bildschirm manuell in Rechtecke aufteilen mit Layout, Prozentsätze und Ränder berechnen und Events durch massive match-Konstrukte fädeln. In der Webentwicklung sind wir schon lange an den Komponentenansatz und Flexbox gewöhnt, aber im Terminal schreiben wir oft immer noch, als wäre es 1998.

Ich habe kürzlich die iocraft-Crate entdeckt, deren Autor dieses Problem radikal gelöst hat. Er hat die Erfahrung von React, SwiftUI und Ink direkt in die Welt der Systementwicklung in Rust gebracht.

Ein vertrautes Komponentenmodell

Die Bibliothek basiert auf dem element!-Makro. Es konstruiert einen Elementbaum mit einer Syntax, die stark an JSX oder deklaratives Swift erinnert. Keine manuellen Koordinatenberechnungen. Das Layout wird von der taffy-Engine verwaltet, die die Flexbox-Spezifikation für Rust treu implementiert.

So sieht ein klassisches Hello World aus:

use iocraft::prelude::*;

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

Wir wickeln einfach Text in einen View-Container, wenden einen abgerundeten blauen Rahmen an und rufen .print() auf. Das Ergebnis wird an die Standardausgabe gesendet, ohne den Terminal im Vollbildmodus erfassen zu müssen. Das ist praktisch, wenn Sie sauber formatierte Konsolenbefehlsausgaben oder Logs benötigen, anstatt eines interaktiven Dashboards.

Hooks und State im Terminal

Die Ähnlichkeit zur Frontend-Entwicklung endet nicht beim statischen Layout. Für dynamische Interfaces hat der Autor das #[component]-Makro und vertraute Lifecycle-Hooks hinzugefügt.

Im Code unten hält die Counter-Komponente ihren eigenen lokalen State über use_state und startet einen Hintergrund-Async-Timer über 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();
}

Wenn sich der count-Wert ändert, löst iocraft ein erneutes Zeichnen des betroffenen Bildschirmteils aus. Die Engine optimiert das Prop-Passing: Kontext und Parameter werden als Referenz übergeben, sodass es hier keine unnötigen Speicherallokationen oder Klonierungen schwerer Strukturen gibt.

Was die Bibliothek in der Praxis leisten kann

Die eingebauten Primitive reichen aus, um Interfaces jeder Komplexität zu bauen. Die Repository-Beispiele enthalten fertige Rezepte für die häufigsten Aufgaben:

• Vollbild-Anwendungen mit Texteingabe und Focus-Handling
• Mehrspaltige adaptive Tabellen
• Interaktive Formulare mit Validierung
• Rechner und Overlays mit schwebenden Modal-Fenstern

Schauen wir uns an, wie komplexe Element-Layouts in der Praxis aussehen:

Das Styling ist plattformübergreifend. Anwendungen rendern gleichermaßen korrekt in Standard-Linux/macOS-Terminals und in Windows PowerShell.

Lohnt sich der Umstieg von Ratatui

Wenn Sie bereits einen komplexen Terminal-Client in Ratatui geschrieben haben, gibt es wenig Sinn, ihn von Grund auf neu zu schreiben. Ratatui ist ausgereifter, mit einer großen Community und Dutzenden von Drittanbieter-Widgets dafür.

Aber wenn Sie ein neues CLI-Tool starten, ein internes Tool für Ihr Team schreiben oder einfach müde davon sind, Terminal-Zeilen und -Spalten manuell zu zählen, spart iocraft viel Zeit. Deklarative Syntax macht den Code kompakter, und Flexbox eliminiert die Kopfschmerzen beim Ändern der Fenstergröße.

Das Projekt wird unter dualer MIT-/Apache-2.0-Lizenz vertrieben. Die Dokumentation auf docs.rs ist detailliert genug, und der Beispielquellcode im Repository zeigt klar, wie man eigene Komponenten baut.