Chrome की टीम, उपयोगकर्ता अनुभव और बेहतर वेब नेटवर्क को लेकर काफ़ी गंभीर है. हम चाहते हैं कि उपयोगकर्ताओं को वेब पर बेहतरीन अनुभव मिले. यह अनुभव, न सिर्फ़ स्टैटिक दस्तावेज़ों के साथ, बल्कि ज़्यादा इंटरैक्टिव ऐप्लिकेशन का इस्तेमाल करते समय भी मिले.
ओपन-सोर्स टूल और फ़्रेमवर्क, डेवलपर को वेब के लिए आधुनिक ऐप्लिकेशन बनाने में काफ़ी मदद करते हैं. साथ ही, ये डेवलपर को बेहतर अनुभव भी देते हैं. ये फ़्रेमवर्क और टूल, सभी साइज़ की कंपनियों के साथ-साथ, वेब के लिए काम करने वाले लोगों को भी मदद करते हैं.
हमारा मानना है कि फ़्रेमवर्क, डेवलपर को क्वालिटी से जुड़े अहम पहलुओं में मदद करने में भी अहम भूमिका निभा सकते हैं. जैसे, परफ़ॉर्मेंस, ऐक्सेस, सुरक्षा, और मोबाइल के लिए तैयार होना. हर डेवलपर और साइट के मालिक से इन क्षेत्रों में विशेषज्ञ बनने और लगातार बदलते सबसे सही तरीकों के साथ बने रहने के बजाय, फ़्रेमवर्क इनमें पहले से मौजूद समाधानों की मदद कर सकता है. इससे डेवलपर को प्रॉडक्ट की सुविधाओं को बनाने पर ध्यान देने में मदद मिलती है.
खास तौर पर, हमारा मकसद यह है कि वेब के लिए बनाए जाने वाले ऐप्लिकेशन के यूज़र एक्सपीरियंस की क्वालिटी को बेहतर बनाने के लिए, ज़्यादा समय और मेहनत न लगे.
Aurora: Chrome और ओपन-सोर्स वेब फ़्रेमवर्क और टूल के बीच सहयोग
हमने करीब दो साल तक, वेब की परफ़ॉर्मेंस को बेहतर बनाने के लिए, Next.js, Nuxt, और Angular जैसे कुछ सबसे लोकप्रिय फ़्रेमवर्क के साथ काम किया है. हमने Vue, ESLint, webpack जैसे लोकप्रिय टूल और लाइब्रेरी के लिए भी फ़ंड दिया है. आज, हम इस प्रोग्राम को एक नाम दे रहे हैं - Aurora.
ऑरोरा, आसमान में चमकने वाली प्राकृतिक रोशनी होती है. हम फ़्रेमवर्क की मदद से बनाए गए उपयोगकर्ता अनुभव को बेहतर बनाने की कोशिश कर रहे हैं. इसलिए, हमें लगा कि यह नाम सही रहेगा.
आने वाले महीनों में, हम Aurora के बारे में ज़्यादा जानकारी शेयर करेंगे. यह Chrome इंजीनियरों (इंटरनल कोडनेम WebSDK) और फ़्रेमवर्क के लेखकों की एक छोटी टीम के बीच सहयोग है. हमारा मकसद, प्रोडक्शन ऐप्लिकेशन के लिए सबसे बेहतर उपयोगकर्ता अनुभव देना है. भले ही, आपने ऐप्लिकेशन को किसी भी ब्राउज़र में रेंडर किया हो.
हमारी रणनीति क्या है?
Google में, हमने बड़े पैमाने पर वेब ऐप्लिकेशन बनाने और उनका रखरखाव करने के लिए, फ़्रेमवर्क और टूल का इस्तेमाल करते हुए बहुत कुछ सीखा है. जैसे, Google Search, Maps, इमेज सर्च, Google Photos वगैरह. हमने यह भी जाना कि बेहतर डिफ़ॉल्ट और अपनी पसंद के मुताबिक टूल उपलब्ध कराकर, फ़्रेमवर्क ऐप्लिकेशन की क्वालिटी को बेहतर बनाने में अहम भूमिका कैसे निभा सकते हैं.
फ़्रेमवर्क, DX और UX, दोनों पर असर डालने के लिए एक खास फ़ायदेमंद पॉइंट हैं, क्योंकि ये पूरे सिस्टम में काम करते हैं: क्लाइंट और सर्वर, डेवलपमेंट और प्रोडक्शन एनवायरमेंट. साथ ही, ये कंपाइलर, बंडलर, लिंटर वगैरह जैसे टूल को इंटिग्रेट करते हैं.
जब फ़्रेमवर्क में समाधान शामिल किए जाते हैं, तो डेवलपर की टीमें इन समाधानों का इस्तेमाल कर सकती हैं. साथ ही, वे अपना समय उस चीज़ पर फ़ोकस कर सकती हैं जो प्रॉडक्ट के लिए सबसे ज़्यादा ज़रूरी है -- उपयोगकर्ताओं के लिए बेहतर सुविधाएं उपलब्ध कराना.
हम स्टैक की हर लेयर में मौजूद टूल को बेहतर बनाने के लिए काम करते हैं. Next.js, Nuxt, और Angular CLI जैसे फ़्रेमवर्क, ऐप्लिकेशन के लाइफ़साइकल के हर चरण को मैनेज करते हैं. इस वजह से और इस बात से कि मुख्य यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क नेटवर्क में React का इस्तेमाल सबसे ज़्यादा किया जाता है, इसलिए हमने बाकी नेटवर्क में इसका इस्तेमाल करने से पहले, Next.js में अपने ज़्यादातर ऑप्टिमाइज़ेशन शुरू किए हैं.
Aurora, लोकप्रिय टेक्नोलॉजी स्टैक की सही लेयर में समाधान उपलब्ध कराकर, बड़े पैमाने पर सफलता हासिल करने में मदद करता है. ब्राउज़र और फ़्रेमवर्क के बीच के अंतर को कम करके, यह वेब के लिए बेहतर क्वालिटी वाले कॉन्टेंट को बनाने में मदद करता है. साथ ही, वेब प्लैटफ़ॉर्म को बेहतर बनाने के लिए फ़ीडबैक लूप के तौर पर काम करता है.
हमारी काम करने की प्रोसेस क्या है?
Aurora, ब्राउज़र और डेवलपर नेटवर्क को जोड़ने के लिए, इन सिद्धांतों का पालन करता है: विनम्रता, जिज्ञासा, वैज्ञानिक तौर पर जांच करना, और व्यावहारिकता. हम फ़्रेमवर्क के लेखकों के साथ मिलकर, उसमें सुधार करते हैं. साथ ही, हम कम्यूनिटी के साथ मिलकर काम करते हैं और कोई भी बदलाव करने से पहले, पूरी जांच-पड़ताल करते हैं.
हम किसी भी नई सुविधा पर काम करते समय, यह तरीका अपनाते हैं:
- किसी लोकप्रिय स्टैक में, उपयोगकर्ता अनुभव से जुड़ी समस्याओं की पहचान करने के लिए, उदाहरण के तौर पर दिए गए ऐप्लिकेशन का इस्तेमाल करें.
- इस समस्या को हल करने के लिए, प्रोटोटाइप के तौर पर तैयार किए गए समाधान. इनमें "डिफ़ॉल्ट तौर पर लागू होने वाले सख्त नियम" पर ज़ोर दिया गया है.
- किसी दूसरे फ़्रेमवर्क स्टैक की मदद से, सुविधा की पुष्टि करें, ताकि यह पक्का किया जा सके कि इसे किसी भी तरह के फ़्रेमवर्क के साथ इस्तेमाल किया जा सकता है.
- कुछ प्रोडक्शन ऐप्लिकेशन में एक्सपेरिमेंट करके, इस सुविधा की पुष्टि करें. आम तौर पर, परफ़ॉर्मेंस के लिए लैब टेस्टिंग की जाती है.
- आरएफ़सी प्रोसेस का इस्तेमाल करके डिज़ाइन को बेहतर बनाना और कम्यूनिटी के सुझावों या राय को शामिल करना.
- आम तौर पर, किसी फ़्लैग के पीछे मौजूद लोकप्रिय स्टैक में सुविधा को शामिल करें.
- क्वालिटी और डेवलपर वर्कफ़्लो इंटिग्रेशन का आकलन करने के लिए, किसी प्रोडक्शन ऐप्लिकेशन में इस सुविधा को चालू करें.
- इस सुविधा को अपनाने या अपग्रेड करने वाले प्रतिनिधि ऐप्लिकेशन में मेट्रिक को ट्रैक करके, परफ़ॉर्मेंस में हुए सुधार का आकलन करें.
- स्टैक में इस सुविधा को डिफ़ॉल्ट रूप से चालू करें, ताकि अपग्रेड करने वाले सभी उपयोगकर्ताओं को इसका फ़ायदा मिल सके.
- यह पक्का करने के बाद कि यह सुविधा काम करती है, अन्य फ़्रेमवर्क के साथ काम करके इस सुविधा को लॉन्च करें.
- फ़ीडबैक लूप की मदद से, वेब प्लैटफ़ॉर्म में मौजूद गैप की पहचान करना.
- अगली समस्याओं पर जाएं.
इसमें इस्तेमाल होने वाले टूल और प्लग इन (webpack, Babel, ESLint, TypeScript वगैरह) कई फ़्रेमवर्क में शेयर किए जाते हैं. इससे, एक ही फ़्रेमवर्क स्टैक में योगदान देने पर भी, रिपल इफ़ेक्ट बनाने में मदद मिलती है.
इसके अलावा, Chrome फ़्रेमवर्क फ़ंड, ओपन सोर्स टूल और लाइब्रेरी को फ़ंडिंग देता है. हमें उम्मीद है कि ऊपर बताई गई समस्याओं और उनके समाधानों की लेयर, दूसरे फ़्रेमवर्क और टूल के लिए काफ़ी ओवरलैप होंगी. हालांकि, हमें पता है कि हम और भी बेहतर काम कर सकते हैं. इसलिए, हम अपनी ओर से यह पक्का करना चाहते हैं कि डेवलपर को कामयाब बनाने में मदद करने वाली लाइब्रेरी और फ़्रेमवर्क को बढ़ावा मिले. यही वजह है कि हम Chrome Framework Fund में लगातार निवेश करते रहेंगे. फ़िलहाल, यह Webpack 5, Nuxt के साथ काम करता है. साथ ही, ESLint की परफ़ॉर्मेंस और उसमें हुए सुधारों के साथ भी काम करता है.
अब तक हमारे काम से क्या फ़ायदा हुआ है?
हमने इमेज, जेएस, सीएसएस, फ़ॉन्ट जैसे संसाधनों के लिए, बुनियादी ऑप्टिमाइज़ेशन पर फ़ोकस किया है. हमने कई फ़्रेमवर्क के डिफ़ॉल्ट विकल्पों को बेहतर बनाने के लिए, कई ऑप्टिमाइज़ेशन शिप किए हैं. इनमें ये शामिल हैं:
- Next.js में मौजूद एक इमेज कॉम्पोनेंट, जो इमेज लोड करने के सबसे सही तरीकों को शामिल करता है. इसके बाद, उसी पर Nuxt के साथ मिलकर काम किया जाता है. इस कॉम्पोनेंट का इस्तेमाल करने से, पेज लोड होने में लगने वाले समय और लेआउट शिफ़्ट में काफ़ी सुधार हुआ है. उदाहरण के लिए, nextjs.org/give पर सबसे बड़े कॉन्टेंटफ़ुल पेंट में 57% और क्यूमूलेटिव लेआउट शिफ़्ट में 100% की कमी आई है.
- बिल्ड के समय, वेब फ़ॉन्ट के एलान के लिए सीएसएस को अपने-आप इनलाइन करना. यह सुविधा, Angular (Google Fonts) और Next.js (Google Fonts और Adobe Fonts) में उपलब्ध है. इससे, सबसे ज़्यादा कॉन्टेंटफ़ुल पेंट और फ़र्स्ट कॉन्टेंटफ़ुल पेंट (उदाहरण) में काफ़ी सुधार हुए हैं.
- पेज लोड होने में लगने वाले समय को कम करने के लिए, Angular और Next.js, दोनों में Critters का इस्तेमाल करके ज़रूरी सीएसएस को इनलाइन करना. फ़ॉन्ट सीएसएस इनलाइन करने की सुविधा के साथ इस्तेमाल करने पर, बड़े पैमाने पर इस्तेमाल होने वाले सामान्य Angular ऐप्लिकेशन में Lighthouse की परफ़ॉर्मेंस के स्कोर में 20 से 30 पॉइंट की बढ़ोतरी हुई.
- Next.js में, ESLint की सहायता पहले से मौजूद है. इसमें कस्टम प्लग इन और शेयर किया जा सकने वाला कॉन्फ़िगरेशन शामिल है. इससे, फ़्रेमवर्क से जुड़ी सामान्य समस्याओं को बिल्ड के समय आसानी से पकड़ा जा सकता है. इसकी वजह से, लोडिंग की परफ़ॉर्मेंस का अनुमान लगाना आसान हो जाता है.
- Create React App और Next.js में, पहले से मौजूद परफ़ॉर्मेंस रिलेयर की सुविधा का एलान. इसकी मदद से, वेब पर पेज की परफ़ॉर्मेंस के बारे में आसानी से अहम जानकारी हासिल की जा सकती है. इसके लिए, वेब पर पेज की परफ़ॉर्मेंस से जुड़ी अहम जानकारी और अन्य कस्टम मेट्रिक का इस्तेमाल किया जाता है.
- Next.js और Gatsby में ज़्यादा बारीक चीज़ों को अलग-अलग हिस्सों में बांटने की सुविधा जोड़ी गई है. इससे, बंडल के साइज़ में 30 से 70 प्रतिशत की कमी आई है. साथ ही, कैश मेमोरी के इस्तेमाल की परफ़ॉर्मेंस भी बेहतर हुई है. यह Webpack 5 में डिफ़ॉल्ट तौर पर लागू होता है.
- Next.js टीम के साथ मिलकर, पुराने ब्राउज़र के लिए एक अलग polyfill चंक बनाया गया है. इससे, आधुनिक ब्राउज़र में बंडल का साइज़ बेहतर होगा.
इनमें से हर सुविधा को डिफ़ॉल्ट रूप से चालू करने के लिए ऑटोमेट किया गया है या फिर इसके लिए सिर्फ़ एक बार ऑप्ट-इन करना ज़रूरी है. यह ज़रूरी है, ताकि डेवलपर अपने वर्कफ़्लो को जटिल किए बिना, आसानी से इन फ़ायदों का फ़ायदा ले सकें.
हम 2021 के लिए क्या प्लान कर रहे हैं?
इस साल के बाकी बचे समय में, हम फ़्रेमवर्क स्टैक के उपयोगकर्ता अनुभव को बेहतर बनाने पर काम करेंगे. साथ ही, यह भी देखेंगे कि वे वेबसाइट की परफ़ॉर्मेंस की जानकारी जैसी मेट्रिक पर कितनी अच्छी तरह परफ़ॉर्म करते हैं. इस काम में ये चीज़ें शामिल होंगी:
- सबसे सही तरीकों को लागू करने के लिए नीति का पालन करना. ज़्यादा जानने के लिए, ब्लॉग पोस्ट देखें.
- इमेज, फ़ॉन्ट, और ज़रूरी सीएसएस को ऑप्टिमाइज़ करने के लिए, हमारे साथ मिलकर काम करके शुरुआती लोड की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना.
- स्क्रिप्ट कॉम्पोनेंट पर काम करने के अपने फ़ाउंडेशन पर आधारित, तीसरे पक्ष की स्क्रिप्ट (3Ps) को कम से कम परफ़ॉर्मेंस के असर के साथ लोड करना. साथ ही, तीसरे पक्ष की स्क्रिप्ट को ऑर्डर और क्रम में लगाने के सबसे सही तरीके के बारे में गहराई से रिसर्च करना.
- बड़े पैमाने पर JavaScript की परफ़ॉर्मेंस (उदाहरण के लिए, Next.js में React सर्वर कॉम्पोनेंट के साथ काम करना).
हमारी टीम इन आइडिया के लिए, आरएफ़सी और डिज़ाइन दस्तावेज़ों पर ज़्यादा नियमित तौर पर जानकारी पोस्ट करने की कोशिश करेगी, ताकि कोई भी फ़्रेमवर्क या डेवलपर इनका पालन कर सके.
नतीजा
Aurora टीम (Shubhie, Houssein, ऐलेक्स, जैरॉल्ड, राल्फ़, अड्डी, कारा, कीन, केटी) को Next.js, Nuxt, और Angular में उपयोगकर्ता अनुभव के डिफ़ॉल्ट लेवल को बेहतर बनाने के लिए, ओपन-सोर्स फ़्रेमवर्क कम्यूनिटी के साथ मिलकर काम करना जारी रखना है. हम समय के साथ और भी फ़्रेमवर्क और टूल शामिल करने के लिए, अपनी गतिविधियों को बढ़ा रहे हैं. आने वाले साल में, हमारी टीम की ओर से और ब्लॉग पोस्ट, बातचीत, और आरएफ़सी देखने के लिए, इस पेज पर बने रहें :)