- Le cas du développement rapide par l’équipe de Hatchet d’une interface utilisateur en terminal (TUI) à l’aide de Claude Code est présenté
- Avec la stack Charm (Bubble Tea, Lip Gloss, Huh), ils ont mis en œuvre un développement basé sur des composants au niveau de React ainsi qu’un style cohérent
- Tout en utilisant la même API que l’interface web existante, ils ont amélioré l’efficacité des développeurs grâce à une interface centrée sur le texte et riche en informations
- Claude Code lance des sessions tmux et automatise les tests, jouant ainsi un rôle majeur dans le développement itératif et la fiabilité
- Le TUI de Hatchet, achevé en seulement 2 jours, est considéré comme un exemple montrant une amélioration concrète de la productivité grâce au développement basé sur les LLM
Motivation pour développer un TUI
- L’équipe de Hatchet voulait un TUI similaire à k9s, et les utilisateurs l’ont jugé plus rapide et plus intuitif que l’interface web
- Parmi les retours utilisateurs, certains indiquaient que « le CLI et le TUI sont bien plus performants »
- Un TUI permet de visualiser et exécuter les workflows dans le même environnement que le code, sans avoir à changer d’onglet
- Comme les principaux utilisateurs de Hatchet sont des développeurs travaillant dans leur IDE, l’objectif était d’offrir une expérience de gestion des workflows dans le terminal
Stack technique
- Ils ont utilisé la stack Charm, équivalent des stacks frontend classiques (React, Tailwind, etc.)
- Bibliothèques principales : Bubble Tea, Lip Gloss, Huh
- Elles sont maintenues par l’équipe de Charm, avec une documentation et des exemples abondants
- Lip Gloss et les thèmes Huh ont permis d’appliquer un style cohérent à l’ensemble du TUI
- Le même thème a aussi été réutilisé dans les commandes du CLI Hatchet pour offrir une expérience utilisateur unifiée
- Les personnalisations en dehors de Bubble Tea sont un peu plus difficiles, mais cela reste bien plus simple que d’implémenter soi-même un moteur de rendu basé sur React
Approche de test
- Claude Code exécute directement les outils en terminal pour réaliser les tests
- Il utilise
tmux capture-pane pour capturer la vue rendue et vérifier que la sortie est correcte
- Cette méthode s’est révélée très efficace pour automatiser la première passe de test, avec une vérification du rendu qui reste fiable même lorsque le nombre de vues augmente
- Des tests manuels et des tests unitaires ont ensuite été menés en parallèle afin de créer une boucle de développement itérative stable
- Claude Code est particulièrement optimisé pour les tâches répétitives dans un environnement ASCII, ce qui permet une convergence rapide de la boucle de feedback de test
Mettre en place un environnement de développement efficace
- Claude Code a amélioré l’efficacité du développement en s’appuyant sur l’implémentation frontend existante de Hatchet
- Une structure de composants simple basée sur React et la spécification OpenAPI ont permis de définir clairement les frontières
- Un client REST API généré automatiquement a rendu possible un développement guidé par la spécification
- L’implémentation du moteur de rendu basé sur un DAG a été la partie la plus difficile, mais
- en s’appuyant sur mermaid-ascii, ils ont réussi à implémenter un moteur de rendu de graphes ASCII
- sans être parfait, il permet de disposer d’une fonctionnalité opérationnelle de visualisation de DAG
Résultats et enseignements
- La durée totale du développement a été d’environ 2 jours, bien plus rapide et plus stable qu’un précédent refactoring frontend
- Le développement avec Claude Code est considéré comme le premier cas montrant une amélioration réelle et non aléatoire de la productivité
- L’équipe de Hatchet prévoit à l’avenir d’étendre progressivement le développement basé sur les LLM aux fonctionnalités hors chemin critique
- La principale leçon est l’importance de boucles de feedback courtes, de la modularité, d’une conception guidée par les spécifications et de tests continus
- Le TUI finalisé de Hatchet est disponible sur https://tui.hatchet.run, et l’équipe y recueille les retours des utilisateurs
Aucun commentaire pour le moment.