Hyper - वेब मानकों पर केंद्रित React का विकल्प

 (nuejs.org)
17 पॉइंट द्वारा GN⁺ 2025-05-16 | 7 टिप्पणियां | WhatsApp पर शेयर करें
  • HTML, CSS, JavaScript वेब मानकों पर केंद्रित UI भाषा, जो मौजूदा फ्रेमवर्क्स की तुलना में अधिक संक्षिप्त और विस्तारयोग्य इंटरफ़ेस संरचना का लक्ष्य रखती है
  • React के विपरीत logic और style को अलग रखता है, और CSS-in-JS के बजाय बाहरी design system files का उपयोग करके maintainability बेहतर बनाता है
  • जटिल components लागू करते समय भी code सरल रहता है और JS bundle size छोटा होता है, उदाहरण: sorting/filtering features वाली table केवल 3.9KB
  • design theme switching भी सिर्फ 32 लाइनों के CSS बदलाव से संभव, component बदले बिना design system बदला जा सकता है
  • Bun आधारित और तेज bundling, standards compatibility, तथा AI models के लिए UI generation foundation जैसी खूबियों वाला भविष्य-उन्मुख framework

Introducing Hyper

  • Hyper HTML/CSS/JS वेब मानकों के आधार पर UI बनाने के लिए एक नई markup language है
  • जटिल UI को भी साफ़ और सरल syntax में व्यक्त किया जा सकता है
  • React के विपरीत यह presentation, logic, और style को अलग करके बनाता है

Project goals

  1. Standards first: HTML, CSS, JS मानकों पर आधारित संरचना
  2. Simplicity: जटिल abstraction के बिना सरल composition structure
  3. Design Systems: designers और developers दोनों के लिए अलग design layer
  4. Scalability: application बड़ा होने पर भी सरलता बनाए रखना

React vs Hyper तुलना

  • React जहाँ logic, structure, और style के मिश्रित monolithic structure की ओर झुकता है, वहीं Hyper शुद्ध view layer पर केंद्रित है
  • Simple components
    • एक ही table component को Modern React, Old-school React, और Hyper में लागू करने के उदाहरण दिए गए हैं
      • आधुनिक React: ShadCN, Material UI, Tailwind Catalyst जैसी component libraries से UI बनता है, और AI tools support इसकी ताकत है
      • पुराना React: शुरुआती दौर का तरीका, जिसमें style और component code अलग रहते थे
      • Hyper: वेब मानकों का पालन करने वाला संक्षिप्त उदाहरण, जो structure और style को स्पष्ट रूप से अलग करता है
    • Hyper अनावश्यक classes और state hooks के बिना शुद्ध HTML-आधारित structure और सरल methods से अभिव्यक्त होता है
    • सरल उदाहरणों में अंतर मामूली है, लेकिन जटिलता बढ़ने पर Hyper और React के approaches का अंतर बड़ा हो जाता है
  • Complex components
    • ShadCN-आधारित React: JS bundle 91.3KB
    • Hyper: 3.9KB (1.2KB + 2.7KB)
    • Hyper न्यूनतम JS से चलता है और maintenance आसान बनाता है
  • Design systems
    • Hyper में dashboard style बदलते समय component code बदले बिना सिर्फ 32 लाइनों का CSS जोड़कर पूरी theme बदली जा सकती है
    • जबकि React-आधारित ShadCN में हर theme के लिए हज़ारों लाइनों का TSX code दोहराया जाता है
    • Hyper की design system philosophy
      • CSS-in-JS, Tailwind, inline style आदि के जरिए design और component के बीच coupling को पूरी तरह हटाना
      • सभी typography और style rules को बाहरी CSS files में केंद्रित करना
      • पूरी reusability, centralized design system, और zero boilerplate हासिल करना
  • Scalability
    • Hyper का तरीका project बड़ा होने पर भी सरलता बनाए रखता है
    • structure सरल है, code size छोटा है

अक्सर पूछे जाने वाले सवाल

  • Svelte, Vue से क्या अंतर है?
    • दोनों React से हल्के हैं, लेकिन फिर भी scoped CSS, Tailwind आदि के जरिए design और component coupling को बढ़ावा देते हैं
    • Hyper पूरी तरह अलग design system को अनिवार्य करता है
  • What is Nue?
    • Nue, Nue JS templates पर आधारित website/webapp generator है
    • Hyper, Nue JS का अगली पीढ़ी का evolution product है, और दोनों एक ही monorepo के तहत managed हैं
    • Hyperlink (आगामी) एक router solution है, जो वेब मानकों से करीबी जुड़ाव को दर्शाता है
  • मौजूदा frameworks से क्या अंतर है?
    • Hyper का मुख्य लक्ष्य नई abstraction layer जोड़ना नहीं, बल्कि standards की ओर वापसी और सरलता की बहाली है
    • सिर्फ CSS, HTML, JS ज्ञान से professional apps बनाए जा सकते हैं
  • वेब मानक क्यों महत्वपूर्ण हैं?
    • timeless technology: दशकों तक मान्य रहने वाली तकनीकी नींव
    • sustainable product: framework बदले बिना लंबे समय तक maintain किया जा सकने वाला product

आगे की योजना

  • Full-stack applications (3 महीने के भीतर)
    • routing, component communication, DB integration, cloud deployment, और design theme switching features जोड़ने की योजना
  • Generative UIs (4~5 महीने के भीतर)
    • HTML/CSS संयोजन पर आधारित AI द्वारा जनरेट किए जा सकने वाले UI framework
    • accessibility, responsiveness, और documentation अपने-आप शामिल होंगे
  • React को कैसे हरा सकता है?
    • लक्ष्य धीरे-धीरे share हासिल करना है
    • चरणबद्ध रूप से developers की सोच बदलना
    • सरल और maintainable structure देना
    • मूलभूत तकनीकों की ताकत साबित करते हुए बढ़ना
  • नाम की समानता का मुद्दा?
    • इसी नाम के Rust और Electron projects पहले से मौजूद हैं, लेकिन संदर्भ अलग होने के कारण कोई समस्या नहीं

अंतिम लक्ष्य

  • विघटनकारी रूप से सरल web stack बनाना ही अंतिम लक्ष्य है

संबंधित पढ़ाई

7 टिप्पणियां

 
youngkwon 2025-05-17

आम तौर पर इतिहास को नज़रअंदाज़ करते हुए, पुराना पहिया फिर से ले आए हैं।
कुछ आइडिया बुरे नहीं लगते (Markdown इस्तेमाल करने का तरीका), लेकिन दूसरे tools की तुलना में कोई बड़ा फ़ायदा नहीं दिखता।

Hacker News पर हो रही चर्चा को देखें तो
फ़िलहाल developer की React को लेकर समझ भी काफ़ी कम है।
 
aer0700 2025-05-17

लगता है कि निकट भविष्य में इसका नाम बदल जाएगा... जैसा कि लेख में भी लिखा है, एक ओवरलैप होने वाला Electron प्रोजेक्ट पहले से है... क्या सच में यह नाम इस्तेमाल करना ज़रूरी था?
 
fastkoder 2025-05-16

कोड की तुलना देख कर लगता है कि काफ़ी टोकन बचेंगे।
 
ng0301 2025-05-16

svelte सबसे बेहतरीन
 
hyeonseok 2025-06-14

svelte सबसे बेहतरीन
 
sixmen 2025-05-16

लोगों की पसंद अलग-अलग हो सकती है, लेकिन मुझे Angular, Vue वगैरह (इन libraries? markup? सहित) के <li for> की तुलना में, vanilla JS से हैंडल किया गया JSX का .map((item) => <li>) ज़्यादा पसंद है।
 
schang124 2025-05-16

मैं भी इस बात से सहमत हूँ। जब HTML में जो logic जोड़ा जाता है वह vanilla न होकर अपना खुद का syntax होता है, तो यह एक बड़ी बाधा बन जाता है। साधारण UI implementation में कोई समस्या नहीं होती, लेकिन जब logic जटिल हो जाता है, तब development flexibility में फर्क आता है और learning curve को भी नज़रअंदाज़ नहीं किया जा सकता।