Transcript
00:00:00Dies ist OpenTui, eine auf Zig basierende Bibliothek zum Erstellen von Terminal-Interfaces mit Bindings
00:00:04für React, Solid und FreeJS, damit Sie performante TUIs genauso bauen können wie Web-
00:00:09anwendungen. Sie wurde von Anomaly entwickelt, dem Team hinter OpenCode, einem beliebten Open-Source-
00:00:14Coding-Agenten, um das User Interface hinter OpenCode anzutreiben, das von Millionen
00:00:19von Menschen regelmäßig genutzt wird. Aber wie schlägt sich diese neue Bibliothek im Vergleich zu dem anderen beliebten React-
00:00:24Terminal-Interface-Tool, das schon viel länger existiert und viele populäre
00:00:29Coding-Agenten antreibt? Abonnieren Sie und finden wir es heraus!
00:00:35Ink ist die Go-to-Bibliothek für Terminal-Interfaces mit React. Ich habe dazu eigentlich ein
00:00:40Video gemacht, das Sie sich hier ansehen können. Aber sie hat einige Probleme. Zuerst
00:00:44einmal verbrauchen einfache Apps mehr als 50 MB Arbeitsspeicher und haben eine fest programmierte 30-fps-Begrenzung, was
00:00:51für die meisten Anwendungen in Ordnung ist. Wenn Sie jedoch eine App bauen, die große Mengen Text streamt,
00:00:56wie ein Coding-Agent, dann fühlt sich das Ganze durch das Frame-Limit träge an. Also wollte das Team
00:01:00bei Anomaly, das ursprünglich Golang mit Bubble Tea nutzte, um OpenCode zu bauen, es
00:01:06in TypeScript neu schreiben, ohne Ink zu verwenden. Also haben sie OpenTui erschaffen. Ich meine, sie haben OpenTui gekauft. Sie haben es nicht
00:01:13genau von Grund auf neu gebaut, da Commander FX bereits eine Zig-basierte Terminal-
00:01:18bibliothek entwickelte. Also hat Anomaly ihn gesponsert und OpenTui auf seiner Arbeit aufgebaut. Der Zig-Kern erledigt also das gesamte
00:01:24aufwendige Rendering und die TypeScript-Bindings erlauben es Ihnen, UI-Komponenten in React oder Solid zu schreiben. Aber das
00:01:30wirklich Clevere ist das Foreign Function Interface von BUN, das es Ihnen ermöglicht, direkt
00:01:36von TypeScript mit dem nativen Zig-Code ohne große Verzögerung zu sprechen, was OpenTui extrem
00:01:42performant macht. Es nutzt Yoga für Flexbox-Layouts, kommt mit eingebauten Komponenten wie Inputs und Selects,
00:01:47und es gibt sogar ein 3.js-Paket, mit dem Sie WebGPU-3D-Grafiken im Terminal rendern können,
00:01:54was irgendwie irre ist. Tatsächlich, lassen Sie uns OpenTui in Aktion sehen, indem wir es an einer sehr einfachen Demo ausprobieren. Es
00:01:59gibt viele Möglichkeiten, ein grundlegendes OpenTui-Projekt einzurichten. Ich persönlich mag es, BUN CreateTui zu verwenden,
00:02:04da es diesen sehr nützlichen Assistenten bietet, den Sie verwenden können, um Ihrem Projekt einen Namen zu geben und das
00:02:09Template auszuwählen, das Sie verwenden möchten. Ich entscheide mich jetzt für React, aber ich werde später im Video
00:02:13die Unterschiede zwischen diesen drei Templates erklären. Sobald das erledigt ist, erhalten Sie einige Standarddateien
00:02:17mit einem Index, der ein grundlegendes Vollbildprojekt ausführt. Und wenn wir uns den Code ansehen,
00:02:21sehen wir hier in Zeile 15, dass es den CreateCLI-Renderer verwendet, um OpenTuis Rendering-
00:02:27Engine zu nutzen. Und darunter befindet sich CreateRoot, das die App-Komponente rendert. Und wenn Sie
00:02:32mit React vertraut sind, ist das der Code, der es an eine HTML-Datei bindet. Aber weil wir in ein Terminal rendern,
00:02:37hat dieses Projekt keine index.html, sondern verwendet einen benutzerdefinierten React-Reconciler, der
00:02:42Terminalboxen und Text statt HTML-Komponenten verwendet. Darüber haben wir das JSX, das die Box-Komponente
00:02:49und einige Yoga-Flexbox-Props verwendet, um die darin enthaltene Box auszurichten, die eine ASCII-Schriftart und etwas grundlegenden Text rendert.
00:02:55Wenn Sie nicht möchten, dass dies eine Vollbild-App ist, OpenTui unterstützt mehrere Bildschirmmodi.
00:03:00Wir können diesen auf Split-Footer mit einer Footer-Höhe ändern, was den Renderbereich auf eine reservierte
00:03:05Region am unteren Rand des Terminals festlegt. Aber versuchen wir, etwas Interessanteres zu tun, als nur
00:03:10den Bildschirmmodus zu ändern. Hier ist ein einfaches TUI mit etwas Titeltext und einer Namenseingabe. Jetzt schauen Sie sich das an. Mit OpenTui erhalten Sie
00:03:17Responsivität gratis dazu. Egal wie breit mein Terminal ist, alles sieht immer noch gut aus. Und wenn
00:03:21wir uns den Code ansehen, verwendet er eine sehr vertraute React-Syntax. Hier haben wir also ein
00:03:26useState, das den Namen setzt. Und im Input aktualisieren wir den Namen über den on-input-Prop. Und das
00:03:32wird im Text geändert. Eine wirklich coole Sache, die OpenTui macht, ist eine Art Live-Reloading ohne
00:03:37HMR. Wir können also hier sehen, wenn ich den Text in “Goodbye” ändere und dann die Datei speichere, wird er automatisch
00:03:43aktualisiert. Und es ist schön, einen responsiven Input zu haben, aber manchmal wird der Text einfach nicht angezeigt. Das lässt sich
00:03:48durch Hinzufügen einer Breite beheben, was die Dinge viel einfacher macht. Und mit der Box-Komponente haben wir
00:03:52einige sehr coole Props wie “border” und “background color”, die diese Terminal-App sofort aufwerten.
00:03:56Wieder können wir eine ASCII-Schriftart anstelle dieses Texts verwenden, wodurch die Überschrift etwas mehr hervorsticht.
00:04:01Und natürlich gibt es viele ASCII-Schriftarten, aus denen Sie wählen können. Denken Sie daran, weil dies eine Terminal-
00:04:05App und keine Webseite ist, rendert sie nicht alle Schriftarten, die Sie auf Ihrem System haben, sondern nur Dinge, die das
00:04:10Terminal unterstützen. Wir können auch Dinge tun, wie die Ansicht beim Absenden ändern, genau wie bei einer regulären React-
00:04:15App, indem wir den Status beim Absenden ändern und je nach Bedingung unterschiedliches JSX anzeigen. Aber hier ist
00:04:20eine Sache, von der man nicht erwarten würde, dass ein Terminal sie tun kann. Wenn ich meinen Namen absende, blendet sich der andere Status jetzt
00:04:25ein. Und dies wird mit dem useTimeline-Hook von OpenTui gemacht, der verwendet wird, um eine Animations-
00:04:30dauer festzulegen, ein Ziel zu setzen. In diesem Fall hat die Komponente also eine Deckkraft von Null und einen Offset von acht,
00:04:36was bedeutet, dass sie einen oberen Rand unterhalb der Mitte hat. Und hier endet die Animation mit einem Offset von Null
00:04:40und einer Deckkraft von Eins, indem die Offset- und Deckkraftzustände aktualisiert werden, die hier eingerichtet wurden. Und diese
00:04:45Werte werden in den Box-Props aktualisiert. Nun sieht es ein wenig ruckelig aus, weil Terminal-Animationen
00:04:50Zeile für Zeile bewegt werden müssen. Also wie auf einem Raster, aber es ist sehr cool, dass OpenTui es Ihnen ermöglicht, dies
00:04:55so einfach zu tun. Was wirklich cool ist, ist, dass wir alles, was wir bisher gelernt haben, kombinieren können, indem wir das Flexbox-
00:05:00Layout verwenden, um Boxen nebeneinander zu platzieren. Wir haben also einen Input auf der einen Seite und eine andere Box auf der anderen.
00:05:05Und wenn wir beim Absenden in den Input tippen, können wir den Wert animieren, der in die andere Box geht,
00:05:10was ein sehr netter Touch ist. Und von hier aus können wir so viele Dinge mit OpenTui tun,
00:05:14wie Tastaturnavigation mit dem useKeyboard-Hook aktivieren, Systemdaten mit node OS anzeigen,
00:05:19Mausunterstützung, virtualisierte Listen aktivieren. Und da dies alles auf BUN läuft,
00:05:24können Sie Dinge wie BUN SQLite, BUN Postgres verwenden oder externe Informationen auf die gleiche
00:05:28Weise abrufen, wie Sie es auf jeder Website tun. Und das Coole daran ist, nachdem ich meine App kompiliert habe, ja, sie ist 71
00:05:34Megabyte groß, weil sie die BUN-Runtime und die React-Reconciliation enthält. Aber wenn ich sie ausführe,
00:05:39können Sie sehen, dass sie weniger als 50 Megabyte Speicher verbraucht. Und da React so populär ist,
00:05:43kennen LLMs es wie ihre Westentasche. Und so kann das Erstellen von Apps in OpenTui sehr einfach sein,
00:05:49ohne dass man ständig in der Dokumentation nachschlagen muss. Das ist also ein sehr, sehr einfacher
00:05:53Durchlauf von OpenTui. Aber lassen Sie uns ganz an den Anfang des Videos zurückgehen, wo ich versprochen habe, die
00:05:58Unterschiede zwischen React, Solid und Core zu erklären. Es ist ziemlich einfach, wenn man sich mit Front-End-
00:06:02Webentwicklung auskennt. Grundsätzlich rendern sie alle durch denselben Zig-Kern. Das eigentliche Zeichnen auf
00:06:07Ihr Terminal ist also ziemlich identisch. Der einzige Unterschied ist, wie Sie Ihre Komponenten schreiben
00:06:11und wie die Aktualisierungen angewendet werden. React führt also Ihre Komponenten erneut aus und vergleicht einen virtuellen Baum bei jeder
00:06:17Änderung, was ziemlich ähnlich zu dem ist, wie das virtuelle DOM funktioniert. Solid verwendet feinkörnige Aktualisierungen,
00:06:22sodass es nur das aktualisiert, was sich geändert hat. Und Core überspringt das alles, was bedeutet, dass Sie einfach die
00:06:27Objekte direkt mutieren. Auf dem Papier ist React also das Schwerste und Core das Leichteste. Aber in der Praxis
00:06:33ist die Lücke für die meisten Terminal-Apps winzig, weil die ganze Schwerstarbeit vom Zig-Kern erledigt wird,
00:06:38was bedeutet, dass Frameworks in diesem Fall nur eine persönliche Präferenz sind. Aber obwohl eine OpenTui-
00:06:44App mit der gesamten BUN-Runtime und der Framework-spezifischen Reconciliation ausgeliefert wird, falls sie eine hat,
00:06:50sind die Performance und die Größe der App immer noch viel kleiner als bei Ink, aber natürlich nicht so
00:06:56performant wie etwas Natives wie Ratatouille oder Bubble Tea. Aber meiner Meinung nach ist JSX der beste
00:07:02und intuitivste Weg, um eine UI zu komponieren. Und ich nehme lieber den kleinen Speicher- und Größenverlust in Kauf und habe
00:07:09eine viel bessere Entwicklererfahrung beim Bauen einer TUI, als etwas zu haben, das klein in Größe und
00:07:15Speicherverbrauch ist, aber ein Schmerz beim Schreiben und Aktualisieren. Mit diesem Gedanken im Hinterkopf würde ich mich für OpenTui
00:07:20entscheiden, jedes Mal gegenüber Ink, wenn ich jemals dazu komme, eine Terminal-Anwendung zu bauen,
00:07:25was ich verspreche, bald zu tun.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video