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

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

Arthur Evans

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कॉन्टेंट साइटें

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

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

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

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

अक्सर, डिज़ाइनर को कई टीमों के साथ काम करना पड़ता है. ये टीमें, React, Angular, और दूसरे सभी फ़्रेमवर्क के ऊपर, डिज़ाइन सिस्टम के कॉम्पोनेंट के अपने वर्शन बनाती हैं. ऐसा करने के बजाय, उन्हें कैननिकल कॉम्पोनेंट का एक सेट बनाना चाहिए.

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

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

एंटरप्राइज़: Salesforce में वेब कॉम्पोनेंट

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

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

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

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

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

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

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

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

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

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

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

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

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

इन टूल और लाइब्रेरी का इस्तेमाल करें:

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

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

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

Unsplash पर जेसन टुइंस्ट्रा की हीरो इमेज.

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