JavaScript फ़्रेमवर्क का इस्तेमाल करने वाली हर चीज़ की जानकारी रखना मुश्किल हो सकता है. यह दस्तावेज़, JavaScript फ़्रेमवर्क में पिछले एक साल के दौरान हुई हाल की गतिविधियों की खास जानकारी देता है. इनमें से कुछ विषयों पर ज़्यादा चर्चा के लिए, इस साल के Google I/O इवेंट में हुए JavaScript फ़्रेमवर्क ईकोसिस्टम पर नेविगेट करना लेख पढ़ें.
फ़्रेमवर्क के ट्रेंड और सहमति
जैसा कि चार्ट में दिखाया गया है, JavaScript फ़्रेमवर्क में मिलती-जुलती कई सुविधाएं और आर्किटेक्चर शामिल हो रहे हैं. इनमें कॉम्पोनेंट-आधारित आर्किटेक्चर, फ़ाइल-आधारित रूटिंग, और आधुनिक एसएसआर सपोर्ट शामिल है. इस तरह की चीज़ों से पता चलता है कि इकोसिस्टम के परिपक्वता और विकास के साथ-साथ, फ़्रेमवर्क एक-दूसरे से सीखते हैं और सबसे सही तरीकों को अपनाते हैं.
इसके साथ-साथ, हाल के कई रुझान (जैसे कि सर्वर के कॉम्पोनेंट और सटीक प्रतिक्रिया देने के अलग-अलग तरीके) हर तरीके से अलग-अलग फ़्रेमवर्क सेट करते रहते हैं. इन रुझानों को बेहतर ढंग से समझने में मदद करने के लिए, हम एक बार में एक ही फ़्रेमवर्क पर गहराई से काम करते हैं.
Angular
Angular के हाल ही में रिलीज़ हुए कई अहम बदलाव हुए हैं. इनमें सिग्नल, बदले जा सकने वाले व्यू, NgOptimziedImage व्यू, नॉन-डिस्ट्रक्टिव हाइड्रेशन, और पार्शियल हाइड्रेशन शामिल हैं. कुछ हाइलाइट में ये शामिल हैं:
- सिग्नल: सिग्नल एक ऐसा तरीका है जिसका इस्तेमाल किसी ऐप्लिकेशन में स्थिति को ट्रैक करने के लिए कई फ़्रेमवर्क में इस्तेमाल किया जाता है. इसमें अब ऐंगुलर भी शामिल है. ऐंग्युलर सिग्नल की मदद से रनटाइम की परफ़ॉर्मेंस बेहतर हो सकती है. इसमें इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) की मदद से, बदलाव का पता लगाने के दौरान होने वाले कंप्यूटेशन की संख्या को कम किया जा सकता है.
- ऐसे व्यू जिनकी वजह से सिस्टम में बदलाव नहीं किया जा सकता: ऐसे व्यू जिनकी वजह से खास कॉम्पोनेंट, डायरेक्टिव, और पाइप को लोड होने से रोका जा सकता है. उदाहरण के लिए, डिपेंडेंसी को तब तक लोड होने से रोका जा सकता है, जब तक कॉन्टेंट व्यूपोर्ट में शामिल नहीं हो जाता या मुख्य थ्रेड का कुछ समय से इस्तेमाल नहीं किया जाता.
- NgOptimizedImage: NgOptimizedImage, Angular के लिए एक इमेज कॉम्पोनेंट है. इससे, इमेज लोड होने के सबसे सही तरीकों को अपने-आप अपनाया जाता है.
- हाइड्रेशन के बिना: नुकसान न पहुंचाने वाला हाइड्रेशन, सर्वर साइड से रेंडर किए गए एंगुलर ऐप्लिकेशन के डीओएम को क्लाइंट-साइड पर फिर से बनाए जाने पर होने वाले फ़्लिकर को ठीक करता है.
- पार्शियल हाइड्रेशन: एंगुलर टीम जल्द ही पार्शियल हाइड्रेशन की डेवलपर झलक रिलीज़ करेगी. पेज के रेंडर होने पर, ब्राउज़र डिफ़ॉल्ट रूप से पार्शियल हाइड्रेशन की मदद से, पेज का JavaScript लोड नहीं करता. इसके बजाय, जब उपयोगकर्ता पेज से इंटरैक्ट करता है, तब पेज के कुछ हिस्सों में पानी की मात्रा होती है.
एस्ट्रो
Astro एक आधुनिक स्टैटिक साइट बिल्डर है. यह वेब डेवलपमेंट के अपने नए तरीकों की मदद से, काफ़ी तरक्की कर रहा है. परफ़ॉर्मेंस और डेवलपर अनुभव को ध्यान में रखते हुए, Astro ने कई दिलचस्प सुविधाएं और अपडेट रिलीज़ किए हैं:
- एस्ट्रो द्वीप समूह: एस्ट्रो द्वीप समूह की मदद से डेवलपर इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बना सकते हैं. ये कॉम्पोनेंट पेज के बाकी हिस्सों से अलग होते हैं. इससे कुशल अपडेट और बेहतर परफ़ॉर्मेंस चालू होती है.
- हाइब्रिड रेंडरिंग: Astro अब हाइब्रिड रेंडरिंग के साथ काम करता है. इसमें, स्टैटिक साइट जनरेशन और सर्वर साइड रेंडरिंग के फ़ायदे एक साथ इस्तेमाल किए जा सकते हैं. इससे साइट को बेहतर तरीके से रेंडर किया जा सकता है.
- इमेज और तस्वीर कॉम्पोनेंट: एस्ट्रो में इमेज और तस्वीर वाले नए कॉम्पोनेंट लॉन्च किए गए हैं. इनसे इमेज को आसानी से हैंडल किया जा सकता है और ऑटोमैटिक ऑप्टिमाइज़ेशन की सुविधा भी मिलती है.
- ट्रांज़िशन से जुड़ी सहायता देखें: Astro View ट्रांज़िशन एपीआई के लिए पहले से सहायता उपलब्ध कराता है. इससे पेज पर आसानी से ट्रांज़िशन किया जा सकता है.
- Astro Dev टूलबार: Astro Dev टूलबार आपको Astro ऐप्लिकेशन को डीबग करने और ऑप्टिमाइज़ करने के लिए, टूल का एक बेहतरीन सेट उपलब्ध कराता है.
React
पिछले साल, रीऐक्ट सर्वर कॉम्पोनेंट की रिलीज़ में रिऐक्ट कॉम्पोनेंट को इस्तेमाल करने का एक नया तरीका पेश किया गया. तब से रिऐक्ट टीम कई नई सुविधाओं पर काम कर रही है. इनमें रिऐक्ट कंपाइलर और सर्वर ऐक्शन की सुविधाओं के साथ-साथ ये सुविधाएं भी शामिल हैं:
- सर्वर कॉम्पोनेंट: प्रतिक्रिया सर्वर कॉम्पोनेंट ऐसे कॉम्पोनेंट होते हैं जो डेटा फ़ेच करते हैं और क्लाइंट से स्ट्रीम किए जाने से पहले सर्वर पर रेंडर किए जाते हैं. इससे, रेंडरिंग का काम सर्वर पर हो जाता है. साथ ही, क्लाइंट पर शिप किए जाने वाले कोड की मात्रा कम हो जाती है.
- रिऐक्ट कंपाइलर: React Compiler एक ऐसा कंपिलर है, जो कॉम्पोनेंट को अपने-आप याद कर सकता है. इससे पेज की परफ़ॉर्मेंस बेहतर होती है, जिससे बेवजह की री-रेंडरिंग कम होती है. React टीम ने कहा है कि डेवलपर, कोड में बिना कोई बदलाव किए React कंपाइलर का इस्तेमाल कर पाएंगे.
- सर्वर कार्रवाइयां: सर्वर ऐक्शन, क्लाइंट-टू-सर्वर कम्यूनिकेशन की सुविधा देते हैं. सर्वर ऐक्शन से, सर्वर-साइड के ऐसे फ़ंक्शन तय किए जा सकते हैं जिन्हें सीधे आपके React कॉम्पोनेंट से शुरू किया जा सकता है. इससे, मैन्युअल एपीआई कॉल और जटिल स्टेट मैनेजमेंट की ज़रूरत नहीं पड़ती. यह डेटा में बदलाव और फ़ॉर्म सबमिशन जैसी चीज़ों के लिए खास तौर पर उपयोगी हो सकता है.
- ऐसेट लोड हो रही है: React ऐप, स्क्रिप्ट, स्टाइल, फ़ॉन्ट, और इमेज जैसी ऐसेट को पहले से लोड और लोड करने के लिए, डिक्लेरेटिव एपीआई पर काम कर रहा है.
- ऑफ़स्क्रीन रेंडरिंग: प्रतिक्रिया पर ऑफ़स्क्रीन रेंडरिंग पर भी काम किया जा रहा है. ऑफ़स्क्रीन रेंडरिंग, "रिऐक्ट में आने वाली एक सुविधा है. इसकी मदद से, बैकग्राउंड में स्क्रीन रेंडर करने के लिए, अतिरिक्त परफ़ॉर्मेंस ओवरहेड के बिना, स्क्रीन रेंडर की जा सकती है. आपके पास इसे कॉन्टेंट को देखने की अनुमति देने वाली सीएसएस प्रॉपर्टी के ऐसे वर्शन के तौर पर समझने का विकल्प है जो सिर्फ़ DOM एलिमेंट के साथ-साथ 'रिऐक्ट कॉम्पोनेंट' के लिए भी काम करता है."
रीमिक्स करें
फ़ुल स्टैक वेब फ़्रेमवर्क, रीमिक्स की सुविधा, डेवलपर समुदाय में काफ़ी लोकप्रिय हो रही है. रीमिक्स ने कई अहम अपडेट लॉन्च किए हैं. इनमें वेब से जुड़ी बुनियादी चीज़ों पर ध्यान देने और डेवलपर को बेहतर अनुभव देने पर ध्यान दिया गया है:
- रीमिक्स 2.0 की रिलीज़: सितंबर 2023 में रिलीज़ हुई रीमिक्स 2.0 फ़िल्म के फ़्रेमवर्क में काफ़ी सुधार और नई सुविधाएं जोड़ी गई हैं.
- Vite के लिए स्टेबल सहायता: Remix से अब Vite को बेहतर बनाया जा सकता है. यह एक तेज़ और हल्का बिल्ड टूल है, जिससे तेज़ी से डेवलपमेंट बिल्ड और बेहतर परफ़ॉर्मेंस मिलती है.
- एसपीए मोड: रीमिक्स ने एसपीए मोड की शुरुआत की. इससे, प्रोडक्शन में JavaScript सर्वर की ज़रूरत के बिना ही, स्टैटिक साइटें बनाई जा सकती हैं. इसकी मदद से डेवलपर, रीमिक्स की बेहतरीन सुविधाओं का इस्तेमाल कर पाते हैं. जैसे, फ़ाइल पर आधारित रूटिंग, कोड को अपने-आप बांटने जैसी कई सुविधाएं, साइट पर स्टैटिक डिप्लॉयमेंट को आसान बनाए रखती हैं.
Next.js
मई 2023 में Next.js 13.4 की रिलीज़ खास तौर पर ध्यान देने लायक थी, क्योंकि इससे रिएक्ट सर्वर कॉम्पोनेंट, स्ट्रीमिंग, और सस्पेंस के लिए, बिना किसी रुकावट के काम करने की शुरुआत हुई थी. इसके बाद से ही Next.js, नए React API (उदाहरण के लिए, Server Actions) के साथ काम करता रहेगा. साथ ही, Turbopack जैसी पहल की मदद से डेवलपर के अनुभव को बेहतर बनाता रहेगा. अन्य हाइलाइट में ये शामिल हैं:
- ऐप्लिकेशन राऊटर: ऐप्लिकेशन राऊटर, जो Next.js 13.4 में स्टेबल था. यह Next.js ऐप्लिकेशन में रूटिंग और मैनेज करने का एक नया तरीका है. ऐप्लिकेशन राऊटर, Next.js की नई सुविधाओं का इस्तेमाल करने के लिए ज़रूरी है. जैसे, शेयर किए गए लेआउट और नेस्ट की गई रूटिंग. साथ ही, अपने Next.js ऐप्लिकेशन में React सर्वर कॉम्पोनेंट, सस्पेंस, और सर्वर ऐक्शन जैसे नए React API का इस्तेमाल करने के लिए भी यह ज़रूरी है.
Turbopack: फ़िलहाल, पेज रेंडरिंग के इस तरीके को एक्सपेरिमेंट के तौर पर शुरू किया गया है. इसे React के Suspense API पर बनाया गया है. कुछ हद तक प्रीरेंडरिंग, लोड होने वाले स्टैटिक शेल का इस्तेमाल करके पेज को रेंडर करती है. हालांकि, शेल पेज के अंदर डाइनैमिक कॉन्टेंट के लिए "छेद" करता है और यह कॉन्टेंट एसिंक्रोनस रूप से लोड होता है. इससे, कैश किए जा सकने वाले और स्टैटिक पेज की परफ़ॉर्मेंस के फ़ायदे मिलते हैं. साथ ही, पेज के कॉन्टेंट में डाइनैमिक डेटा को भी शामिल किया जा सकता है.
व्यू
Vue के हाल ही में रिलीज़ हुए वर्शन, Vue 3.4 में परफ़ॉर्मेंस से जुड़े कई सुधार शामिल हैं. Vue भी फ़िलहालVue Wapor पर काम कर रहा है. यह परफ़ॉर्मेंस पर भी आधारित है. यहां इस बारे में कुछ हाइलाइट दिया गया है कि इस क्षेत्र में क्या हो रहा है:
- Vue 3.4 रिलीज़ किया गया: सुविधाओं में "पूरी तरह से दोबारा लिखा गया ऐसा पार्सर है जो तेज़ और तेज़ एसएफ़सी कंपाइलेशन है. साथ ही, एक रीफ़ैक्टर रीऐक्टिविटी सिस्टम है, जो फिर से कंप्यूट करने की क्षमता को बेहतर करता है."
- Vue Wapor Mode: Vue Vupor Mode पर काम कर रहा है. यह ऑप्ट-इन और परफ़ॉर्मेंस के आधार पर कंपाइल करने की एक रणनीति है, जो Vue सिंगल फ़ाइल कॉम्पोनेंट के साथ काम करती है. वेपर मोड, ऐसा कोड जनरेट करता है जो Vue Compiler के बनाए हुए कोड से ज़्यादा बेहतर होता है. इसके अलावा, सभी कॉम्पोनेंट के साथ वेपर मोड का इस्तेमाल करने से, Vue वर्चुअल DOM की ज़रूरत नहीं पड़ती. इससे बंडल का साइज़ कम हो जाता है.
- Vue 2 की ईओएल तक पहुंच: Vue 2 की लाइफ़ ऑफ़ लाइफ़ (ईओएल) 31 दिसंबर, 2023 को हुई थी. हालांकि, Vue 2 का अब भी बड़े पैमाने पर इस्तेमाल किया जा रहा है: Vue npm पैकेज का ~50% डाउनलोड, Vue 2 के लिए है.
नक्स्ट
Nuxt, Nuxt 4 की रिलीज़ के करीब है. पिछले साल Nuxt के फ़्रेमवर्क रिलीज़ होने के अलावा, Nuxt मॉड्यूल का नेटवर्क अब करीब 220 मॉड्यूल तक बढ़ चुका है. इस क्षेत्र में हाल ही में हुए कुछ बदलावों में ये शामिल हैं:
- Nuxt 3.x रिलीज़: आम तौर पर, Nuxt को हर महीने माइनर रिलीज़ के लिए भेजा जाता है. इन रिलीज़ की कुछ खास बातों में Vite 5 के लिए सहायता, सिर्फ़ सर्वर वाले और सिर्फ़ क्लाइंट वाले पेजों के लिए सहायता, क्लाइंट-साइड Node.js सहायता, और नेटिव वेब स्ट्रीम शामिल हैं. * Nuxt मॉड्यूल: Nuxt मॉड्यूल नेटवर्क की हाइलाइट में, नए nuxt/fonts मॉड्यूल की रिलीज़ के साथ-साथ nuxt/image और Nuxt DevTools की 1.0 रिलीज़ शामिल हैं. आने वाले समय में आने वाले मॉड्यूल की रिलीज़ में nuxt/scripts, nuxt/hints, nuxt/a11y, और nxt/auth शामिल होंगे.
- सर्वर कॉम्पोनेंट (आइलैंड कॉम्पोनेंट): Nuxt, सर्वर के कॉम्पोनेंट के लिए, काम करने की लगातार कोशिश कर रहा है. फ़िलहाल, यह एक्सपेरिमेंट प्रयोग के तौर पर उपलब्ध है. Nuxt में, सर्वर से रेंडर किए गए इन कॉम्पोनेंट का इस्तेमाल स्टैटिक साइटों के अंदर किया जा सकता है. इससे द्वीपों के आर्किटेक्चर को अपनाना चालू किया जा सकता है.
सॉलिड
Solid अपने मेटा-फ़्रेमवर्क के स्टेबल 1.0 रिलीज़ पर काम कर रहा है SolidStart. SolidStart, बारीकी से प्रतिक्रिया करने की क्षमता, आइसोमॉर्फ़िक रूटिंग, और कई तरह के रेंडरिंग मोड के साथ काम करता है. हाइलाइट में ये शामिल हैं:
- बारीकी से प्रतिक्रिया देना: सॉलिड का रिएक्टिविटी सिस्टम, सटीक अपडेट और बेहतर परफ़ॉर्मेंस दे सकता है. इससे, असरदार रेंडरिंग और स्टेट मैनेजमेंट चालू हो जाता है.
- आइसोमॉर्फ़िक रूटिंग: SolidStart, रूटिंग के लिए एक यूनिफ़ाइड तरीके उपलब्ध कराता है. इससे डेवलपर को ऐसे रूट तय करने में मदद मिलती है जो क्लाइंट और सर्वर, दोनों पर बिना किसी रुकावट के काम करते हों.
- लचीले रेंडरिंग मोड: SolidStart सर्वर-साइड रेंडरिंग, स्टैटिक साइट जनरेशन, और क्लाइंट-साइड रेंडरिंग समेत कई रेंडरिंग मोड के साथ काम करता है. इससे डेवलपर को अपने ऐप्लिकेशन के लिए सबसे सही तरीका चुनने का विकल्प मिलता है.
स्वेल्टे
पिछले साल, Svelte टीम का पूरा ध्यान Svelte 5 की रिलीज़ रिलीज़ पर है. यह एक बहुत अहम कदम है. अन्य हाइलाइट में ये शामिल हैं:
- Svelte 5 आ रहा है: Svelte 5 में Svelte कंपाइलर और रनटाइम" का "फिर से लिखें" का इस्तेमाल किया गया है. साथ ही, Svelte 5 में Runes का सिद्धांत भी पेश किया गया है.
- रन का एलान किया गया: Svelte 5 में रन आने वाले समय की सुविधा है. "रन्स सार्वभौमिक, सूक्ष्म प्रतिक्रियाशीलता को अनलॉक करते हैं... रनों के साथ, प्रतिक्रिया आपकी .svelte फ़ाइलों की सीमाओं से आगे बढ़ती है... Svelte 5 की प्रतिक्रिया, सिग्नल से नियंत्रित होती है - हालांकि, [अन्य फ़्रेमवर्क के उलट], Svelte 5 में सिग्नल, लागू करने की एक बुनियादी जानकारी हैं, न कि ऐसी चीज़ जिसके साथ आप सीधे तौर पर इंटरैक्ट करते हैं."
- SvelteKit 2 रिलीज़ किया गया: SvelteKit Svelte के लिए मेटा-फ़्रेमवर्क है. इस रिलीज़ में, शलो रूटिंग और Vite 5 के साथ काम करने की सुविधा शामिल है.
Chrome ऑरोरा
Chrome Aurora Google की एक टीम है जो अलग-अलग ओपन-सोर्स वेब फ़्रेमवर्क के साथ मिलकर, उपयोगकर्ताओं के अनुभव को बेहतर बनाने के लिए काम करती है. खास तौर पर, इससे वेब पर उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. यहां कुछ पहल के बारे में बताया गया है जिन पर हमने पिछले साल योगदान दिया है:
- इमेज (next/image, NgOptimizedImage, और nuxt/image)
- फ़ॉन्ट यूटिलिटी (next/font, nuxt/fonts, और unjs/fontaine (Vite प्लगिन)
- स्क्रिप्ट लोड हो रही है (next/script और nuxt/scripts)
- तीसरे पक्ष की स्क्रिप्ट लोड होना (next/third-party, nuxt/third-party, और Angular के YouTube और Google Maps कॉम्पोनेंट)
- रेंडरिंग: (एंगुलर एसएसआर / हाइड्रेशन)
नतीजा
JavaScript फ़्रेमवर्क का नेटवर्क तेज़ी से लगातार बेहतर हो रहा है. साथ ही, हर फ़्रेमवर्क अपने-आप में कुछ नया और बेहतर कर रहा है. चाहे आपको Angular, React, और Vue जैसे पहले से मौजूद फ़्रेमवर्क की नई सुविधाओं में दिलचस्पी हो या फिर आपको ऐस्ट्रो, रीमिक्स, और सॉलिड जैसे नए विकल्पों को एक्सप्लोर करना हो, आपके लिए कुछ नया करना मुमकिन नहीं है.
डेवलपर के तौर पर, इन सुधारों के बारे में जानकारी रखने से, हमें अपने प्रोजेक्ट के लिए फ़्रेमवर्क चुनते समय बेहतर फ़ैसले लेने में मदद मिलती है. हर फ़्रेमवर्क की खूबियों और खास सुविधाओं को समझकर, हम अपने प्रोजेक्ट की ज़रूरतों और डेवलपमेंट से जुड़ी प्राथमिकताओं के हिसाब से सबसे सही फ़्रेमवर्क चुन सकते हैं.
हमें उम्मीद है कि इस खास जानकारी से आपको JavaScript फ़्रेमवर्क की मौजूदा स्थिति की झलक मिली होगी. इस ब्लॉग पोस्ट में बताए गए विषयों के बारे में ज़्यादा जानने के लिए, Google I/O से जुड़े बातचीत को ज़रूर देखें. कोडिंग करते रहें!