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