वेब फ़्रेमवर्क नेटवर्क को बेहतर बनाना

Chrome, वेब को बेहतर बनाने के लिए ओपन-सोर्स फ़्रेमवर्क के साथ मिलकर काम कर रहा है

Houssein Djirdeh

Chrome, वेब फ़्रेमवर्क के ईकोसिस्टम में अहम योगदान देता है. Chrome Dev Summit 2019 में हमने इस बारे में बताया था कि हमने पिछले साल किन चीज़ों पर काम किया है.

ज़्यादा जानकारी और संसाधनों के साथ, बातचीत के बारे में ज़्यादा जानकारी पाने के लिए पढ़ें.

हम वेब को बेहतर कैसे बनाते हैं?

Chrome टीम का मकसद, वेब को बेहतर बनाना है. हम ब्राउज़र एपीआई और V8 को बेहतर बनाने पर काम करते हैं. V8, JavaScript और WebAssembly का मुख्य इंजन है. यह Chrome को बेहतर बनाता है, ताकि डेवलपर को ऐसी सुविधाएं मिलें जिनसे वे बेहतरीन वेब पेज बना सकें. हम उन वेबसाइटों को भी बेहतर बनाने की कोशिश करते हैं जो आज पहले से ही प्रोडक्शन में हैं. इसके लिए, हम कई तरीकों से ओपन-सोर्स टूलिंग में योगदान देते हैं.

ज़्यादातर वेब डेवलपर, जब भी मुमकिन होता है, ओपन सोर्स टूल का इस्तेमाल करते हैं. साथ ही, वे पूरी तरह से कस्टम इन्फ़्रास्ट्रक्चर नहीं बनाना चाहते. क्लाइंट-साइड JavaScript फ़्रेमवर्क और यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी, ओपन-सोर्स के इस्तेमाल का बढ़ता हुआ हिस्सा हैं. सबसे ज़्यादा इस्तेमाल किए जाने वाले तीन क्लाइंट-साइड फ़्रेमवर्क और लाइब्रेरी, React, Angular, और Vue के डेटा से पता चलता है कि:

• MDN के पहले सालाना वेब डेवलपर और डिज़ाइनर सर्वे में हिस्सा लेने वाले 72% लोग, इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करते हैं.
• एचटीटीपी आर्काइव ने सबसे ज़्यादा ट्रैफ़िक वाले 50 लाख यूआरएल का विश्लेषण किया. इनमें से 3,20,000 से ज़्यादा साइटें, इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करती हैं.
• सबसे ज़्यादा समय बिताए गए यूआरएल के हिसाब से ग्रुप किए जाने पर, टॉप 100 यूआरएल में से 30 यूआरएल, इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करते हैं. (यह रिसर्च, इंटरनल डेटा के आधार पर की गई थी.)

इसका मतलब है कि बेहतर ओपन-सोर्स टूलिंग से, सीधे तौर पर बेहतर वेब मिल सकता है. यही वजह है कि Chrome इंजीनियर, बाहरी फ़्रेमवर्क और लाइब्रेरी के लेखकों के साथ मिलकर काम कर रहे हैं.

वेब फ़्रेमवर्क में योगदान

वेब पेज बनाने और उन्हें व्यवस्थित करने के लिए, आम तौर पर इस्तेमाल किए जाने वाले फ़्रेमवर्क को दो कैटगरी में बांटा जाता है:

• यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क या लाइब्रेरी, जैसे कि Preact, React या Vue. ये किसी ऐप्लिकेशन की व्यू लेयर को कंट्रोल करने की सुविधा देती हैं. उदाहरण के लिए, कॉम्पोनेंट मॉडल के ज़रिए.
• वेब फ़्रेमवर्क, जैसे कि Next.js, Nuxt.js, और Gatsby. ये एंड-टू-एंड सिस्टम उपलब्ध कराते हैं. इनमें सर्वर-साइड रेंडरिंग जैसी सुविधाएं पहले से मौजूद होती हैं. ये फ़्रेमवर्क, आम तौर पर व्यू लेयर के लिए यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल करते हैं.

डेवलपर के पास फ़्रेमवर्क का इस्तेमाल न करने का विकल्प होता है. हालांकि, व्यू लेयर लाइब्रेरी, राऊटर, स्टाइलिंग सिस्टम, सर्वर रेंडरर वगैरह को एक साथ जोड़कर, वे अक्सर अपना फ़्रेमवर्क बना लेते हैं. वेब फ़्रेमवर्क, इन समस्याओं को डिफ़ॉल्ट रूप से हल करते हैं. हालांकि, ये फ़्रेमवर्क कुछ मामलों में अपने फ़ैसले खुद लेते हैं.

इस पोस्ट के बाकी हिस्से में, हाल ही में अलग-अलग फ़्रेमवर्क और टूल में किए गए कई सुधारों के बारे में बताया गया है. इनमें Chrome टीम के योगदान भी शामिल हैं.

Angular

Angular टीम ने फ़्रेमवर्क के वर्शन 8 में कई सुधार किए हैं:

• नए ब्राउज़र के लिए, डिफ़ॉल्ट रूप से डिफ़रेंशियल लोडिंग की सुविधा चालू होती है, ताकि गैर-ज़रूरी पॉलीफ़िल को कम किया जा सके.

डिफ़रेंशियल बिल्ड (Angular के वर्शन 8 से) की मदद से, angular.io के बंडल साइज़ को कम किया गया है

• लेज़ी-लोडिंग राउट के लिए, स्टैंडर्ड डाइनैमिक इंपोर्ट सिंटैक्स की सुविधा.
• मुख्य थ्रेड से अलग बैकग्राउंड थ्रेड में कार्रवाइयां करने के लिए, वेब वर्कर की सुविधा.
• Angular का नया रेंडरिंग इंजन Ivy, बेहतर री-कंपाइलेशन परफ़ॉर्मेंस देता है. साथ ही, बंडल के साइज़ को कम करता है. यह मौजूदा प्रोजेक्ट के लिए, प्रीव्यू मोड में उपलब्ध है.

इन सुधारों के बारे में ज़्यादा जानने के लिए, "Angular का वर्शन 8" लेख पढ़ें. Chrome टीम अगले साल उनके साथ मिलकर काम करने के लिए उत्सुक है, क्योंकि इस दौरान और भी सुविधाएं लॉन्च होंगी.

Next.js

Next.js एक वेब फ़्रेमवर्क है, जो व्यू लेयर के तौर पर React का इस्तेमाल करता है. कई डेवलपर, क्लाइंट-साइड फ़्रेमवर्क से यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट मॉडल की उम्मीद करते हैं. इसके अलावा, Next.js में पहले से मौजूद कई डिफ़ॉल्ट सुविधाएं भी मिलती हैं:

• डिफ़ॉल्ट कोड-स्प्लिटिंग के साथ राउटिंग
• कंपाइलेशन और बंडलिंग (Babel और webpack का इस्तेमाल करके)
• सर्वर-साइड रेंडरिंग
• हर पेज के हिसाब से डेटा फ़ेच करने के तरीके
• स्टाइलिंग को इनकैप्सुलेट करना (styled-jsx के साथ)

Next.js, बंडल के साइज़ को कम करने के लिए ऑप्टिमाइज़ करता है. साथ ही, Chrome टीम ने उन क्षेत्रों की पहचान करने में हमारी मदद की जहां हम परफ़ॉर्मेंस को और बेहतर बना सकते हैं. इनके बारे में ज़्यादा जानने के लिए, टिप्पणियों के लिए अनुरोध (आरएफ़सी) और पुल अनुरोध (पीआर) देखें:

1. webpack chunking की बेहतर रणनीति, जो ज़्यादा विस्तृत बंडल बनाती है. इससे, एक से ज़्यादा रूट से फ़ेच किए गए डुप्लीकेट कोड की मात्रा कम हो जाती है (RFC, PR).
2. मॉड्यूल/नोमॉड्यूल पैटर्न का इस्तेमाल करके, अलग-अलग तरीके से लोड करना. इससे Next.js ऐप्लिकेशन में JavaScript की कुल मात्रा को 20% तक कम किया जा सकता है. इसके लिए, कोड में कोई बदलाव करने की ज़रूरत नहीं होती (RFC, PR).
3. परफ़ॉर्मेंस मेट्रिक को ट्रैक करने की बेहतर सुविधा. यह User Timing API का इस्तेमाल करती है (PR).

Barnebys.com, जो कि एंटीक और संग्रहणीय चीज़ों के लिए एक बड़ा सर्च इंजन है, ने विस्तृत चंकिंग की सुविधा चालू करने के बाद, कुल JavaScript में 23% की कमी देखी

हम Next.js का इस्तेमाल करने वाले लोगों और डेवलपर के अनुभव को बेहतर बनाने के लिए, अन्य सुविधाएं भी एक्सप्लोर कर रहे हैं. जैसे:

• कॉम्पोनेंट के प्रोग्रेसिव या पार्शियल हाइड्रेशन को अनलॉक करने के लिए, कॉन्करेंट मोड चालू करना.
• यह webpack पर आधारित एक ऐसा सिस्टम है जो सभी सोर्स फ़ाइलों और जनरेट की गई ऐसेट का विश्लेषण करता है. इससे बेहतर गड़बड़ियां और चेतावनियां (RFC) दिखती हैं.

Next.js (प्रोटोटाइप) में, शर्तों के मुताबिक बनाने से जुड़ी गड़बड़ी का उदाहरण

Nuxt.js

Nuxt.js एक वेब फ़्रेमवर्क है. यह Vue.js को अलग-अलग लाइब्रेरी के साथ जोड़ता है, ताकि एक राय वाला सेटअप उपलब्ध कराया जा सके. Next.js की तरह, इसमें कई सुविधाएं पहले से मौजूद हैं:

• डिफ़ॉल्ट कोड-स्प्लिटिंग के साथ राउटिंग
• कंपाइलेशन और बंडलिंग (Babel और webpack का इस्तेमाल करके)
• सर्वर-साइड रेंडरिंग
• हर पेज के लिए एसिंक्रोनस तरीके से डेटा फ़ेच करना
• डिफ़ॉल्ट डेटा स्टोर (Vuex)

हम अलग-अलग टूल की परफ़ॉर्मेंस को बेहतर बनाने के लिए सीधे तौर पर काम कर रहे हैं. साथ ही, हमने फ़्रेमवर्क फ़ंड को बढ़ाया है, ताकि ज़्यादा ओपन-सोर्स फ़्रेमवर्क और लाइब्रेरी को वित्तीय सहायता दी जा सके. हमने हाल ही में Nuxt.js के लिए सहायता उपलब्ध कराई है. इसलिए, आने वाले समय में कुछ सुविधाएं उपलब्ध कराई जाएंगी. इनमें बेहतर सर्वर-रेंडरिंग और इमेज ऑप्टिमाइज़ेशन शामिल हैं.

ध्यान दें: फ़्रेमवर्क फ़ंड, अलग-अलग फ़्रेमवर्क और लाइब्रेरी की परफ़ॉर्मेंस को बेहतर बनाने के लिए, उनके प्रयासों को बढ़ावा देता है. अगर आपको किसी ओपन-सोर्स टूल पर काम करने के दौरान सहायता चाहिए, तो कृपया आवेदन करें!

Babel

हमने Babel की परफ़ॉर्मेंस को बेहतर बनाने के लिए भी काम किया है. यह टूल, ऊपर बताए गए लगभग सभी फ़्रेमवर्क में इस्तेमाल होता है.

Babel, नए सिंटैक्स वाले कोड को ऐसे कोड में कंपाइल करता है जिसे अलग-अलग ब्राउज़र समझ सकें. @babel/preset-env का इस्तेमाल करना अब आम बात हो गई है. इससे मॉडर्न ब्राउज़र को टारगेट किया जा सकता है. इसमें अलग-अलग ब्राउज़र टारगेट तय किए जा सकते हैं, ताकि चुने गए सभी एनवायरमेंट के लिए ज़रूरी पॉलीफ़िलिंग उपलब्ध कराई जा सके. ES मॉड्यूल के साथ काम करने वाले सभी ब्राउज़र को टारगेट करने के लिए, <script type="module"> का इस्तेमाल किया जा सकता है.

ध्यान दें: ES मॉड्यूल का इस्तेमाल करके, उन ब्राउज़र को भेजे जाने वाले polyfill कोड को कम करने के बारे में ज़्यादा जानने के लिए, तेज़ी से पेज लोड करने के लिए, आधुनिक ब्राउज़र को आधुनिक कोड उपलब्ध कराना लेख पढ़ें.

इस मामले को ऑप्टिमाइज़ करने के लिए, हमने एक नया प्रीसेट लॉन्च किया है: @babel/preset-modules. ब्राउज़र की गड़बड़ियों से बचने के लिए, मॉडर्न सिंटैक्स को पुराने सिंटैक्स में बदलने के बजाय, preset-modules हर गड़बड़ी को ठीक करता है. इसके लिए, वह मॉडर्न सिंटैक्स को ऐसे मॉडर्न सिंटैक्स में बदलता है जो गड़बड़ी से सबसे ज़्यादा मिलता-जुलता हो. इससे मॉडर्न कोड मिलता है, जिसे ज़्यादातर ब्राउज़र पर लगभग बिना बदलाव किए डिलीवर किया जा सकता है.

preset-env का इस्तेमाल करने वाले डेवलपर को भी इन ऑप्टिमाइज़ेशन का फ़ायदा मिलेगा. इसके लिए, उन्हें कुछ भी करने की ज़रूरत नहीं है, क्योंकि इन्हें जल्द ही preset-env में भी शामिल कर दिया जाएगा.

आगे क्या करना है?

ओपन-सोर्स फ़्रेमवर्क और लाइब्रेरी के साथ मिलकर काम करने से, Chrome टीम को यह समझने में मदद मिलती है कि उपयोगकर्ताओं और डेवलपर के लिए क्या ज़रूरी है.

अगर आप किसी वेब फ़्रेमवर्क, यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी या किसी भी तरह के वेब टूलिंग (बंडलर, कंपाइलर, लिंटर) पर काम करते हैं, तो फ़्रेमवर्क फ़ंड के लिए आवेदन करें!