JavaScript framework की जंग खत्म हो गई है

और सिर्फ़ एक ही विजेता है.

प्रतिभागी: framework के बीच की जंग JS community में एक गर्म विषय रही है. Backbone, Sencha आदि गायब हो चुके हैं. हैरानी की बात है कि jQuery की अब भी एक बड़ी community है. Angular जैसी चीज़ें भी थीं जो अच्छी तरह नहीं चलीं.

jQuery: सबसे पुराना प्रतिभागी. Browser compatibility की समस्याएँ ठीक करने की वजह से लोकप्रिय हुआ. लेकिन application को scale करना कठिन था. आज यह mainstream नहीं है और सबसे अच्छा विकल्प भी नहीं है.

AngularJS: यह पहले से ही LTS mode में है और रिटायर हो चुका है. Framework ecosystem में यह एक बड़ी छलांग था, और बहुत लोग इसे याद करते हैं. अब इसका maintenance नहीं होता, इसलिए यह अब प्रतिभागी नहीं है.

Angular:

• React से प्रतिस्पर्धा करने के लिए आया. AngularJS के performance और robustness मुद्दों के कारण बहुत से programmers React से प्रभावित थे. Angular ने AngularJS को modernize करने और ES6 improvements का उपयोग करके React से मुकाबला करने की कोशिश की.
• इसकी कठिन learning curve सबसे बड़ी चुनौती थी. इसमें बहुत सारी concepts की ज़रूरत थी. इसने AngularJS की learning curve को विरासत में लिया, लेकिन RxJS या hierarchical dependency injection (DI) जैसी नई कठिनाइयाँ भी थीं.
• एक और चिंता यह थी कि इसने कई वादे तोड़े. उदाहरण के लिए, V2 में server-side rendering (SSR) pages को आसानी से बनाया जा सकता था, लेकिन 2022/2/24 तक यह JS के बिना काम नहीं कर सकता था.
• सबसे बड़ी समस्या fragmentation और version upgrades थीं. Version upgrade करना इतना कठिन था कि users जोखिम लेने से बचते थे. npm site के आँकड़ों में यह दिखता है.

VueJS:

• यह उन developers के लिए जवाब था जो AngularJS से बेहतर performance चाहते थे और Angular की तुलना में ज़्यादा stable और आसान कुछ चाहते थे. Vue का template system AngularJS के बहुत क़रीब था, इसलिए इसने AngularJS की simplicity को बनाए रखा और साथ ही React से ताकत ली.
• लेकिन VueJS में version 1 और 2 में गंभीर समस्याएँ थीं. यह array को अच्छी तरह handle नहीं कर पाता था, और authors ने update algorithm के ग़लत चुनाव के लिए JavaScript को दोष दिया. यह Vuex या Redux जैसी libraries पर निर्भर था.
• यह समस्या version 3 में हल हो गई. लेकिन अपनी ग़लतियों के लिए दूसरों को दोष देना community के अनुकूल नहीं था.

SvelteJS:

• एक बढ़ता हुआ प्रतिद्वंद्वी. यह बड़े वादे कर रहा है. इसका दावा है कि components को imperative language में translate करना इसका मुख्य फ़ायदा है. इनके अनुसार, यह React के declarative statements से बेहतर है.
• इसका उपयोग करना आसान है. लेकिन command translation के परिणामस्वरूप बनने वाले components उतने predictable नहीं हैं जितने दिखते हैं. कुछ मामलों में यह changes को सही ढंग से detect नहीं कर पाता. ऐसी स्थिति में state corrupt हो सकती है और view सही तरह से update नहीं हो सकता. इस समस्या ने इतनी चिंता पैदा की है कि, अतीत के VueJS की तरह, SvelteJS के किसी भी project को justify करना मुश्किल हो जाता है.

StencilJS:

• सख़्ती से कहें तो यह framework नहीं है. इसमें components लिखे जा सकते हैं और फिर उन्हें दूसरे frameworks में convert किया जा सकता है. अभी इसे Angular, React, Vue और Web Components में convert किया जा सकता है.
• यह सवाल उठाता है: क्या यह दूसरे frameworks के code जैसा ही code है? (मूल लेख देखें)

Mitosis:

• शायद आपने इसका नाम नहीं सुना होगा, लेकिन यही वह वजह है जिसने मुझे यह लेख लिखने पर मजबूर किया. यह Angular के निर्माता Misko Hevery का नया framework है.
• इसका उद्देश्य StencilJS जैसा ही है. यह components को कई frameworks में translate करता है.
• इसी तरह यह सवाल उठाता है: क्या यह दूसरे frameworks के code जैसा ही code है? (मूल लेख देखें)

React:

• यह npm repository में 10 साल से ज़्यादा समय से मौजूद सबसे पुराने frameworks में से एक है. यह बहुत बदला है, लेकिन अधिकांशतः पुराने versions के साथ compatible है. हर बदलाव ने इसे बेहतर बनाया है. कुछ लोगों का कहना है कि hooks ने React को एक कहीं बेहतर framework बना दिया.
• इसकी सबसे अच्छी quality hooks या दिखने वाली features में नहीं, बल्कि उसके उलट है. यह JS के latest standards और JSX को अपनाता है. यह अब framework नहीं रह गया है. शायद कभी था ही नहीं. Standards के लिए React की अत्यधिक कोशिश का नतीजा यह है कि यह user code से ख़ुद को हटा देता है.

तो विजेता है...

• JSX. React भी, लेकिन उससे भी ज़्यादा React के पीछे की philosophy. React ख़ुद एक library है. लेकिन इसे Preact या React Native जैसी कई दूसरी libraries से बदला जा सकता है. ध्यान से देखें तो StencilJS या Mitosis, React से बहुत मिलते-जुलते हैं, और यह संयोग नहीं है.
• "सबसे अच्छा framework वह है जो user code से ख़ुद को हटा दे"
• React, JS और JSX का बहुत उपयोग करता है. User code का React से सीधा संबंध नहीं होता. वही code बिना बड़े बदलाव के दूसरे frameworks में भी काम कर सकता है.
• इसलिए बिना किसी संदेह के React framework war का विजेता है.
• क्योंकि यह user code के भीतर का framework नहीं है.

[piriri11]

महत्वपूर्ण बात यह है कि अगर हम बॉब अंकल की इस बात को जितना हो सके उतना अमल में लाकर कोड लिखें कि 'framework से शादी मत करो', तो चाहे React हो, Vue हो या Angular, क्या हम मज़े से development नहीं कर सकते?

[polygon]

marko js का भविष्य कैसा है?
यह eBay द्वारा समर्थित है, इसलिए हाल ही में इसमें दिलचस्पी हुई, लेकिन मूल लेख में इसका ज़िक्र तक नहीं है...

[minhoryang]

React का "काफ़ी बदल गया है, लेकिन ज़्यादातर पुराने versions के साथ compatible है" - मुझे यह compatibility वाला अनुभव ज़्यादा नहीं मिला।
Angular का "fragmentation और version upgrades" - लेकिन इस हिस्से में मुझे काफ़ी smooth अनुभव मिला है।

[roxie]

मेरा मानना है कि JSX को framework नहीं, बल्कि specification के रूप में वर्गीकृत किया जाना चाहिए। आप क्या कहना चाहते हैं, यह समझ में आता है, लेकिन जिस प्रस्तावना की ज़रूरत नहीं थी वह बहुत लंबी है, और सबसे बढ़कर शीर्षक clickbait है। आप ऐसी लेखन-शैली का इस्तेमाल कर रहे हैं जो खुद लेख की quality को कम कर देती है।

[xguru]

सारांश और अच्छे कमेंट्स के लिए धन्यवाद~! लगता है कि ऐसी बातें दूसरे लोगों के लिए भी बहुत मददगार होंगी ;)

[plastic041]

कुल मिलाकर यह मुझे एक अजीब लेख लगता है.

पहले Svelte वाला हिस्सा.
मूल लेख को देखें तो उसमें लिखा है कि array को update करते समय अगर array[0] += 1 इस तरह लिखें तो update नहीं होता, इसलिए यह समस्या है. लेकिन Svelte के आधिकारिक दस्तावेज़ों में भी लिखा है कि array को update होने के लिए reassign करना पड़ता है, और वैसे भी React में भी array इस तरह update नहीं होता, है न?

VueJS वाला हिस्सा भी.
वह Angular से तुलना करते हुए Vue के नुकसान की बात कर रहा है, लेकिन काम करने वाला Angular code और काम न करने वाला Vue code साथ रखकर यह कहना कि Vue उतना अच्छा नहीं है, इसका क्या मतलब है, मुझे समझ नहीं आता.

[pppqqq]

मुझे लगता है कि यह पूरी तरह वाजिब आलोचना है। re-assignment और mutation का फर्क शुरुआती लोगों के लिए भ्रमित करने वाला हिस्सा है, और जब Svelte और Vue दोनों JavaScript जैसी लेकिन अलग syntax का इस्तेमाल करते हैं, तो जो हिस्से अपेक्षा के मुताबिक काम नहीं करते वे आलोचना के योग्य हैं।

खासकर Vue में proxy के जरिए set होने पर state update होती है। पहली नज़र में यह आसान लगता है, लेकिन इसमें फँसने के कई मौके हैं, इसलिए उस हिस्से की आलोचना से मैं भी गहराई से सहमत हूँ।

React इस समस्या में कहीं ज़्यादा मुक्त है, क्योंकि सिर्फ re-assignment से state update नहीं होती, बल्कि setUpdate function को स्पष्ट रूप से call करना पड़ता है। इस तरह यह JavaScript standard के भीतर one-way update देता है, इसलिए array के कुछ हिस्से बदलने और re-assignment के बीच भ्रम होने जैसी समस्या शुरू से ही पैदा नहीं होती।

[tequila]

यह थोड़ा साइड में जुड़ी हुई बात है, लेकिन Vue 3 में इस तरह के array updates reactive तरीके से support होते हैं, इसलिए मुझे लगता है कि यह लेख सिर्फ पुराने version वाले Vue की ही बहुत आलोचना करके बात को मोटे तौर पर आगे बढ़ा देता है...^^;; जबकि React में ऐसे updates न होना बिल्कुल भी कोई छोटी कमी नहीं है, लेकिन लगता है कि लेख उस तरह की विशेषता को ठीक से पकड़कर आगे नहीं बढ़ता। हा हा

[tenshi]

मूल लेख पर भी बहुत सारे कमेंट आए थे, और कई कमेंट्स में अलग-अलग समस्याओं की ओर इशारा किया गया था।

[riddler]

StencilJS और Mitosis के साथ दिए गए "क्या यह दूसरे frameworks के code जैसा code है?" वाले हिस्से की व्याख्या मुझे उलझाने वाली लगी, इसलिए मैंने मूल लेख देखा। लगता है कि वहाँ पूछा जा रहा है कि क्या उन दो frameworks में इस्तेमाल होने वाला code ऐसा नहीं लगता जैसा आपने किसी दूसरे framework में देखा हो?

शायद इसे इस मतलब से लिखा गया है कि इसका code लिखने का तरीका React से मिलता-जुलता है।

[jjpark78]

VueJS के बारे में यह काफ़ी ज़्यादा कठोर आकलन है..

redux पर निर्भरता के मामले में react भी बिल्कुल उससे मुक्त नहीं होगा..

यूज़र स्केल के हिसाब से react का भारी अंतर से नंबर 1 होना सही है,

लेकिन तकनीकी पहलू से इसे react से कमतर प्रोजेक्ट नहीं कहा जा सकता।

[cckn1985]

यहाँ VueJs के बारे में मुख्य तौर पर जो बात कही जा रही है, वह क्या बाहरी लाइब्रेरी पर निर्भरता से ज़्यादा "अपने ही पैदा किए गए समस्याओं की ज़िम्मेदारी JS पर डालने वाला रवैया" नहीं है?

मुझे लगता है कि vueJS के बारे में जनमत अच्छा नहीं है, यह बात सच है.

अगर आप मूल लेख पढ़ें, तो वहाँ Vuex, Redux पर निर्भरता का ज़िक्र करने वाला हिस्सा भी यही कहता है कि VueJS 2 में पैदा हुई समस्याओं को हल करने के लिए Vuex, Redux जैसी लाइब्रेरी 'ज़रूरी' थीं.

[jjpark78]

मूल लेख पर भी इस बारे में पहले से कई टिप्पणियाँ हैं

जटिलता बढ़ने पर, चाहे Vue हो या React, redux जैसी state storage/caching libraries सब "ज़रूरी" हो जाती हैं.

सही है, मूल लेख में VueJS के लिए इसे कमी बताया गया है, और React के बारे में इसका ज़िक्र "जानबूझकर" नहीं किया गया है.

कम्युनिटी का रवैया मेरी नज़र में ज़्यादा महत्वपूर्ण नहीं है..

[road4one]

React में redux अनिवार्य नहीं है। state management के लिए contextAPI या useReducer आदि का इस्तेमाल किया जा सकता है। हालांकि, मुझे नहीं लगता कि इसे React के Vue से बेहतर होने का आधार माना जा सकता है।

[cckn1985]

हाँ haha, कुल मिलाकर यह कोई बहुत अच्छा लेख नहीं लगता।

लेखक ने पहले से ही निष्कर्ष तय कर लिया है और उस निष्कर्ष तक पहुँचने के लिए दूसरे frameworks को नीचा दिखा रहा है।