- Claude Code का उपयोग करके Hatchet टीम ने टर्मिनल-आधारित UI (TUI) को तेज़ी से विकसित करने का एक उदाहरण साझा किया
- Charm stack (Bubble Tea, Lip Gloss, Huh) का उपयोग कर React-स्तर की component-आधारित development और consistent styling लागू की गई
- मौजूदा web UI के समान API का उपयोग करते हुए भी text-centric, information-dense interface के ज़रिये developer efficiency बढ़ाई गई
- Claude Code ने tmux session चलाकर testing को automate किया, जिससे iterative development और stability सुनिश्चित करने में बड़ी भूमिका निभाई
- सिर्फ 2 दिनों में पूरा हुआ Hatchet TUI, LLM-आधारित development से वास्तविक productivity improvement दिखाने वाले उदाहरण के रूप में आंका गया
TUI development की प्रेरणा
- Hatchet टीम k9s जैसा TUI चाहती थी, और उपयोगकर्ताओं ने इसे web UI से तेज़ और अधिक सहज बताया
- उपयोगकर्ता feedback में यह राय भी थी कि “CLI और TUI कहीं बेहतर perform करते हैं”
- TUI में code वाले उसी environment में workflow को visualize और run किया जा सकता है, इसलिए tab switching की ज़रूरत नहीं होती
- Hatchet के मुख्य उपयोगकर्ता IDE के भीतर काम करने वाले developers हैं, इसलिए लक्ष्य terminal के भीतर workflow management experience देना था
तकनीकी stack
- सामान्य frontend stack (React, Tailwind आदि) के समकक्ष Charm stack का उपयोग किया गया
- प्रमुख libraries: Bubble Tea, Lip Gloss, Huh
- इसका maintenance Charm टीम करती है, और documentation व examples भरपूर हैं
- Lip Gloss और Huh theme का उपयोग करके पूरे TUI में consistent style लागू की गई
- Hatchet CLI commands में भी वही theme दोबारा उपयोग की गई, जिससे एकीकृत user experience मिला
- Bubble Tea के बाहर custom composition कुछ कठिन है, लेकिन React-आधारित rendering engine को सीधे implement करने से यह कहीं अधिक सरल है
testing approach
- Claude Code ने terminal-आधारित tools को सीधे चलाकर tests किए
tmux capture-pane का उपयोग करके rendered view को capture किया गया और सही output की जाँच की गई
- यह तरीका पहले test pass के automation के लिए बहुत प्रभावी रहा, और views बढ़ने पर भी rendering को स्थिर रूप से verify किया जा सका
- इसके बाद manual testing और unit testing को साथ में चलाकर स्थिर iterative development loop बनाया गया
- Claude Code ASCII environment में repetitive work के लिए optimized है, इसलिए test feedback loop तेज़ी से converge हुआ
कुशल development environment की संरचना
- Claude Code ने मौजूदा Hatchet frontend implementation को संदर्भ के रूप में इस्तेमाल कर development efficiency बढ़ाई
- React-आधारित सरल component structure और OpenAPI spec का उपयोग करके स्पष्ट boundaries तय की गईं
- auto-generated REST API client के माध्यम से spec-driven development संभव हुआ
- DAG-आधारित renderer को implement करना सबसे कठिन हिस्सा था, लेकिन
- mermaid-ascii को संदर्भ बनाकर ASCII graph renderer सफलतापूर्वक बनाया गया
- यह पूर्ण नहीं है, फिर भी काम करने योग्य DAG visualization feature हासिल किया गया
परिणाम और सीख
- कुल development अवधि लगभग 2 दिन रही, जो पिछले frontend refactoring की तुलना में कहीं तेज़ और अधिक स्थिर थी
- Claude Code के साथ किया गया development गैर-यादृच्छिक और वास्तविक productivity improvement दिखाने वाले पहले उदाहरण के रूप में आंका गया
- Hatchet टीम आगे भी non-core path features में LLM-आधारित development का उपयोग धीरे-धीरे बढ़ाने की योजना बना रही है
- मुख्य सीख है छोटे feedback loops, modularity, spec-driven design, और continuous testing का महत्व
- पूरा हुआ Hatchet TUI https://tui.hatchet.run पर सार्वजनिक है, और उपयोगकर्ता feedback एकत्र किया जा रहा है
अभी कोई टिप्पणी नहीं है.