वेब को बेहतर बनाने की दिशा में काम करने के लिए, Chrome, ओपन सोर्स फ़्रेमवर्क के साथ मिलकर काम कर रहा है
Chrome, वेब फ़्रेमवर्क नेटवर्क में योगदान देता है. हमने 'Chrome डेवलपर समिट' 2019 में हिस्सा लिया है. इस बातचीत में हमने पिछले साल जिन विषयों पर काम किया है उनके बारे में बताया गया है.
ज़्यादा जानकारी और संसाधनों के साथ, बातचीत को दोबारा देखने के लिए आगे पढ़ें.
हम वेब को बेहतर कैसे बना सकते हैं?
Chrome टीम में सभी का लक्ष्य वेब को बेहतर बनाना है. हम ब्राउज़र एपीआई और Chrome के मुख्य JavaScript और WebAssembly इंजन, V8 को बेहतर बनाने के लिए काम करते हैं. इससे, डेवलपर को ऐसी सुविधाएं मिलती हैं जो उन्हें शानदार वेब पेज बनाने में मदद करती हैं. हम ओपन-सोर्स टूल में कई तरीकों से योगदान देकर, उन वेबसाइटों को बेहतर बनाने की भी कोशिश करते हैं जो पहले से ही बन रही हैं.
ज़्यादातर वेब डेवलपर जहां संभव हो, ओपन सोर्स टूल पर भरोसा करते हैं. साथ ही, वे पूरी तरह से कस्टम इंफ़्रास्ट्रक्चर नहीं बनाना चाहते. क्लाइंट-साइड JavaScript फ़्रेमवर्क और यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी की वजह से, ओपन-सोर्स के इस्तेमाल में बढ़ोतरी होती है. तीन सबसे लोकप्रिय क्लाइंट-साइड फ़्रेमवर्क और लाइब्रेरी, React, Angular, और Vue जैसे डेटा से पता चलता है कि:
- एमडीएन के पहले सालाना वेब डेवलपर और डिज़ाइनर सर्वे में हिस्सा लेने वाले 72% लोग, इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करते हैं.
- एचटीटीपी संग्रह की ओर से विश्लेषण किए गए टॉप 50 लाख यूआरएल में से 3,20,000 से ज़्यादा साइटें इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करती हैं.
- बिताए गए समय के मुताबिक ग्रुप में बांटने के लिए, टॉप 100 यूआरएल में से 30 यूआरएल, इनमें से कम से कम एक फ़्रेमवर्क और लाइब्रेरी का इस्तेमाल करते हैं. (रिसर्च, इंटरनल डेटा पर किया गया था.)
इसका मतलब है कि बेहतर ओपन-सोर्स टूल की मदद से, सीधे वेब बेहतर बनाया जा सकता है. इसी वजह से, Chrome के इंजीनियरों ने सीधे बाहरी फ़्रेमवर्क और लाइब्रेरी के लेखकों के साथ काम करना शुरू कर दिया है.
वेब फ़्रेमवर्क में योगदान
वेब पेजों को बनाने और उन्हें व्यवस्थित करने के लिए, आम तौर पर इस्तेमाल होने वाले फ़्रेमवर्क दो कैटगरी में आते हैं:
- यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क (या लाइब्रेरी), जैसे कि Preact, React या Vue. वे ऐप्लिकेशन के व्यू लेयर पर कंट्रोल देते हैं. उदाहरण के लिए, किसी कॉम्पोनेंट मॉडल की मदद से.
- वेब फ़्रेमवर्क, जैसे कि Next.js, Nuxt.js, और Gatsby, जो शुरू से अंत तक पूरे सिस्टम की तरह काम करते हैं. इसमें सर्वर साइड रेंडरिंग जैसी राय शामिल हैं. आम तौर पर, ये फ़्रेमवर्क व्यू लेयर के लिए यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल करते हैं.
डेवलपर, फ़्रेमवर्क इस्तेमाल न करने का विकल्प चुन सकते हैं. हालांकि, व्यू लेयर लाइब्रेरी, राऊटर, स्टाइल सिस्टम, सर्वर रेंडरर वगैरह को एक साथ जोड़कर, वे अक्सर अपना खुद का फ़्रेमवर्क बना देते हैं. आम तौर पर लोग इन सवालों के जवाब देते हैं, लेकिन वेब फ़्रेमवर्क डिफ़ॉल्ट रूप से इनमें से कई समस्याओं को हल करता है.
इस पोस्ट के बाकी हिस्से में ऐसे कई सुधारों को हाइलाइट किया गया है जो हाल ही में अलग-अलग फ़्रेमवर्क और टूल में हुए हैं. इनमें Chrome टीम का योगदान भी शामिल है.
Angular
Angular टीम ने फ़्रेमवर्क के वर्शन 8 में कई सुधार किए हैं:
- नए ब्राउज़र पर ग़ैर-ज़रूरी पॉलीफ़िल कम करने के लिए, डिफ़ॉल्ट रूप से डिफ़रेंशियल लोडिंग.
- लेज़ी-लोडिंग रूट के लिए स्टैंडर्ड डाइनैमिक इंपोर्ट सिंटैक्स के साथ काम करता है.
- मुख्य थ्रेड से अलग बैकग्राउंड थ्रेड में कोई कार्रवाई करने के लिए, वेब वर्कर के लिए सहायता.
- आइवी, मौजूदा प्रोजेक्ट के लिए Angular का नया रेंडरिंग इंजन है. यह री-कंपाइलेशन को बेहतर तरीके से कंपाइल करता है और बंडल के साइज़ को कम करता है. यह मौजूदा प्रोजेक्ट के लिए, झलक मोड में उपलब्ध है.
"Angular के वर्शन 8" में इन सुधारों के बारे में ज़्यादा जानकारी मिल सकती है. Chrome की टीम, अगले साल तक उनके साथ मिलकर काम करने की उम्मीद कर रही है, क्योंकि ज़्यादा सुविधाएं आने वाली हैं.
Next.js
Next.js एक वेब फ़्रेमवर्क है, जो व्यू लेयर के तौर पर 'रिऐक्ट' का इस्तेमाल करता है. ज़्यादातर डेवलपर जिस यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के मॉडल की उम्मीद करते हैं उसके अलावा, Next.js में कई बिल्ट-इन डिफ़ॉल्ट सुविधाएं मौजूद होती हैं:
- कोड को अलग-अलग करने की डिफ़ॉल्ट सेटिंग के साथ रूटिंग
- कंपाइलेशन और बंडलिंग (Babel और webpack का इस्तेमाल करके)
- सर्वर साइड रेंडरिंग
- हर पेज के लेवल पर डेटा फ़ेच करने का तरीका
- एनकैप्सुलेटेड स्टाइल (styled-jsx के साथ)
Next.js, बंडल के कम साइज़ के लिए ऑप्टिमाइज़ करता है. साथ ही, Chrome टीम ने उन चीज़ों की पहचान करने में मदद की जहां हम परफ़ॉर्मेंस को और बेहतर बना सकते थे. टिप्पणियों के लिए उनके अनुरोध (आरएफ़सी) और पुल के अनुरोधों (पीआर) को देखकर, इनमें से हर एक के बारे में ज़्यादा जानकारी पाई जा सकती है:
- एक बेहतर वेबपैक चंकिंग रणनीति, जिसमें ज़्यादा जानकारी वाले बंडल बनाए जाते हैं. इससे एक से ज़्यादा रूट (आरएफ़सी, पीआर) से फ़ेच किए गए डुप्लीकेट कोड की संख्या कम होती है.
- मॉड्यूल/nomodule पैटर्न के साथ डिफ़रेंशियल लोडिंग. इससे Next.js ऐप्लिकेशन में JavaScript की कुल संख्या को 20% तक कम किया जा सकता है. कोड में कोई बदलाव नहीं किया जाता (आरएफ़सी, पीआर).
- User Timing API (PR) का इस्तेमाल करने वाली बेहतर परफ़ॉर्मेंस मेट्रिक ट्रैकिंग.
हम Next.js इस्तेमाल करने के उपयोगकर्ता और डेवलपर, दोनों के अनुभव को बेहतर बनाने के लिए अन्य सुविधाएं भी एक्सप्लोर कर रहे हैं, जैसे:
- कॉम्पोनेंट के प्रोग्रेसिव या पार्शियल हाइड्रेशन को अनलॉक करने के लिए, एक साथ काम करने वाले मोड को चालू करना.
- वेबपैक पर आधारित कन्फ़ॉर्मैंस सिस्टम, जो बेहतर गड़बड़ियों और चेतावनियों (आरएफ़सी) को दिखाने के लिए, सभी सोर्स फ़ाइलों और जनरेट की गई ऐसेट का विश्लेषण करता है.
Nuxt.js
Nuxt.js एक वेब फ़्रेमवर्क है, जो Vue.js को अलग-अलग लाइब्रेरी के साथ जोड़ता है. इससे, एक राय वाली सेटिंग मिलती है. Next.js की तरह, इसमें बहुत-सी सुविधाएं शामिल हैं:
- कोड को अलग-अलग करने की डिफ़ॉल्ट सेटिंग के साथ रूटिंग
- कंपाइलेशन और बंडलिंग (Babel और webpack का इस्तेमाल करके)
- सर्वर साइड रेंडरिंग
- हर पेज के लिए, एसिंक्रोनस डेटा फ़ेच करना
- डिफ़ॉल्ट डेटा स्टोर (Vuex)
हमने अलग-अलग टूल की परफ़ॉर्मेंस को बेहतर बनाने के साथ-साथ फ़्रेमवर्क फ़ंड का दायरा बढ़ाया है. इससे ज़्यादा ओपन-सोर्स फ़्रेमवर्क और लाइब्रेरी को आर्थिक मदद दी जा सकेगी. Nuxt.js को लेकर हमारी हाल ही की सुविधा मिलने वाली है. इसमें, कुछ सुविधाएं जल्द ही मिलने वाली हैं. इनमें बेहतर सर्वर रेंडर करने की सुविधा और इमेज ऑप्टिमाइज़ेशन जैसी सुविधाएं शामिल हैं.
Babel
हमने करीब-करीब सभी बताए गए फ़्रेमवर्क में एक अहम टूल की परफ़ॉर्मेंस को बेहतर बनाने के लिए भी काम किया है--Babel.
बेबल, नए सिंटैक्स वाले कोड को कंपाइल करता है, जिसे अलग-अलग ब्राउज़र समझ सकते हैं.
ऐसे आधुनिक ब्राउज़र को टारगेट करने के लिए @babel/preset-env का इस्तेमाल करना आम बात है जहां अलग-अलग ब्राउज़र टारगेट तय किए जा सकते हैं, ताकि सभी चुने हुए एनवायरमेंट के लिए ज़रूरी पॉलीफ़िलिंग उपलब्ध कराई जा सके. टारगेट तय करने का एक तरीका यह है कि आप <script
type="module"> का इस्तेमाल करके, उन सभी ब्राउज़र को टारगेट करें जिन पर ES मॉड्यूल इस्तेमाल किए जा सकते हैं.
इसे ऑप्टिमाइज़ करने के लिए, हमने एक नया प्रीसेट लॉन्च किया है;
@babel/preset-modules. ब्राउज़र में होने वाली गड़बड़ियों से बचने के लिए, मॉडर्न सिंटैक्स को पुराने सिंटैक्स में बदलने के बजाय, preset-modules हर गड़बड़ी को ठीक करता है. इसके लिए, उसे ऐसे मॉडर्न सिंटैक्स में बदलना होता है जो काम नहीं करता. इसकी वजह से, मॉडर्न कोड बन जाता है. यह ज़्यादातर ब्राउज़र पर करीब-करीब
बिना किसी बदलाव के डिलीवर किया जा सकता है.
जो डेवलपर preset-env का पहले से इस्तेमाल कर रहे हैं उन्हें भी कुछ किए बिना इन ऑप्टिमाइज़ेशन का फ़ायदा मिलेगा, क्योंकि जल्द ही इन्हें preset-env में भी शामिल कर दिया जाएगा.
आगे क्या करना है?
बेहतर अनुभव देने के लिए ओपन-सोर्स फ़्रेमवर्क और लाइब्रेरी के साथ मिलकर काम करने से, Chrome टीम को यह समझने में मदद मिलती है कि उपयोगकर्ताओं और डेवलपर के लिए बुनियादी तौर पर क्या ज़रूरी है.
अगर आप वेब फ़्रेमवर्क, यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी या किसी भी तरह के वेब टूल (बंडलर, कंपाइलर, लिंटर) पर काम करते हैं, तो फ्रेमवर्क फ़ंड के लिए आवेदन करें!