वेब कॉम्पोनेंट: वेब को बेहतर बनाने में मदद करने वाली सीक्रेट एलिमेंट

I/O 2019 में वेब कॉम्पोनेंट

Arthur Evans

Google I/O 2019 में, Polymer Project के केविन शाफ़ और Salesforce के Caridy Patiño ने वेब कॉम्पोनेंट की स्थिति के बारे में बात की.

वेब कॉम्पोनेंट कितने लोकप्रिय हैं?

अगर आपने आज वेब का इस्तेमाल किया है, तो शायद आपने वेब कॉम्पोनेंट का इस्तेमाल किया है. हमारी गिनती के हिसाब से, आज सभी पेज लोड में से 5% से 8% के बीच करीब एक या उससे ज़्यादा वेब कॉम्पोनेंट का इस्तेमाल किया जाता है. इस वजह से, वेब कॉम्पोनेंट, वेब प्लैटफ़ॉर्म की उन सबसे सफल सुविधाओं में से एक है जिन्हें पिछले पांच सालों में शिप किया गया है.

आपको उन साइटों पर वेब कॉम्पोनेंट मिल सकते हैं जिन्हें शायद आप रोज़ाना इस्तेमाल करते हों. जैसे, YouTube और GitHub. इनका इस्तेमाल एएमपी की मदद से बनाई गई कई समाचार और पब्लिश करने वाली साइटों पर भी किया जाता है. एएमपी कॉम्पोनेंट भी वेब कॉम्पोनेंट होते हैं. साथ ही, कई एंटरप्राइज़ वेब कॉम्पोनेंट का इस्तेमाल भी कर रहे हैं.

वेब कॉम्पोनेंट क्या हैं?

वेब कॉम्पोनेंट क्या हैं? वेब कॉम्पोनेंट की खास जानकारी में, एपीआई का एक लो-लेवल सेट होता है. इसकी मदद से, ब्राउज़र में पहले से मौजूद एचटीएमएल टैग का इस्तेमाल बढ़ाया जा सकता है. वेब कॉम्पोनेंट से मिलने वाली सुविधाएं:

• कॉम्पोनेंट बनाने का एक सामान्य तरीका (स्टैंडर्ड DOM एपीआई का इस्तेमाल करके).
• डेटा पाने और भेजने का एक सामान्य तरीका (प्रॉपर्टी/इवेंट का इस्तेमाल करके).

उस स्टैंडर्ड इंटरफ़ेस के अलावा, स्टैंडर्ड इस बारे में कुछ नहीं बताते कि किसी कॉम्पोनेंट को असल में कैसे लागू किया गया है:

• अपने डीओएम बनाने के लिए, यह किस रेंडरिंग इंजन का इस्तेमाल करता है.
• यह अपनी प्रॉपर्टी या एट्रिब्यूट में हुए बदलावों के आधार पर अपने-आप कैसे अपडेट होता है.

दूसरे शब्दों में, वेब कॉम्पोनेंट ब्राउज़र को बताते हैं कि कॉम्पोनेंट कब और कहां बनाना है, लेकिन कैसे नहीं.

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

वेब कॉम्पोनेंट किन कामों के लिए सही होते हैं?

वेब कॉम्पोनेंट और मालिकाना हक वाले कॉम्पोनेंट सिस्टम के बीच मुख्य अंतर, इंटरऑपरेबिलिटी है. इनके स्टैंडर्ड इंटरफ़ेस की वजह से, <input> या <video> जैसे पहले से मौजूद एलिमेंट का इस्तेमाल करने के लिए, वेब कॉम्पोनेंट का इस्तेमाल किया जा सकता है.

इन्हें रीयल एचटीएमएल के तौर पर दिखाया जा सकता है, इसलिए इन्हें सभी लोकप्रिय फ़्रेमवर्क के ज़रिए रेंडर किया जा सकता है. इससे आपके कॉम्पोनेंट, अलग-अलग तरह के ऐप्लिकेशन में बड़े पैमाने पर इस्तेमाल किए जा सकते हैं. ऐसा, लोगों को किसी एक फ़्रेमवर्क में लॉक किए बिना किया जा सकता है.

कॉम्पोनेंट इंटरफ़ेस स्टैंडर्ड तरीके से होता है, इसलिए अलग-अलग लाइब्रेरी का इस्तेमाल करके लागू किए गए वेब कॉम्पोनेंट एक ही पेज पर मिक्स किए जा सकते हैं. इस तथ्य से आपके ऐप्लिकेशन के टेक्नोलॉजी स्टैक को अपडेट करने पर, आने वाले समय में आपके ऐप्लिकेशन को सुरक्षित रखने में मदद मिलती है. एक फ़्रेमवर्क और दूसरे फ़्रेमवर्क के बीच बड़े पैमाने पर बदलाव करने के बजाय, कॉम्पोनेंट को एक-एक करके अपडेट किया जा सकता है. इससे, सभी कॉम्पोनेंट को बदला जा सकता है.

वेब कॉम्पोनेंट का इस्तेमाल कौन कर रहा है?

इन सभी वजहों से, वेब कॉम्पोनेंट कई अलग-अलग इस्तेमाल के मामलों में बड़ी सफलता हासिल कर रहे हैं. इस्तेमाल के तीन उदाहरण खास तौर पर लोकप्रिय हैं: कॉन्टेंट साइटें, डिज़ाइन सिस्टम, और एंटरप्राइज़ ऐप्लिकेशन.

कॉन्टेंट दिखाने वाली साइटें

वेब कॉम्पोनेंट, कॉन्टेंट को तेज़ी से बेहतर बनाने की सबसे बेहतरीन टेक्नोलॉजी हैं. ऐसा इसलिए, क्योंकि ये पहले से ही अनकहे सीएमएस सिस्टम की मदद से, स्टैंडर्ड एचटीएमएल के तौर पर आउटपुट कर सकते हैं.

एएमपी, इसका एक बेहतरीन उदाहरण है कि कॉन्टेंट दिखाने के लिए, पब्लिशिंग इंडस्ट्री के इंफ़्रास्ट्रक्चर में वेब कॉम्पोनेंट को कितनी तेज़ी और आसानी से शामिल किया जा सकता है.

डिज़ाइन सिस्टम

ज़्यादा से ज़्यादा कंपनियां, डिज़ाइन सिस्टम का इस्तेमाल करके खुद को पेश करने के तरीके को मर्ज कर रही हैं. यह कॉम्पोनेंट और दिशा-निर्देशों का ऐसा सेट है जो किसी संगठन की साइटों और ऐप्लिकेशन के लिए, एक जैसा लुक और स्टाइल तय करता है. वेब कॉम्पोनेंट यहां भी काम करते हैं.

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

वेब कॉम्पोनेंट का जवाब है. यह हर जगह चलाया जाता है और हर जगह चलाया जाता है. यह अब भी ऐप्लिकेशन की टीमों को अपनी पसंद का फ़्रेमवर्क इस्तेमाल करने की आज़ादी देता है

ING, EA, और Google जैसी कंपनियां अपनी कंपनी की डिज़ाइन भाषा को वेब घटकों में लागू कर रही हैं.

Enterprise: Salesforce में वेब कॉम्पोनेंट

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

Salesforce, ऐप्लिकेशन का एक कलेक्शन है. इनमें से ज़्यादातर ऐप्लिकेशन, ऐप्लिकेशन इंस्टॉल करने वाले लोगों से आए हैं. इनमें से हर एक अपने टेक्नोलॉजी स्टैक पर चल सकता है. इन्हें अलग-अलग स्टैक पर बनाया गया है. इसलिए, सभी को एक जैसा लुक देना मुश्किल है. इसके अलावा, Salesforce की मदद से ग्राहकों को उनकी पसंद के मुताबिक ऐप्लिकेशन बनाने की सुविधा भी मिलती है. इसके लिए, Salesforce प्लैटफ़ॉर्म का इस्तेमाल किया जाता है. इसलिए, आम तौर पर इन कॉम्पोनेंट का इस्तेमाल बाहरी डेवलपर भी कर सकते हैं.

Salesforce ने अपने प्लैटफ़ॉर्म के ग्राहकों की ज़रूरतों के एक सेट की पहचान की:

• इसमें मालिकाना हक वाले समाधानों के बजाय, स्टैंडर्ड सुविधाएं इस्तेमाल की जाती हैं. इससे अनुभवी डेवलपर को ढूंढना आसान हो जाता है और नए डेवलपर बनाने में ज़्यादा समय लग सकता है.
• एक सामान्य कॉम्पोनेंट मॉडल है. इसलिए, किसी भी Salesforce ऐप्लिकेशन को पसंद के मुताबिक बनाने की सुविधा इसी तरह से काम करती है.

उन्होंने कुछ ऐसी चीज़ों की भी पहचान की जो ग्राहकों को नहीं चाहिए:

• उनके कॉम्पोनेंट और ऐप्लिकेशन में होने वाले बदलाव को तोड़ना. दूसरे शब्दों में, पुराने सिस्टम के साथ काम करना बहुत ज़रूरी था.
• पुरानी टेक्नोलॉजी में फंस जाने के बाद उसे बेहतर नहीं बना पाना.
• दीवारों से घिरे बगीचे में फंस जाना.

नए यूज़र इंटरफ़ेस (यूआई) प्लैटफ़ॉर्म के आधार के तौर पर वेब कॉम्पोनेंट का इस्तेमाल करने से, इन सभी ज़रूरतों को पूरा किया गया और इसी की वजह से हमें नए लाइटनिंग वेब कॉम्पोनेंट की जानकारी मिली.

वेब कॉम्पोनेंट का इस्तेमाल शुरू करना

वेब कॉम्पोनेंट का इस्तेमाल शुरू करने के कई बेहतरीन तरीके हैं.

अगर आपको कोई वेब ऐप्लिकेशन बनाना है, तो पहले से उपलब्ध कई वेब कॉम्पोनेंट का इस्तेमाल करें. यहां कुछ उदाहरण दिए गए हैं:

• Google ने अपने मटीरियल डिज़ाइन सिस्टम को वेब कॉम्पोनेंट के रूप में शामिल किया है: मटीरियल वेब कॉम्पोनेंट.
• वायर्ड एलिमेंट वेब कॉम्पोनेंट का एक शानदार सेट होता है, जो हाथ से बने स्केच जैसा दिखता है.
• <model-viewer> जैसे खास मकसद वाले वेब कॉम्पोनेंट होते हैं जिन्हें किसी भी ऐप्लिकेशन में डालकर 3D कॉन्टेंट जोड़ा जा सकता है.

अगर आपने अपनी कंपनी के लिए कोई डिज़ाइन सिस्टम बनाया है या कोई एक कॉम्पोनेंट या लाइब्रेरी वेंडिंग की है, जिसे आपको किसी भी एनवायरमेंट में इस्तेमाल करना है, तो अपने कॉम्पोनेंट बनाने के लिए वेब कॉम्पोनेंट का इस्तेमाल करें. बिल्ट-इन वेब कॉम्पोनेंट एपीआई का इस्तेमाल किया जा सकता है. हालांकि, उनका लेवल काफ़ी कम होता है. इसलिए, इस प्रोसेस को आसान बनाने के लिए कई लाइब्रेरी उपलब्ध हैं.

अपने खुद के कॉम्पोनेंट बनाने के लिए, LitElement को देखें. यह Google की बनाई हुई एक वेब कॉम्पोनेंट की बेस क्लास है, जिसमें React की तरह ही फ़ंक्शनल रेंडरिंग का बेहतरीन अनुभव मिलता है.

अन्य टूल और लाइब्रेरी, जिनका इस्तेमाल किया जा सकता है:

• Stencil एक वेब-कॉम्पोनेंट-फ़र्स्ट फ़्रेमवर्क है. इसमें JSX और TypeScript जैसी कई लोकप्रिय फ़्रेमवर्क सुविधाएं शामिल हैं
• ऐंगुलर एलिमेंट, ऐंगुलर कॉम्पोनेंट को वेब कॉम्पोनेंट के रूप में रैप करने का तरीका देते हैं.
• Vue.js वेब कॉम्पोनेंट रैपर, Vue कॉम्पोनेंट को वेब कॉम्पोनेंट के तौर पर पैकेज करने का तरीका देता है.

ज़्यादा संसाधन:

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

अनस्प्लैश पर जेसन टुइन्स्ट्रा की हीरो इमेज.

एडिटर की ध्यान देने वाली बात: कस्टम एलिमेंट के इस्तेमाल का चार्ट अपडेट किया गया है, जिसमें महीने के इस्तेमाल का पूरा डेटा दिखाया गया है, जैसा कि chromestatus.com पर बताया गया है. इस पोस्ट के पिछले वर्शन में, छह महीनों का पूरा ग्राफ़ मौजूद था. हालांकि, इसमें हाल ही के महीनों का डेटा नहीं दिखाया गया था. ओरिजनल चार्ट में V0 और V1 सीरीज़ को स्टैक किया गया है. अब उन्हें स्टैक के बिना दिखाया गया है, ताकि चीज़ों को आसानी से समझा जा सके. chromestatus.com के डेटा इकट्ठा करने के सिस्टम में हुए बदलाव की वजह से, साल 2017 के आखिर में हुए डेटा में अचानक बढ़ोतरी हुई. इस बदलाव से वेब प्लैटफ़ॉर्म की सभी सुविधाओं के आंकड़ों पर असर पड़ा. इससे आने वाले समय में ज़्यादा सटीक आकलन हुआ.