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, अपने मटीरियल डिज़ाइन सिस्टम को वेब कॉम्पोनेंट के तौर पर उपलब्ध कराता है: मटीरियल वेब कॉम्पोनेंट.
- Wired Elements, वेब कॉम्पोनेंट का एक शानदार सेट है. इसमें स्केच और हाथ से बनाए गए लुक वाली सुविधाएं मिलती हैं.
<model-viewer>जैसे खास मकसद के लिए बनाए गए बेहतरीन वेब कॉम्पोनेंट मौजूद हैं. इन्हें किसी भी ऐप्लिकेशन में जोड़कर, 3D कॉन्टेंट जोड़ा जा सकता है.
अगर आपको अपनी कंपनी के लिए कोई डिज़ाइन सिस्टम बनाना है या कोई ऐसा कॉम्पोनेंट या लाइब्रेरी बेचनी है जिसका इस्तेमाल किसी भी एनवायरमेंट में किया जा सके, तो वेब कॉम्पोनेंट का इस्तेमाल करके अपने कॉम्पोनेंट बनाएं. पहले से मौजूद वेब कॉम्पोनेंट एपीआई का इस्तेमाल किया जा सकता है. हालांकि, ये काफ़ी लो-लेवल के होते हैं. इसलिए, इस प्रोसेस को आसान बनाने के लिए कई लाइब्रेरी उपलब्ध हैं.
अपने कॉम्पोनेंट बनाने के लिए, LitElement को आज़माएं. यह Google की बनाई गई वेब कॉम्पोनेंट बेस क्लास है. इसमें React की तरह ही, बेहतरीन फ़ंक्शनल रेंडरिंग का अनुभव मिलता है.
इस्तेमाल किए जा सकने वाले अन्य टूल और लाइब्रेरी:
- Stencil एक ऐसा फ़्रेमवर्क है जो वेब कॉम्पोनेंट को प्राथमिकता देता है. इसमें JSX और TypeScript जैसी कई लोकप्रिय फ़्रेमवर्क सुविधाएं शामिल हैं
- Angular Elements, Angular कॉम्पोनेंट को वेब कॉम्पोनेंट के तौर पर रैप करने का तरीका उपलब्ध कराता है.
- Vue.js वेब कॉम्पोनेंट रैपर, Vue कॉम्पोनेंट को वेब कॉम्पोनेंट के तौर पर पैकेज करने का तरीका उपलब्ध कराता है.
ज़्यादा संसाधन:
- open-wc.org पर, शुरुआत करने के लिए बेहतरीन जानकारी दी गई है. साथ ही, बिल्ड और डेवलपमेंट टूल के लिए सलाह और डिफ़ॉल्ट कॉन्फ़िगरेशन भी दिए गए हैं.
- वेब की बुनियादी बातें में, वेब कॉम्पोनेंट के बुनियादी एपीआई के बारे में जानकारी दी गई है. साथ ही, वेब कॉम्पोनेंट डिज़ाइन करने के सबसे सही तरीके बताए गए हैं.
- MDN, वेब कॉम्पोनेंट एपीआई के लिए रेफ़रंस दस्तावेज़ और कुछ ट्यूटोरियल उपलब्ध कराता है.