Transcript
00:00:00Voici OpenTui, une bibliothèque propulsée par Zig pour créer des interfaces terminal avec des liaisons
00:00:04pour React, Solid et FreeJS, afin de créer des TUI performantes comme vous le faites pour le web
00:00:09applications. Elle a été créée par Anomaly, l'équipe derrière OpenCode, qui est un open source populaire
00:00:14agent de codage, pour alimenter l'interface utilisateur d'OpenCode, utilisé par des millions de
00:00:19personnes régulièrement. Mais comment cette nouvelle bibliothèque se compare-t-elle aux autres React populaires
00:00:24outil d'interface terminal qui existe depuis bien plus longtemps et qui est utilisé pour alimenter de nombreux populaires
00:00:29agents de codage ? Abonnez-vous et découvrons-le !
00:00:35Ink est la bibliothèque de référence pour créer des interfaces terminal avec React. J'ai d'ailleurs fait une
00:00:40vidéo à ce sujet que vous pouvez consulter ici. Mais elle pose quelques problèmes. Tout d'abord,
00:00:44une application simple utilise plus de 50 Mo de mémoire et a une limite de 30 fps codée en dur, ce qui
00:00:51convient à la plupart des applications. Mais si vous créez une application qui diffuse beaucoup de texte,
00:00:56comme un agent de codage, alors la limite d'images rend l'ensemble lent. L'équipe
00:01:00d'Anomaly, qui utilisait initialement Golang avec Bubble Tea pour construire OpenCode, a voulu le réécrire
00:01:06en TypeScript sans utiliser Ink. Ils ont donc créé OpenTui. Enfin, ils ont acheté OpenTui. Ils n'ont pas
00:01:13exactement tout construit de zéro car Commander FX construisait déjà une bibliothèque de terminal basée sur Zig.
00:01:18Anomaly l'a donc sponsorisé et a construit OpenTui sur son travail. Le cœur Zig effectue donc tout le
00:01:24rendu lourd et les liaisons TypeScript vous permettent d'écrire des composants UI en React ou Solid. Mais la
00:01:30partie vraiment ingénieuse est l'interface de fonction étrangère BUN, qui permet de parler directement
00:01:36du TypeScript vers le code natif Zig sans trop de délai, ce qui rend OpenTui super
00:01:42performant. Il utilise Yoga pour les mises en page Flexbox, est livré avec des composants intégrés comme des entrées et des sélections,
00:01:47et il existe même un package 3.js qui vous permet de rendre des graphiques 3D web GPU à l'intérieur du terminal,
00:01:54ce qui est assez fou. En fait, voyons OpenTui en action en l'essayant sur une démo très simple. Il y a
00:01:59de nombreuses façons de configurer un projet OpenTui de base. Personnellement, j'aime utiliser BUN CreateTui
00:02:04car il vous donne cet assistant très utile que vous pouvez utiliser pour donner un nom à votre projet et choisir
00:02:09le modèle que vous souhaitez utiliser. Je vais choisir React, mais j'expliquerai plus tard dans la vidéo,
00:02:13les différences entre ces trois modèles. Une fois cela fait, vous obtenez des fichiers standard
00:02:17avec un index qui exécute un projet plein écran de base. Et si nous regardons le code,
00:02:21nous pouvons voir ici à la ligne 15 qu'il utilise le moteur de rendu CreateCLI pour utiliser le moteur de rendu d'OpenTui
00:02:27moteur. Et en dessous, il y a CreateRoot, qui rend le composant d'application. Et si vous êtes familier
00:02:32avec React, c'est le code qui le monte dans un fichier HTML. Mais comme nous effectuons le rendu dans un terminal,
00:02:37ce projet n'a pas d'index.html, mais utilise plutôt un réconciliateur React personnalisé qui utilise
00:02:42des boîtes de terminal et du texte au lieu de composants HTML. Au-dessus, nous avons le JSX qui utilise le composant de boîte
00:02:49et quelques props yoga flexbox pour aligner la boîte testée à l'intérieur qui rend une police ASCII et du texte de base.
00:02:55Maintenant, si vous ne vouliez pas que ce soit une application plein écran, OpenTui prend en charge plusieurs modes d'écran.
00:03:00Et nous pouvons changer celui-ci en pied de page divisé avec une hauteur de pied de page, qui épingle le rendu à une zone réservée
00:03:05en bas du terminal. Mais essayons de faire quelque chose d'un peu plus intéressant que simplement changer
00:03:10le mode d'écran. Voici un Tui de base avec du texte de titre et une saisie de nom. Maintenant, regardez ça. Avec OpenTui, vous obtenez
00:03:17la réactivité gratuitement. Donc, peu importe la largeur de mon terminal, tout reste beau. Et si
00:03:21nous jetons un coup d'œil au code, il utilise une syntaxe React très familière. Donc ici, nous avons un use
00:03:26state qui définit le nom. Et dans l'input, nous mettons à jour le nom sur la prop on input. Et cela
00:03:32est modifié dans le texte. Maintenant, une chose vraiment cool qu'OpenTui fait est une sorte de rechargement en direct sans le
00:03:37HMR. Donc on peut voir ici, si je change le texte en “goodbye” et que j'enregistre le fichier, il est automatiquement
00:03:43mis à jour. Et c'est agréable d'avoir une entrée réactive, mais parfois le texte ne s'affiche tout simplement pas. Cela peut
00:03:48être corrigé en ajoutant une largeur, ce qui facilite grandement les choses. Et avec le composant de boîte, nous avons
00:03:52des props très cool comme la bordure et la couleur d'arrière-plan, qui améliorent immédiatement cette application de terminal.
00:03:56Encore une fois, nous pouvons utiliser une police ASCII au lieu de ce texte, ce qui fait ressortir un peu plus le titre.
00:04:01Et bien sûr, il existe de nombreuses polices ASCII que vous pouvez choisir. Rappelez-vous, parce que c'est une application de
00:04:05terminal, pas une page web, elle ne rend pas toutes les polices que vous avez sur votre système, juste celles qui prennent en charge le
00:04:10terminal. Nous pouvons aussi faire des choses comme changer la vue lors de la soumission de la même manière qu'avec une application React régulière
00:04:15en changeant l'état lors de la soumission et en affichant un JSX différent basé sur cette condition. Mais voici
00:04:20une chose que vous ne vous attendriez pas à ce qu'un terminal puisse faire. Si je soumets mon nom, l'autre état s'efface maintenant
00:04:25pour prendre place. Et cela est fait avec le hook use timeline d'OpenTui, qui est utilisé pour définir une animation
00:04:30durée, définir une cible. Donc dans ce cas, le composant a une opacité de zéro et un décalage de huit,
00:04:36ce qui signifie qu'il a une marge supérieure sous le centre. Et ici, l'animation se termine avec un décalage de zéro
00:04:40et une opacité de un en mettant à jour les états de décalage et d'opacité qui ont été définis ici. Et ces
00:04:45valeurs sont mises à jour dans les props de la boîte. Maintenant, cela semble un peu saccadé car les animations de terminal doivent
00:04:50se déplacer ligne par ligne. Donc, un peu comme sur une grille, mais c'est très cool qu'OpenTui vous permette de faire cela
00:04:55si facilement. Ce qui est vraiment cool, c'est que nous pouvons combiner tout ce que nous avons appris jusqu'à présent en utilisant la mise en page flexbox
00:05:00pour mettre des boîtes les unes à côté des autres. Donc nous avons une entrée d'un côté et une autre boîte de l'autre.
00:05:05Et si nous tapons dans l'entrée lors de la soumission, nous pouvons animer la valeur entrant dans l'autre boîte,
00:05:10ce qui est une très belle touche. Et à partir de là, nous pouvons faire tellement de choses avec OpenTui,
00:05:14comme activer la navigation au clavier avec le hook use keyboard, afficher les données système en utilisant node OS,
00:05:19activer le support de la souris, des listes virtualisées. Et parce que tout cela fonctionne au-dessus de BUN,
00:05:24vous pouvez utiliser des choses comme BUN SQLite, BUN Postgres, ou récupérer des informations externes de la même
00:05:28manière que vous le faites sur n'importe quel site web. Et la chose cool à ce sujet est qu'après avoir compilé mon application, oui, elle fait 71
00:05:34mégaoctets car elle inclut le runtime BUN et la réconciliation React. Mais quand je l'exécute,
00:05:39vous pouvez voir qu'elle utilise moins de 50 mégaoctets de mémoire. Et parce que React est si populaire,
00:05:43les LLM le connaissent comme leur poche. Et donc, créer des applications dans OpenTui peut être très simple
00:05:49sans avoir besoin de faire des allers-retours dans la documentation. Donc, c'est un très, très simple
00:05:53aperçu d'OpenTui. Mais revenons plus tôt dans la vidéo, où j'ai promis d'expliquer
00:05:58la différence entre React, Solid et Core. C'est assez simple si vous connaissez le développement web front-end.
00:06:02En gros, ils effectuent tous le rendu via exactement le même noyau ZIC. Donc le dessin réel sur
00:06:07votre terminal est assez identique. La seule différence est la façon dont vous écrivez vos composants
00:06:11et comment les mises à jour sont appliquées. Donc React réexécute vos composants et différencie un arbre virtuel à chaque
00:06:17changement, ce qui est assez similaire à la façon dont fonctionne le DOM virtuel. Solid utilise des mises à jour à grain fin,
00:06:22donc il ne met à jour que ce qui a changé. Et Core saute tout cela, ce qui signifie que vous mutez simplement
00:06:27les objets directement. Donc, sur le papier, React est le plus lourd et Core est le plus léger. Mais dans la pratique,
00:06:33pour la plupart des applications de terminal, l'écart est infime car tout le travail lourd est effectué par le noyau ZIC,
00:06:38ce qui signifie que dans ce cas, les frameworks sont juste une préférence personnelle. Mais même si une application OpenTui
00:06:44est livrée avec tout le runtime BUN et la réconciliation spécifique au framework, si elle en a une,
00:06:50la performance et la taille de l'application sont toujours beaucoup plus petites qu'Ink, mais bien sûr pas aussi
00:06:56performantes que quelque chose de natif comme Ratatouille ou Bubble Tea. Mais à mon avis, JSX est la meilleure
00:07:02et la façon la plus intuitive de composer n'importe quelle interface utilisateur. Et je préférerais prendre le léger coût en mémoire et en taille et avoir
00:07:09une bien meilleure expérience de développeur en construisant un Tui plutôt que d'avoir quelque chose de léger en taille et léger
00:07:15en utilisation mémoire, mais une douleur à écrire et à mettre à jour. Donc, avec cela à l'esprit, je choisirais OpenTui
00:07:20plutôt qu'Ink à chaque fois, si jamais je finis par construire une application de terminal,
00:07:25ce que je promets de faire bientôt.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video