JavaScript फ़्रेमवर्क के साथ होने वाली हर चीज़ को ध्यान में रखना मुश्किल हो सकता है. इस दस्तावेज़ में, पिछले एक साल में JavaScript फ़्रेमवर्क के पारिस्थितिक तंत्र में हुई हाल की घटनाओं के बारे में कम शब्दों में जानकारी दी गई है. इनमें से कुछ विषयों के बारे में ज़्यादा जानकारी के लिए, इस साल के Google I/O इवेंट में JavaScript फ़्रेमवर्क के पारिस्थितिक तंत्र को नेविगेट करना से जुड़ी बातचीत देखें.
फ़्रेमवर्क के रुझान और कन्वर्ज़न
चार्ट में दिखाए गए मुताबिक, JavaScript फ़्रेमवर्क में कई मिलती-जुलती सुविधाएं और आर्किटेक्चर मौजूद हैं. इनमें कॉम्पोनेंट-आधारित आर्किटेक्चर, फ़ाइल-आधारित रूटिंग, और आधुनिक एसएसआर (सर्वर साइड रेंडरिंग) सहायता शामिल है. यह कन्वर्ज़न, पारिस्थितिकी प्रणाली के परिपक्व होने और बेहतर होने का उदाहरण है. ऐसा इसलिए, क्योंकि फ़्रेमवर्क एक-दूसरे से सीखते हैं और सबसे सही तरीके अपनाते हैं.
साथ ही, हाल ही के कई रुझानों (जैसे कि सर्वर कॉम्पोनेंट और बेहतर तरीके से प्रतिक्रिया देने के अलग-अलग तरीके) की वजह से, अलग-अलग फ़्रेमवर्क अलग-अलग दिखते हैं. इन रुझानों को बेहतर तरीके से समझने के लिए, हम एक बार में एक फ़्रेमवर्क पर ध्यान देते हैं.
Angular
Angular के हाल ही में रिलीज़ किए गए वर्शन में कई अहम बदलाव किए गए हैं. इनमें सिग्नल, देर से लोड होने वाले व्यू, NgOptimziedImage, नॉन-डिस्ट्रक्टिव हाइड्रेशन, और आंशिक हाइड्रेशन शामिल हैं. कुछ हाइलाइट:
- सिग्नल: सिग्नल एक ऐसा तरीका है जिसका इस्तेमाल, ऐप्लिकेशन में स्थिति को ट्रैक करने के लिए कई फ़्रेमवर्क (अब Angular भी शामिल है) करते हैं. बदलाव का पता लगाने के दौरान होने वाली गणनाओं की संख्या को कम करके, ऐंगल सिग्नल, रनटाइम परफ़ॉर्मेंस को बेहतर बना सकते हैं. इसमें इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) भी शामिल है.
- देर से लोड होने वाले व्यू: देर से लोड होने वाले व्यू की मदद से, कुछ खास कॉम्पोनेंट, डायरेक्टिव, और पाइप को लोड होने में देरी की जा सकती है. उदाहरण के लिए, किसी डिपेंडेंसी को तब तक लोड करने से रोका जा सकता है, जब तक कॉन्टेंट व्यूपोर्ट में न आ जाए या मुख्य थ्रेड के खाली होने तक.
- NgOptimizedImage: NgOptimizedImage, Angular के लिए एक इमेज कॉम्पोनेंट है. यह इमेज लोड करने के सबसे सही तरीकों को अपने-आप अपनाता है.
- नॉन-डिस्ट्रक्टिव हाइड्रेशन: नॉन-डिस्ट्रक्टिव हाइड्रेशन, फ़्लिकर को ठीक करता है. यह तब होता है, जब सर्वर साइड पर रेंडर किए गए Angular ऐप्लिकेशन के डीओएम को क्लाइंट-साइड पर फिर से बनाया जाता है.
- कुछ हद तक हाइड्रेशन: Angular टीम जल्द ही, कुछ हद तक हाइड्रेशन की सुविधा के डेवलपर के लिए झलक जारी करेगी. आंशिक हाइड्रेशन की सुविधा का इस्तेमाल करने पर, पेज रेंडर होने पर ब्राउज़र डिफ़ॉल्ट रूप से पेज का कोई भी JavaScript लोड नहीं करता. इसके बजाय, जब उपयोगकर्ता पेज से इंटरैक्ट करता है, तो पेज के कुछ हिस्सों को हाइड्रेट किया जाता है.
एस्ट्रो
Astro एक आधुनिक स्टैटिक साइट बिल्डर है. यह वेब डेवलपमेंट के लिए अपने नए तरीके से लोगों का ध्यान खींच रहा है. परफ़ॉर्मेंस और डेवलपर के अनुभव पर फ़ोकस करते हुए, Astro ने कई दिलचस्प सुविधाएं और अपडेट रिलीज़ किए हैं:
- Astro Islands: Astro Islands की मदद से, डेवलपर ऐसे इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट बना सकते हैं जो पेज के बाकी हिस्सों से अलग होते हैं. इससे, बेहतर अपडेट और बेहतर परफ़ॉर्मेंस मिलती है.
- हाइब्रिड रेंडरिंग: Astro अब हाइब्रिड रेंडरिंग के साथ काम करता है. इससे, स्टैटिक साइट जनरेशन और सर्वर साइड रेंडरिंग के फ़ायदों को मिला-जुलाकर, बेहतर सुविधाएं मिलती हैं.
- इमेज और फ़ोटो कॉम्पोनेंट: Astro ने नए इमेज और फ़ोटो कॉम्पोनेंट जोड़े हैं. इनकी मदद से, इमेज को आसानी से मैनेज किया जा सकता है और इन्हें अपने-आप ऑप्टिमाइज़ किया जा सकता है.
- व्यू ट्रांज़िशन के लिए सहायता: Astro में व्यू ट्रांज़िशन एपीआई के लिए पहले से सहायता उपलब्ध है. इससे, पेज ट्रांज़िशन आसानी से और बिना किसी रुकावट के होते हैं.
- Astro Dev टूलबार: Astro Dev टूलबार, Astro ऐप्लिकेशन को डीबग करने और उन्हें ऑप्टिमाइज़ करने के लिए, टूल का एक बेहतरीन सेट उपलब्ध कराता है.
React
पिछले साल, React सर्वर कॉम्पोनेंट की रिलीज़ के साथ, React कॉम्पोनेंट के लिए एक नया तरीका शुरू किया गया था. तब से, React टीम कई नई सुविधाओं पर काम कर रही है. इनमें React कंपाइलर और सर्वर ऐक्शन की सुविधाएं शामिल हैं. साथ ही, ये भी शामिल हैं:.
- सर्वर कॉम्पोनेंट: React सर्वर कॉम्पोनेंट ऐसे कॉम्पोनेंट होते हैं जो डेटा फ़ेच करते हैं और क्लाइंट पर स्ट्रीम किए जाने से पहले, सर्वर पर रेंडर किए जाते हैं. इससे रेंडरिंग का काम, सर्वर पर चला जाता है और क्लाइंट को भेजे जाने वाले कोड की संख्या कम हो जाती है.
- React कंपाइलर: React कंपाइलर एक compiler है, जो कॉम्पोनेंट को अपने-आप मेमोइज़ कर सकता है. इससे, ज़रूरत के बिना कॉन्टेंट को फिर से रेंडर करने की संख्या कम हो जाती है और परफ़ॉर्मेंस बेहतर होती है. React टीम ने बताया है कि डेवलपर, कोड में कोई बदलाव किए बिना React compiler का इस्तेमाल कर पाएंगे.
- सर्वर ऐक्शन: सर्वर ऐक्शन, क्लाइंट से सर्वर के बीच कम्यूनिकेशन की सुविधा चालू करते हैं. सर्वर ऐक्शन की मदद से, ऐसे सर्वर साइड फ़ंक्शन तय किए जा सकते हैं जिन्हें सीधे अपने React कॉम्पोनेंट से शुरू किया जा सकता है. इससे, मैन्युअल एपीआई कॉल और जटिल स्टेट मैनेजमेंट की ज़रूरत नहीं पड़ती. यह खास तौर पर, डेटा में बदलाव और फ़ॉर्म सबमिशन जैसी चीज़ों के लिए मददगार हो सकता है.
- ऐसेट लोड करना: React, स्क्रिप्ट, स्टाइल, फ़ॉन्ट, और इमेज जैसी ऐसेट को पहले से लोड करने और लोड करने के लिए, एलान वाले एपीआई पर काम कर रहा है.
- ऑफ़स्क्रीन रेंडरिंग: React, ऑफ़स्क्रीन रेंडरिंग पर भी काम कर रहा है. ऑफ़स्क्रीन रेंडरिंग, "React में आने वाली एक नई सुविधा है. इसकी मदद से, बैकग्राउंड में स्क्रीन को रेंडर किया जा सकता है. ऐसा करने पर, परफ़ॉर्मेंस पर कोई असर नहीं पड़ता. इसे content-visibility CSS प्रॉपर्टी के एक वर्शन के तौर पर देखा जा सकता है. यह सिर्फ़ डीओएम एलिमेंट के लिए ही नहीं, बल्कि React कॉम्पोनेंट के लिए भी काम करता है."
रीमिक्स
Remix एक फ़ुल-स्टैक वेब फ़्रेमवर्क है, जो डेवलपर कम्यूनिटी में लोकप्रिय हो रहा है. Remix में वेब के बुनियादी सिद्धांतों और डेवलपर के अनुभव को बेहतर बनाने पर फ़ोकस किया गया है. इसलिए, इसमें कई अहम अपडेट किए गए हैं:
- Remix 2.0 रिलीज़: Remix 2.0, सितंबर 2023 में रिलीज़ हुआ था. इसमें फ़्रेमवर्क में कई अहम सुधार और नई सुविधाएं जोड़ी गई थीं.
- Vite के लिए बेहतर सहायता: Remix अब Vite के लिए बेहतर सहायता देता है. यह एक तेज़ और हल्का बिल्ड टूल है. इससे डेवलपमेंट बिल्ड तेज़ी से होते हैं और परफ़ॉर्मेंस बेहतर होती है.
- एसपीए मोड: Remix में एसपीए मोड की सुविधा जोड़ी गई है. इसकी मदद से, पूरी तरह से स्टैटिक साइटें बनाई जा सकती हैं. इसके लिए, प्रोडक्शन में JavaScript सर्वर की ज़रूरत नहीं होती. इससे डेवलपर, स्टैटिक साइट को आसानी से डिप्लॉय करने के साथ-साथ, फ़ाइल-आधारित रूटिंग, कोड के अपने-आप बंटने जैसी Remix की बेहतर सुविधाओं का इस्तेमाल कर सकते हैं.
Next.js
मई 2023 में Next.js 13.4 रिलीज़ होना खास तौर पर अहम था, क्योंकि इससे React सर्वर कॉम्पोनेंट, स्ट्रीमिंग, और Suspense के लिए बेहतर सहायता मिलना शुरू हुई. इसके बाद से, Next.js ने नए React एपीआई (उदाहरण के लिए, Server Actions) के लिए सहायता उपलब्ध कराना जारी रखा है. साथ ही, Turbopack जैसी पहलों के ज़रिए डेवलपर अनुभव को बेहतर बनाया है. अन्य हाइलाइट में ये शामिल हैं:
- ऐप्लिकेशन राउटर: ऐप्लिकेशन राउटर, Next.js 13.4 में स्थिर हो गया है. यह Next.js ऐप्लिकेशन में रूटिंग को व्यवस्थित और मैनेज करने का एक नया तरीका है. ऐप्लिकेशन राउटर, Next.js की नई सुविधाओं का इस्तेमाल करने के लिए ज़रूरी है. जैसे, शेयर किए गए लेआउट और नेस्ट किए गए रूटिंग. साथ ही, आपके Next.js ऐप्लिकेशन में React के नए एपीआई, जैसे कि React सर्वर कॉम्पोनेंट, Suspense, और सर्वर ऐक्शन.
Turbopack: फ़िलहाल, यह पेज रेंडर करने का एक ऐसा तरीका है जो React के Suspense API पर आधारित है. हालांकि, यह अभी एक्सपेरिमेंट के तौर पर उपलब्ध है. कुछ हद तक पहले से रेंडर करने की सुविधा, स्टैटिक लोडिंग शेल का इस्तेमाल करके पेज को रेंडर करती है. हालांकि, शेल, पेज में डाइनैमिक कॉन्टेंट के लिए "छेद" छोड़ देता है और यह कॉन्टेंट, एसिंक्रोनस तरीके से लोड होता है. इससे, कैश मेमोरी में सेव किए जा सकने वाले स्टैटिक पेज की परफ़ॉर्मेंस के फ़ायदे मिलते हैं. साथ ही, पेज के कॉन्टेंट में डाइनैमिक डेटा को शामिल किया जा सकता है.
Vue
Vue की हाल ही में रिलीज़ हुई Vue 3.4 में, परफ़ॉर्मेंस से जुड़े कई सुधार किए गए हैं. फ़िलहाल, Vue Vue Vapor पर भी काम कर रहा है. यह भी परफ़ॉर्मेंस पर आधारित है. इस स्पेस में क्या-क्या हो रहा है, इसकी कुछ हाइलाइट यहां दी गई हैं:
- Vue 3.4 रिलीज़ किया गया: इसमें ये सुविधाएं शामिल हैं: "पूरी तरह से फिर से लिखा गया पार्सर, जो दोगुना तेज़ है, एसएफ़सी को तेज़ी से कंपाइल करता है, और फिर से तैयार किया गया रिएक्टिविटी सिस्टम, जो फिर से कैलकुलेट करने की प्रोसेस को बेहतर बनाता है."
- Vue Vapor मोड: Vue, Vapor मोड पर काम कर रहा है. यह एक ऑप्ट-इन, परफ़ॉर्मेंस पर आधारित कंपाइलेशन की रणनीति है. यह Vue सिंगल फ़ाइल कॉम्पोनेंट के साथ काम करती है. Vapor Mode, ऐसा कोड जनरेट करता है जो Vue कंपाइलर से जनरेट किए गए मौजूदा कोड के मुकाबले बेहतर परफ़ॉर्म करता है. इसके अलावा, सभी कॉम्पोनेंट के साथ वैपर मोड का इस्तेमाल करने पर, Vue वर्चुअल DOM की ज़रूरत नहीं पड़ती. इससे बंडल का साइज़ कम हो जाता है.
- Vue 2 का इस्तेमाल बंद हो गया है: Vue 2 का इस्तेमाल 31 दिसंबर, 2023 से बंद हो गया है. हालांकि, Vue 2 का अब भी काफ़ी इस्तेमाल किया जाता है: Vue के npm पैकेज के 50% डाउनलोड, Vue 2 के लिए होते हैं.
Nuxt
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, और nuxt/auth शामिल होंगे.
- सर्वर कॉम्पोनेंट (आइलैंड कॉम्पोनेंट): Nuxt, सर्वर कॉम्पोनेंट के लिए सहायता उपलब्ध कराता है. फ़िलहाल, यह सुविधा प्रयोग के तौर पर उपलब्ध है. Nuxt में, सर्वर से रेंडर किए गए इन कॉम्पोनेंट का इस्तेमाल स्टैटिक साइटों में किया जा सकता है. इससे आइलैंड्स आर्किटेक्चर को अपनाने में मदद मिलती है.
सॉलिड
Solid, अपने मेटा-फ़्रेमवर्क SolidStart के 1.0 के स्टेबल वर्शन को रिलीज़ करने पर काम कर रहा है. SolidStart में बेहतर तरीके से काम करने की सुविधा, आइसोमरफ़िक रूटिंग, और रेंडरिंग के अलग-अलग मोड के लिए सहायता मिलती है. हाइलाइट में ये शामिल हैं:
- बेहतर तरीके से रिएक्ट करने की सुविधा: Solid के रिएक्ट करने की सुविधा वाले सिस्टम की मदद से, सटीक अपडेट और बेहतर परफ़ॉर्मेंस मिलती है. साथ ही, बेहतर तरीके से रेंडरिंग और स्टेटस मैनेजमेंट की सुविधा मिलती है.
- आइसोमरफ़िक रूटिंग: SolidStart, रूटिंग के लिए एक यूनिफ़ाइड तरीका उपलब्ध कराता है. इससे डेवलपर, क्लाइंट और सर्वर, दोनों पर आसानी से काम करने वाले रूट तय कर सकते हैं.
- रेंडरिंग के अलग-अलग मोड: SolidStart में रेंडरिंग के अलग-अलग मोड काम करते हैं. इनमें सर्वर-साइड रेंडरिंग, स्टैटिक साइट जनरेशन, और क्लाइंट-साइड रेंडरिंग शामिल हैं. इससे डेवलपर को अपने ऐप्लिकेशन के लिए सबसे अच्छा तरीका चुनने में मदद मिलती है.
Svelte
पिछले साल, Svelte टीम का ध्यान Svelte 5 की रिलीज़ पर रहा है. यह एक अहम रिलीज़ होगी. अन्य हाइलाइट में ये शामिल हैं:
- Svelte 5 आ रहा है: Svelte 5 में, "Svelte कंपाइलर और रनटाइम को फिर से लिखना" के साथ-साथ, रून का कॉन्सेप्ट भी शामिल किया गया है.
- रून की सुविधा का एलान: रून, Svelte 5 में आने वाली एक नई सुविधा है. "रून, यूनिवर्सल और बेहतर तरीके से काम करने वाले रिएक्शन को अनलॉक करते हैं... रून की मदद से, रीऐक्टिविटी की सुविधा आपकी .svelte फ़ाइलों के दायरे से बाहर भी काम करती है... Svelte 5 की रिएक्टिविटी, सिग्नल की मदद से काम करती है. हालांकि, [अन्य फ़्रेमवर्क के मुकाबले], Svelte 5 में सिग्नल, लागू करने से जुड़ी जानकारी होती है, न कि ऐसी जानकारी जिससे सीधे तौर पर इंटरैक्ट किया जा सकता है."
- SvelteKit 2 रिलीज़ किया गया: SvelteKit, Svelte का मेटा-फ़्रेमवर्क है. इस रिलीज़ में शैलो रूटिंग और Vite 5 के लिए सहायता जैसी सुविधाएं शामिल हैं.
Chrome Aurora
Chrome Aurora, Google की एक टीम है. यह वेब पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, कई ओपन-सोर्स वेब फ़्रेमवर्क के साथ मिलकर काम करती है. खास तौर पर, वेब पर परफ़ॉर्मेंस को बेहतर बनाने के लिए. पिछले साल हमने इन पहलों में योगदान दिया है:
- इमेज (next/image, NgOptimizedImage, और nuxt/image)
- फ़ॉन्ट की सुविधाएं (next/font, nuxt/fonts, और unjs/fontaine (Vite प्लग इन)
- स्क्रिप्ट लोड करना (next/script और nuxt/scripts)
- तीसरे पक्ष की स्क्रिप्ट लोड करना (next/third-parties, nuxt/third-parties, और Angular के YouTube और Google Maps के कॉम्पोनेंट)
- रेंडरिंग: (Angular एसएसआर / हाइड्रेशन)
नतीजा
JavaScript फ़्रेमवर्क नेटवर्क तेज़ी से आगे बढ़ रहा है. इसमें हर फ़्रेमवर्क, अपने इनोवेशन और सुधारों को शामिल करता है. चाहे आपकी दिलचस्पी Angular, React, और Vue जैसे फ़्रेमवर्क की नई सुविधाओं में हो या Astro, Remix, और Solid जैसे नए विकल्पों को एक्सप्लोर करने में, आपको इनके बारे में नई जानकारी मिलती रहेगी.
डेवलपर के तौर पर, इन नई सुविधाओं के बारे में अपडेट रहने से, हमें अपने प्रोजेक्ट के लिए फ़्रेमवर्क चुनते समय सही फ़ैसले लेने में मदद मिलती है. हर फ़्रेमवर्क की खूबियों और खास सुविधाओं को समझकर, हम वह फ़्रेमवर्क चुन सकते हैं जो हमारे प्रोजेक्ट की ज़रूरतों और डेवलपमेंट की प्राथमिकताओं के हिसाब से सबसे सही हो.
हमें उम्मीद है कि इस खास जानकारी से आपको JavaScript फ़्रेमवर्क की मौजूदा स्थिति के बारे में जानकारी मिली होगी. इस ब्लॉग पोस्ट में बताए गए विषयों के बारे में ज़्यादा जानने के लिए, Google I/O से जुड़ी यह बातचीत ज़रूर देखें. कोडिंग करते रहें!