Show HN: Nue – React बटन से भी हल्का ऐप

 (nuejs.org)
2 पॉइंट द्वारा GN⁺ 2025-04-02 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • Nue का कहना है कि सिर्फ HTML, CSS, JavaScript से भी पूरा ऐप React/ShadCN बटन से छोटा बनाया जा सकता है, और यह आधुनिक वेब डेवलपमेंट के भारी डिफ़ॉल्ट्स पर सवाल उठाता है
  • उसी ऐप में Rust computation engine और Event Sourcing जोड़कर 150,000 रिकॉर्ड्स पर instant search और operations दिखाने वाला डेमो दिया गया है
  • JavaScript engine maximum call stack exception के कारण रुक गया, लेकिन Rust/WASM version को उसी पैमाने के data को तुरंत प्रोसेस करने वाले उदाहरण के रूप में पेश किया गया है
  • React idioms की जगह model-first approach, testable functions, static types, और minimal dependencies के ज़रिए ऐप संरचना को सरल बनाने की कोशिश की गई है
  • design·UX engineers के लिए 40,000+ lines के design system, React hooks, और utility classes की बजाय modern CSS से सीधे नियंत्रण पर ज़ोर दिया गया है

React बटन से भी हल्का ऐप डेमो

  • Nue डेमो दिखाता है कि HTML, CSS, JavaScript को web standards के क़रीब इस्तेमाल करने पर ऐप कितना छोटा हो सकता है
  • यह बात प्रमुखता से सामने रखी गई है कि पूरे ऐप का आकार React/ShadCN button से भी छोटा है
  • बड़े पैमाने वाले version में उसी ऐप में Rust computation engine और Event Sourcing जोड़ा गया है
    • लक्ष्य 150,000 रिकॉर्ड्स पर instant search और अन्य operations करने वाली संरचना बनाना है
    • JavaScript version engine maximum call stack exception के कारण बंद हो गया
    • Rust/WASM डेमो में 150,000 रिकॉर्ड्स पर instant operations देखे जा सकते हैं

Nue जिस डेवलपमेंट शैली को लक्ष्य बना रहा है

  • Rust, Go, JavaScript engineers के लिए React idioms की बजाय traditional software patterns और अलग model layer के इस्तेमाल की दिशा पर ज़ोर दिया गया है
    • Nue का केंद्र model-first approach है
    • यह सरल, testable functions, static types, और कम dependencies को प्राथमिकता देता है
  • design engineers के लिए React patterns और 40,000+ lines के design system की बजाय modern CSS से अधिक सरल system बनाया जा सकता है
    • उदाहरण के तौर पर @layers, CSS variables, calc() का उल्लेख किया गया है
    • typography और spacing को सीधे नियंत्रित करने के तरीके को महत्व दिया गया है
  • UX engineers के लिए React hooks और utility classes की बाधा कम करके user experience को सीधे संभालने वाला workflow प्रस्तावित किया गया है
  • Nue web standards पर केंद्रित एक web framework है और इस समय सक्रिय रूप से विकसित किया जा रहा है
  • एक single button का पूरे application से भारी होना आधुनिक web development की छिपी हुई जटिलता का उदाहरण माना गया है, और इसके जवाब में अधिक साफ़ और मज़बूत architecture के साथ tools और frameworks को फिर से बनाने की कोशिश की जा रही है

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

2 टिप्पणियां

 
GN⁺ 2025-04-02
Hacker News की रायें

  • Nue पर अलग-अलग तरीकों से गुस्सा दिखाने वाली प्रतिक्रियाएं देखकर लगता है कि लोग React पर बहुत ज्यादा निर्भर हैं और बड़े मुद्दे को मिस कर रहे हैं
    समस्या यह है कि विशाल frameworks ने वेब को भयानक रूप से धीला ढेर बना दिया है
    DevOps/SRE के तौर पर मैं रोज़ ऐसे services से निपटता हूं, और पहली load 10 सेकंड से कम में होने वाली चीज़ ढूंढना लगभग असंभव है
    host से 5ms के भीतर peered 10G connection पर भी अगर simple home dashboard या notes page 10 सेकंड से ज्यादा लेता है, और उसका 95% JavaScript है, तो इसका मतलब है कि आज के web apps तेज़ browser engines और कम हो चुकी expectations के सहारे बहुत बड़े bloat तक पहुंच चुके हैं
    मुझे उम्मीद नहीं कि Nue इसे revolutionary तरीके से बदल देगा, लेकिन कम से कम इसे support तो किया जा सकता है

    • bloat React जैसे विशाल frameworks से नहीं आता
      खास तौर पर, pnpm create vite -t react-ts से बना default React project compressed size में करीब 60KB है, और pnpm create vite -t vue-ts से बना Vue project करीब 25KB है
      React/Vue से बने mid-sized projects भी images छोड़कर compressed 200–300KB के आसपास थे, और असली 2G-limited स्थिति में भी usable थे
      एक simple dashboard को 10 सेकंड से ज्यादा लेने वाला garbage किसी भी framework से बनाया जा सकता है, और framework के बिना भी
      उल्टा, jQuery-style में third-party dependency पूरी की पूरी खींच लाने से, असल में इस्तेमाल होने वाले 1KB के लिए 200KB download कराने जैसा, हाल और खराब हो सकता है
      article की comparison भी बेवकूफाना है, क्योंकि React का पूरा view “एक React button” से कहीं ज्यादा बड़ा होता जाने वाली structure नहीं, बल्कि initial cost + marginal cost वाली structure है
    • मुझे यह पसंद नहीं कि ज्यादातर React sites bloated हो गई हैं, और कई साल primary framework के तौर पर इस्तेमाल करने के बाद अब मैं इसे लगभग तभी इस्तेमाल करता हूं जब client स्पष्ट रूप से मांगे, लेकिन “विशाल frameworks ने वेब को धीमा बना दिया” कहना accurate नहीं लगता
      web bloat का ज्यादातर हिस्सा developers के optimization, lazy loading, cache और dependencies कम करने पर समय न लगाने से आता है, और उन सैकड़ों tracking scripts से भी, जिन्हें हर site revenue निचोड़ने के लिए जोड़ती है
      कुछ साल पहले 50 trackers वाली site देखकर shock लगा था, अब सैकड़ों हों तो भी आश्चर्य नहीं होता
      अगर developer ध्यान दे तो React site भी बहुत तेज़ हो सकती है, और React जो bloat जोड़ता है वह आम तौर पर core issue नहीं होता
      OP की post button को 78KB बताती है, लेकिन ऐसा इसलिए है क्योंकि एक button के लिए पूरा React load किया जाता है
      page पर सैकड़ों buttons हों तो 78KB सैकड़ों बार fetch नहीं होता, इसलिए complex React site इतनी inefficient भी नहीं होती
      DevOps engineer के तौर पर जानना चाहूंगा कि उस slowness में framework और actual app code का कितना-कितना हिस्सा है, क्या इस पर कोई statistics है
    • आप क्या कहना चाहते हैं समझ आता है, लेकिन लगता है थोड़ा exaggerated है
      काम पर हमारे पास एक Vue 3 SPA dashboard है जिसमें 20 से ज्यादा widgets अपने-अपने requests भेजते हैं और compressed JavaScript 2MB से ज्यादा transfer होता है, फिर भी सारे caches बंद करने पर भी पूरी तरह 2 सेकंड के अंदर load हो जाता है
      “interactive” नहीं, बल्कि full load की बात है
      मैं मानता हूं कि वेब हल्का हो सकता है, लेकिन “पहली load 10 सेकंड से कम में मिलना लगभग असंभव” exaggeration जैसा लगता है, और वजह framework होना या न होना भी नहीं हो सकती
      संदर्भ के लिए, यह web app कोई best-of-the-best team ने भी नहीं बनाया
    • “Nue पर गुस्सा लोग” से ज्यादा, मुझे ऐसे लोग दिखते हैं जो evidence या justification के बिना बहुत व्यापक दावे कर रहे हैं
      SRE से मदद तभी मांगी जाती है जब कुछ गलत हो, इसलिए अच्छी तरह चलती चीज़ें न दिखना कोई चौंकाने वाली बात नहीं
      जिसने धीमे projects में काम किया है वह जानता है कि आखिर में जिम्मेदारी management की होती है, और codebase इतना बड़ा हो जाए कि किसी को उसे ठीक कर पाना संभव न लगे, यह भी management की जिम्मेदारी है
      आप सोच सकते हैं कि अगर हमें पहले बुलाया होता तो हम बेहतर design बनाते, लेकिन वह भी आखिर management की ही जिम्मेदारी है
      अगर सब लोग विशाल frameworks छोड़ दें और software perfect और stable हो जाए, तो यह भी सोचने लायक है कि SRE फिर आखिर करेगा क्या
      technology को अलग नजरिए से देखें तो आज आपके पास जो skills हैं, उनके सामने बड़ा opportunity दिखता है
    • असली सवाल यह है कि क्या हमें सच में framework की जरूरत है
      pure JavaScript भी काफी अच्छी तरह काम करता है, और कभी-कभी JavaScript बिल्कुल न हो तो और बेहतर होता है
      हाल के SAP project में SAP के सामने एक Java layer थी और उसके ऊपर एक विशाल Angular app था; application का मकसद physical goods की B2B sales manage करना था और stock availability बेहद important थी, इसलिए लगभग हर screen SAP layer को full request भेजती थी
      मोटे “rich client” की जरूरत क्यों थी, यह साफ नहीं था, और PHP शायद कहीं ज्यादा बेहतर fit होता
      hype हटाकर देखें तो large organizations frameworks को uniform coding practices और developers को आसानी से replace करने के साधन की तरह इस्तेमाल करती लगती हैं, लेकिन इस लक्ष्य को हासिल करने के बेहतर तरीके निश्चित रूप से होंगे

  • React को replace करने की बात यह वाला हिस्सा कर रहा है: https://nuejs.org/docs/view.html
    यह शुरुआती Angular 2.0 जैसी दिशा वाला untyped view layer है, और model file बस JavaScript है
    यानी कहीं भी types नहीं हैं; अगर Vue.js side को target कर रहे हैं तो शायद ठीक हो सकता है
    लेकिन आज React users में ज्यादातर TypeScript इस्तेमाल करते हैं, और view layer में first-class type support बहुत उपयोगी है, इसलिए marketing direction को शायद थोड़ा उस तरफ बदलना बेहतर होगा

    • लेखक हूं: सही है, Nue का view layer untyped है
      यह intentional design है
      React ecosystem developers से CSS तक में TypeScript लगवा रहा है, और वह overkill है
      Nue उल्टा approach लेता है: presentation layer को साफ और semantic बनाए रखना, web standards से काफी काम करवाना, और Rust या Go जैसे static types को उस business logic में चमकने देना जो सच में important है
    • Vue TypeScript में लिखा गया है, और template layer तक first-class support देता है
    • ज्यादातर लोग TypeScript इसलिए इस्तेमाल करते हैं क्योंकि React apps business logic से उलझकर 200,000 lines के code तक बढ़ गए हैं, और इसके बिना manage करना असंभव हो गया है
      अगर अलग दिशा में जाएं तो इसकी जरूरत कम हो जाती है
    • मेरे जानने वाले ज्यादातर Vue developers भी इसी वजह से TypeScript इस्तेमाल करते हैं
    • Vue में TypeScript support और usage बहुत बड़ा है
      Vue खुद TS में लिखा गया है, और ज्यादातर बड़ी libraries भी TS में लिखी गई हैं
      /r/vuejs और अपने experience के आधार पर भी मुझे लगता है कि ज्यादातर नए apps ऐसे ही हैं

  • बढ़िया तो है, लेकिन मैंने Svelte और SvelteKit में निवेश किया है
    खिलौना उदाहरण नहीं, बल्कि दर्जनों forms और screens वाला एक काफ़ी बड़ा app बनाने के बाद React को फिर से देखा, और समझ आया कि hooks समझ लेने पर React इतना मुश्किल नहीं है, मेरे use case में हल्का भी है, और अब यह boring technology है—जो उल्टा अच्छा है
    ecosystem भी बहुत बड़ा है, इसलिए React Query जैसी libraries को replace करना मुश्किल है—यह भी एक उदाहरण है
    इसलिए अगले कुछ सालों तक React इस्तेमाल करते रहने का सोच रहा हूं, खासकर इसलिए कि React compiler पहले से Facebook और Instagram के अंदर इस्तेमाल हो रहा है और public beta में आ चुका है
    React Native भी React compiler को support करता है, और मुझे लगता है कि यह support गायब होने के बजाय और बेहतर होगा
    React compiler आने के बाद Svelte के runes या उसके compile होने वाले स्वभाव के लिए ज्यादा जगह नहीं बचेगी
    runes के बाद Svelte में JavaScript लिखने के बजाय JavaScript जैसी दिखने वाली notation लिखने जैसा लगता है, जो मुझे पसंद नहीं; और React compiler के बाद complex situations में hooks hell की जरूरत भी काफी कम हो जाएगी

    • TanStack Query पहले वाला React Query है और Svelte के साथ पूरी तरह compatible है: https://tanstack.com/query/latest
      React को 10 साल और Svelte को पिछले 3 साल से इस्तेमाल कर रहा हूं; Svelte निश्चित रूप से नई पीढ़ी का framework है और मेरे लिए React से कहीं बेहतर fit बैठता है
      हालांकि ecosystem के आसपास rough edges हैं, इससे सहमत हूं
    • Svelte निश्चित रूप से बहुत कम verbose है और कम code की जरूरत पड़ती है
      performance भी काफी बेहतर है, लेकिन कई use cases में यह महत्वपूर्ण नहीं हो सकता
      downside यह है कि Svelte असल में एक language है, इसलिए इसे ठीक से चलाने के लिए compiler और dedicated developer tools चाहिए
      इसे maintain और evolve करने में काफी मेहनत लगती है
      मुझे Svelte पसंद है और कई सालों से लगभग रोज इस्तेमाल करता आया हूं, लेकिन team को अपनी vision हासिल करने और long-term में maintain करने के लिए और resources की जरूरत है
      Apple Music जैसी जगहों पर Apple जैसी बड़ी company का Svelte adopt करना, लेकिन उसमें invest न करना, हैरान करता है
      https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c321...
    • Svelte पर shift करके देखा तो React की तुलना में 2–3 गुना कम complex लगा
    • मैंने React class components के समय सीखा था, लेकिन हाल में फिर देखा तो functional components और hooks पूरी तरह उलझाऊ लगे
      किसी को पता है कि यह इस दिशा में क्यों गया?

  • Nue एक web framework है जिसे modern web development की bloating काटने के लिए बनाया जा रहा है
    अगर एक Vite/ShadCN/Tailwind button पूरी SPA से 40% ज्यादा भारी है, तो अब अलग तरीके से करने का समय है
    इसे ground up से फिर बनाया जा रहा है, web standards-first है और bloat हटाने की कोशिश करता है
    यह उन frontend architects, design engineers और UX लोगों के लिए है जो ज्यादा simple और sane workflow चाहते हैं
    अभी काम चल रहा है, लेकिन बदलाव आ रहा है

    • अब तो मुझे यह भी नहीं समझ आता कि हर चीज SPA क्यों होनी चाहिए
      यह complex और inefficient है, इसलिए इसे Photoshop या web के लिए Ableton Live जैसी बहुत interactive applications के लिए ही इस्तेमाल होना चाहिए; और ऐसे apps बहुत कम होने चाहिए
      मैं frontend developer नहीं हूं, लेकिन अगर समस्या “1.5 लाख records पर instant search और operations” है, तो paradigm पर दोबारा सोचना सही लगता है
    • Nue बहुत cool project है, लेकिन अगर चाहते हैं कि लोग इसे seriously लें, तो aggressive marketing को थोड़ा नरम करना बेहतर होगा
      demo देखकर लगता है कि React button comparison में करीब 100KB का WASM code consider नहीं किया गया
      फिर भी project के लिए बधाई, और पूरी vision कैसे पूरी होगी यह सच में जानने की उत्सुकता है
    • “X का एक button SPA से 40% भारी है” वाली तुलना fair नहीं लगती
      framework शामिल करने पर weight बढ़ता है, लेकिन ऐसे frameworks single component के लिए intended नहीं होते
      समान शर्तों पर compare करना होगा तभी fair comparison होगा
      तो उत्सुकता है कि Nue htmx या modern web standards का उपयोग करने वाले दूसरे frameworks की तुलना में कैसा है
    • समझ नहीं आता Vite का discussion से क्या लेना-देना है
      यह वैसा ही है जैसे कहना कि Visual Studio आधारित UI ज्यादा हल्का है
    • marketing copy कमाल की है, लेकिन यह कैसे काम करता है इस पर कोई detail नहीं है

  • इस marketing post की जगह technical details होतीं तो अच्छा होता
    उदाहरण के लिए, change tracking में कौन-सा तरीका इस्तेमाल होता है—Vue-style proxy या React-style full recomputation—यह जानना चाहूंगा
    साथ ही 1.5 लाख objects पर JavaScript “stack से overflow” हो जाता है, यह बात भी समझ नहीं आती
    मैंने खुद 1.5 लाख objects की list बनाकर देखी; profiler में array और objects करीब 14MB लेते हैं, और index के बिना list.find() चलाने पर भी stack overflow नहीं होता
    index इस्तेमाल करें तो शायद यह बहुत तेज होगा और WASM या complex machinery की जरूरत नहीं होगी
    JavaScript इतना धीमा नहीं है
    बड़े array में numbers की multiplication जैसी numeric computation करें तो code compile होकर काफी तेजी से चलता है

    • author के demo code में list.push(...objects) जैसा कुछ इस्तेमाल हो रहा है, और वजह वही लगती है
      spread operator से बहुत सारे arguments, जैसे करीब 1 लाख, एक बार में method को pass करने पर JavaScript में हर argument call stack पर चढ़ता है, इसलिए stack overflow होना known है

  • ज्यादातर नए frameworks अपने समय के ज्यादा mature विकल्पों के हल्के alternative के रूप में शुरू होते हैं
    सिर्फ यही adopt करने की वजह नहीं बनती
    users जिस bloat की मांग करते हैं वह सब add करने और वे सभी edge cases handle करने के बाद जिन्हें अभी आप समझ नहीं पाए हैं, 10 साल बाद फिर post करें
    तब भी अगर यह एक React button से हल्का रहा, तो वह newsworthy होगा

    • तो क्या मतलब यह है कि existing incumbent बनने तक कुछ भी discussion के लायक नहीं, और कोई existing incumbent से बेहतर होने का दावा भी नहीं कर सकता?
      अगर existing players से compare करके बात नहीं कर सकते, तो समझ नहीं आता कि bloat होने लायक जरूरी users कैसे जुटाएंगे
    • जब React पहली बार आया था, इस site की प्रतिक्रिया ज्यादातर negative थी; इससे लगता है कि React को कभी हल्का नहीं माना गया
    • Solid.js bundle size के मामले में बहुत अच्छा कर रहा है
      गिनने के तरीके पर निर्भर करता है, लेकिन 6–9 साल से develop हो रहा है और अब भी बहुत slim है
    • मुझे भी कुछ ऐसा ही लगता है
      कम requirements वाले widget को web components के रूप में deploy करने के लिए Svelte इस्तेमाल करना शुरू किया था, और उस use case के लिए यह शानदार था

  • प्रोजेक्ट को देखते हुए मेरे मन में आए सवाल
    डेमो https://mpa.nuejs.org/app/ क्यों प्रभावशाली है, यह समझ नहीं आ रहा, और मुझे लगता है कि React से भी वैसी ही performance वाला webapp बनाया जा सकता है
    होम पर code example जल्दी देखना चाहता था, लेकिन docs खंगालनी पड़ीं, और https://nuejs.org/docs/view.html#clean-html-templating देखकर लगा कि क्या यह Svelte से प्रेरित है
    यह भी जानना चाहता हूं कि Nue दूसरी technologies, खासकर pure HTML/JavaScript, की तुलना में कैसे ज्यादा fast और lightweight है
    अगर यह समझाना है कि Nue इस्तेमाल करने लायक framework है, तो इसे HTML+JS से ज्यादा simple, या कम से कम React से ज्यादा simple होना चाहिए; markup और logic HTML जैसी पहले से जानी-पहचानी चीजों के करीब होने चाहिए ताकि समझना आसान हो; और अच्छे build times व HMR के साथ developer experience अच्छा होना चाहिए
    यह हिस्सा ठीक किया हुआ लगता है
    साथ ही कम overhead, WASM-based है या नहीं, virtual DOM, server islands जैसी technical advantages और metrics भी दिखाने चाहिए
    esbuild ने यह काम अच्छी तरह किया था: https://esbuild.github.io/

    • main page का सार शायद यह था कि यह छोटा है, यानी “React button से हल्का”, और बहुत सारे records संभाल सकता है, यानी “उस point से बहुत आगे तक जहां JavaScript और React stack overflow से मर जाते हैं”

  • अगर इस project के लेखक का कहना यह है कि React का button React library के बिना काम नहीं करता, इसलिए 73KB है, तो यह कमजोर criticism है
    क्योंकि उस समय app bundle में React library बाकी हिस्सों में भी reuse होती है
    यह लोगों को mislead करता है, और दावा इतना सतही है कि लगभग अपमान जैसा लगता है

    • लेखक हूं
      स्पष्ट कर दूं कि ShadCN/Vite की official docs (https://ui.shadcn.com/docs/installation/vite) से install किया गया एक button, पूरे Nue SPA से कहीं ज्यादा भारी हो जाता है
      मकसद React developers पर हमला करना नहीं, बल्कि यह दिखाना है कि web standards कैसे bloating की बाजी पलट सकते हैं
      सोच रहा हूं कि इस तुलना को बेहतर तरीके से कैसे व्यक्त किया जा सकता है

  • approach सचमुच पसंद आई, लेकिन demo https://mpa.nuejs.org/app/ iOS Safari पर ठीक से काम नहीं करता
    हालांकि हो सकता है मेरी version 16.7.8 पुरानी हो
    scroll नहीं होता, layout और buttons में अजीब line breaks हैं, और native search button custom design button के अंदर फंस गया है, जिससे 2 icons हो गए हैं

    • iOS Safari में scroll अब काम कर रहा है
      quick fix था
    • लेखक वही trick फिर से इस्तेमाल कर रहा है जो उसने लगभग सभी पुराने submissions में इस्तेमाल की थी
      comparison वाले component से बहुत कम features implement करो, फिर दिखाओ कि अपना solution कितना छोटा है
    • Android के Chrome और Firefox में भी page height और vertical scrolling टूटे हुए हैं
      Firefox में comment box menu bar के नीचे छिप जाता है
      शायद page height को percentage या vh से force किया गया है, जिससे आमतौर पर बचना चाहिए
      अगर force करना जरूरी हो, तो svh या dvh इस्तेमाल करना चाहिए

  • सोच रहा हूं कि code examples हैं या नहीं
    थोड़ा ढूंढा, लेकिन मिले नहीं, और मुझे लगता है कि नए framework पर blog post में code examples सबसे पहले होने चाहिए

    • अभी दो examples हैं
      nue create simple-blog content-focused website दिखाता है
      nue create simple-mpa आज का SPA demo है, जहां MPA का मतलब multi-page application है
      यह दिखाता है कि client-side routing और view transitions कैसे content-heavy pages और app-like views को सहजता से जोड़ते हैं
      source code यहां है: https://github.com/nuejs/nue/tree/master/packages/examples
    • मैंने भी 5 मिनट तक click करके देखा, लेकिन code कैसा दिखता है यह दिखाने वाला sample नहीं मिला