I/O 2019 में वेब कॉम्पोनेंट
पब्लिश होने की तारीख: 18 जून, 2019
Google I/O 2019 में, Polymer Project के केविन शाफ़ और Salesforce की कैरिडी पाटीनो ने वेब कॉम्पोनेंट के बारे में बात की थी.
वेब कॉम्पोनेंट कितने लोकप्रिय हैं?
अगर आपने आज वेब का इस्तेमाल किया है, तो हो सकता है कि आपने वेब कॉम्पोनेंट का इस्तेमाल किया हो. हमारे हिसाब से, आज पेज लोड होने की कुल संख्या में से करीब 5% से 8% पेज लोड होने के लिए, एक या उससे ज़्यादा वेब कॉम्पोनेंट का इस्तेमाल किया जाता है. इस वजह से, वेब कॉम्पोनेंट पिछले पांच सालों में शिप की गई, वेब प्लैटफ़ॉर्म की सबसे सफल नई सुविधाओं में से एक है.
आपको YouTube और GitHub जैसी उन साइटों पर वेब कॉम्पोनेंट मिल सकते हैं जिनका इस्तेमाल शायद आप हर दिन करते हों. इनका इस्तेमाल, एएमपी का इस्तेमाल करके बनाई गई कई खबरों और पब्लिशिंग साइटों पर भी किया जाता है. एएमपी कॉम्पोनेंट भी वेब कॉम्पोनेंट होते हैं. साथ ही, कई कंपनियां भी वेब कॉम्पोनेंट का इस्तेमाल कर रही हैं.
वेब कॉम्पोनेंट क्या होते हैं?
तो वेब कॉम्पोनेंट क्या होते हैं? वेब कॉम्पोनेंट की खास बातों में, एपीआई का एक लो-लेवल सेट दिया गया है. इससे ब्राउज़र में पहले से मौजूद एचटीएमएल टैग के सेट को बढ़ाया जा सकता है. वेब कॉम्पोनेंट ये सुविधाएं देते हैं:
- स्टैंडर्ड DOM एपीआई का इस्तेमाल करके कॉम्पोनेंट बनाने का सामान्य तरीका.
- डेटा पाने और भेजने का एक सामान्य तरीका (प्रॉपर्टी/इवेंट का इस्तेमाल करके).
स्टैंडर्ड इंटरफ़ेस के अलावा, स्टैंडर्ड में यह नहीं बताया गया है कि किसी कॉम्पोनेंट को असल में कैसे लागू किया जाता है:
- यह अपने डीओएम को बनाने के लिए किस रेंडरिंग इंजन का इस्तेमाल करता है.
- यह अपनी प्रॉपर्टी या एट्रिब्यूट में हुए बदलावों के आधार पर खुद को कैसे अपडेट करता है.
दूसरे शब्दों में कहें, तो वेब कॉम्पोनेंट, ब्राउज़र को यह बताते हैं कि कॉम्पोनेंट कब और कहां बनाना है. हालांकि, वे यह नहीं बताते कि इसे कैसे बनाना है.
लेखक, अपने वेब कॉम्पोनेंट बनाने के लिए, React की तरह ही फ़ंक्शनल रेंडरिंग पैटर्न चुन सकते हैं. इसके अलावा, वे Angular या Vue में मिलने वाले डिक्लेरेटिव टेंप्लेट का इस्तेमाल भी कर सकते हैं. लेखक के तौर पर, आपके पास कॉम्पोनेंट में इस्तेमाल की जाने वाली टेक्नोलॉजी को चुनने की पूरी आज़ादी होती है. हालांकि, आपको इंटरऑपरेबिलिटी बनाए रखनी होगी.
वेब कॉम्पोनेंट किस काम के लिए सही हैं?
वेब कॉम्पोनेंट और मालिकाना हक वाले कॉम्पोनेंट सिस्टम के बीच मुख्य अंतर, इंटरऑपरेबिलिटी है. स्टैंडर्ड इंटरफ़ेस की वजह से, वेब कॉम्पोनेंट का इस्तेमाल उन सभी जगहों पर किया जा सकता है जहां <input> या <video> जैसे बिल्ट-इन एलिमेंट का इस्तेमाल किया जाता है.
इन्हें असली एचटीएमएल के तौर पर दिखाया जा सकता है. इसलिए, इन्हें सभी लोकप्रिय फ़्रेमवर्क रेंडर कर सकते हैं. इसलिए, आपके कॉम्पोनेंट को ज़्यादा से ज़्यादा ऐप्लिकेशन में इस्तेमाल किया जा सकता है. साथ ही, उपयोगकर्ताओं को किसी एक फ़्रेमवर्क में लॉक नहीं किया जाता.
साथ ही, कॉम्पोनेंट इंटरफ़ेस स्टैंडर्ड होने की वजह से, अलग-अलग लाइब्रेरी का इस्तेमाल करके लागू किए गए वेब कॉम्पोनेंट को एक ही पेज पर मिक्स किया जा सकता है. इस जानकारी से, टेक्नोलॉजी स्टैक को अपडेट करने पर आपके ऐप्लिकेशन को आने वाले समय में भी काम करने में मदद मिलती है. एक फ़्रेमवर्क से दूसरे फ़्रेमवर्क पर माइग्रेट करने के लिए, आपको अपने सभी कॉम्पोनेंट बदलने की ज़रूरत नहीं है. इसके बजाय, एक-एक करके अपने कॉम्पोनेंट अपडेट किए जा सकते हैं.
वेब कॉम्पोनेंट का इस्तेमाल कौन कर रहा है?
इसलिए, इन सभी वजहों से, वेब कॉम्पोनेंट अलग-अलग इस्तेमाल के उदाहरणों में काफ़ी सफल साबित हो रहे हैं. खास तौर पर, तीन इस्तेमाल के उदाहरण बहुत लोकप्रिय हुए हैं: कॉन्टेंट साइटें, डिज़ाइन सिस्टम, और एंटरप्राइज़ ऐप्लिकेशन.
कॉन्टेंट वाली साइटें
वेब कॉम्पोनेंट, कॉन्टेंट को बेहतर बनाने के लिए सबसे सही टेक्नोलॉजी हैं. ऐसा इसलिए, क्योंकि इन्हें पहले से ही कई कॉन्टेंट मैनेजमेंट सिस्टम, स्टैंडर्ड एचटीएमएल के तौर पर आउटपुट कर सकते हैं.
एएमपी, इस बात का बेहतरीन उदाहरण है कि पब्लिशिंग इंडस्ट्री के इंफ़्रास्ट्रक्चर में, कॉन्टेंट दिखाने के लिए वेब कॉम्पोनेंट को कितनी तेज़ी और आसानी से शामिल किया गया.
डिज़ाइन सिस्टम
ज़्यादा से ज़्यादा कंपनियां, खुद को एक ही तरह से पेश करने के लिए डिज़ाइन सिस्टम का इस्तेमाल कर रही हैं. डिज़ाइन सिस्टम, कॉम्पोनेंट और दिशा-निर्देशों का एक सेट होता है. यह किसी संगठन की साइटों और ऐप्लिकेशन के लिए, एक जैसा लुक और फ़ील तय करता है. यहां वेब कॉम्पोनेंट भी बहुत काम के होते हैं.
अक्सर, डिज़ाइनरों को कैननिकल कॉम्पोनेंट का एक सेट उपलब्ध कराने के बजाय, React, Angular, और अन्य सभी फ़्रेमवर्क के आधार पर डिज़ाइन सिस्टम कॉम्पोनेंट के अपने वर्शन बनाने वाली कई टीमों के साथ काम करना पड़ता है.
वेब कॉम्पोनेंट इसका सही जवाब हैं. यह एक ऐसा कॉम्पोनेंट सिस्टम है जिसे एक बार लिखने के बाद, हर जगह इस्तेमाल किया जा सकता है. साथ ही, इससे ऐप्लिकेशन बनाने वाली टीमों को अपनी पसंद के फ़्रेमवर्क का इस्तेमाल करने की आज़ादी मिलती है
ING, EA, और Google जैसी कंपनियां, वेब कॉम्पोनेंट में अपनी कंपनी की डिज़ाइन लैंग्वेज लागू कर रही हैं.
एंटरप्राइज़: Salesforce में वेब कॉम्पोनेंट
वेब कॉम्पोनेंट, एंटरप्राइज़ में भी तेज़ी से लोकप्रिय हो रहे हैं. ये सुरक्षित और आने वाले समय के लिए बेहतर टेक्नोलॉजी हैं, जिनका इस्तेमाल स्टैंडर्ड के तौर पर किया जा सकता है. Salesforce के यूज़र इंटरफ़ेस (यूआई) प्लैटफ़ॉर्म की आर्किटेक्ट कैरिडी पाटीनो ने बताया कि उन्होंने वेब कॉम्पोनेंट का इस्तेमाल करके अपना यूज़र इंटरफ़ेस (यूआई) प्लैटफ़ॉर्म क्यों बनाया.
Salesforce, ऐप्लिकेशन का एक कलेक्शन है. इनमें से कई ऐप्लिकेशन, अधिग्रहण के ज़रिए मिले हैं. इनमें से हर एक, अपने टेक्नोलॉजी स्टैक पर काम कर सकता है. ये अलग-अलग स्टैक पर बनाए गए हैं. इसलिए, इन सभी को एक जैसा लुक और फ़ील देना मुश्किल है. इसके अलावा, Salesforce अपने प्लैटफ़ॉर्म का इस्तेमाल करके, ग्राहकों को अपनी पसंद के मुताबिक ऐप्लिकेशन बनाने की सुविधा देता है. इसलिए, कॉम्पोनेंट ऐसे होने चाहिए जिनका इस्तेमाल बाहरी डेवलपर भी कर सकें.
Salesforce ने अपने प्लैटफ़ॉर्म के ग्राहकों की कुछ ज़रूरतों की पहचान की है:
- मालिकाना समाधानों के बजाय स्टैंडर्ड समाधान—इसलिए, अनुभवी डेवलपर को ढूंढना आसान होता है और नए डेवलपर को तेज़ी से तैयार किया जा सकता है.
- कॉमन कॉम्पोनेंट मॉडल—इसलिए, किसी भी Salesforce ऐप्लिकेशन को पसंद के मुताबिक बनाने का तरीका एक जैसा होता है.
उन्होंने यह भी पता लगाया कि खरीदार क्या नहीं चाहते:
- उनके कॉम्पोनेंट और ऐप्लिकेशन में बड़े बदलाव. दूसरे शब्दों में कहें, तो पुराने सिस्टम के साथ काम करने की सुविधा होना ज़रूरी था.
- पुरानी टेक्नोलॉजी का इस्तेमाल करना और उसे बेहतर न बना पाना.
- किसी ऐसे प्लैटफ़ॉर्म पर काम करना जो किसी दूसरे प्लैटफ़ॉर्म के साथ डेटा शेयर नहीं करता.
नए यूज़र इंटरफ़ेस (यूआई) प्लैटफ़ॉर्म के लिए वेब कॉम्पोनेंट का इस्तेमाल करने से, इन सभी ज़रूरतों को पूरा किया जा सका. इसका नतीजा, नया Lightning Web Components है.
वेब कॉम्पोनेंट का इस्तेमाल शुरू करना
वेब कॉम्पोनेंट का इस्तेमाल शुरू करने के कई बेहतरीन तरीके हैं.
अगर आपको कोई वेब ऐप्लिकेशन बनाना है, तो उपलब्ध कई स्टैंडर्ड वेब कॉम्पोनेंट का इस्तेमाल करें. यहां कुछ उदाहरण दिए गए हैं:
- Google, अपने Material Design सिस्टम को वेब कॉम्पोनेंट के तौर पर बेचता है: Material Web Components.
- Wired Elements, वेब कॉम्पोनेंट का एक बेहतरीन सेट है. इसमें हाथ से बनाए गए स्केच की तरह दिखने वाले एलिमेंट शामिल हैं.
- खास मकसद के लिए बनाए गए कई वेब कॉम्पोनेंट उपलब्ध हैं. जैसे,
<model-viewer>. इनका इस्तेमाल करके, किसी भी ऐप्लिकेशन में 3D कॉन्टेंट जोड़ा जा सकता है.
अगर आपको अपनी कंपनी के लिए कोई डिज़ाइन सिस्टम डेवलप करना है या आपको कोई ऐसा कॉम्पोनेंट या लाइब्रेरी बेचनी है जिसका इस्तेमाल किसी भी एनवायरमेंट में किया जा सके, तो वेब कॉम्पोनेंट का इस्तेमाल करके अपने कॉम्पोनेंट बनाएं. पहले से मौजूद वेब कॉम्पोनेंट एपीआई का इस्तेमाल किया जा सकता है. हालांकि, ये काफ़ी लो-लेवल के होते हैं. इसलिए, इस प्रोसेस को आसान बनाने के लिए कई लाइब्रेरी उपलब्ध हैं.
अपने कॉम्पोनेंट बनाने के लिए, LitElement का इस्तेमाल किया जा सकता है. यह Google की बनाई गई वेब कॉम्पोनेंट बेस क्लास है. इसमें React की तरह ही, फ़ंक्शनल रेंडरिंग का बेहतरीन अनुभव मिलता है.
अन्य टूल और लाइब्रेरी:
- Stencil, वेब-कॉम्पोनेंट-फ़र्स्ट फ़्रेमवर्क है. इसमें कई लोकप्रिय फ़्रेमवर्क की सुविधाएँ शामिल हैं. जैसे, JSX और TypeScript
- Angular Elements, Angular कॉम्पोनेंट को वेब कॉम्पोनेंट के तौर पर रैप करने का तरीका उपलब्ध कराता है.
- Vue.js वेब कॉम्पोनेंट रैपर, Vue कॉम्पोनेंट को वेब कॉम्पोनेंट के तौर पर पैकेज करने का तरीका उपलब्ध कराता है.
ज़्यादा संसाधन:
- open-wc.org पर, शुरुआत करने के बारे में बेहतरीन जानकारी दी गई है. साथ ही, बिल्ड और डेवलपमेंट टूलिंग के लिए सुझाव और डिफ़ॉल्ट कॉन्फ़िगरेशन भी दिए गए हैं.
- वेब फ़ंडामेंटल में, बुनियादी वेब कॉम्पोनेंट एपीआई के बारे में शुरुआती जानकारी दी गई है. साथ ही, वेब कॉम्पोनेंट डिज़ाइन करने के सबसे सही तरीके बताए गए हैं.
- MDN, वेब कॉम्पोनेंट एपीआई के लिए रेफ़रंस दस्तावेज़ और कुछ ट्यूटोरियल उपलब्ध कराता है.