आज हमें अगली-पीढ़ी की वेब डेवलपमेंट लाइब्रेरी के पहले स्टेबल रिलीज़ के बारे में बताते हुए खुशी हो रही है: lit-html और LitElement.
lit-html एचटीएमएल टेंप्लेट बनाने के लिए, छोटी, तेज़, और बेहतर तरीके से काम करने वाली लाइब्रेरी है. LitElement, lit-html टेंप्लेट वाले वेब कॉम्पोनेंट बनाने के लिए एक आसान बेस क्लास है.
अगर आपने ये प्रोजेक्ट फ़ॉलो किए हैं, तो शायद आपको पता होगा कि lit-html और LitElement के बारे में क्या है. और अगर आप चाहें, तो इसे पूरा नहीं किया जा सकता. अगर आपने lit-html और LitElement का इस्तेमाल नहीं किया है, तो खास जानकारी पाने के लिए यह लेख पढ़ें.
lit-html: एचटीएमएल टेंप्लेट बनाने के लिए छोटी और तेज़ लाइब्रेरी
lit-html एक छोटा सा (सिर्फ़ 3k बंडल, छोटा किया हुआ, और gzip किया गया) और एचटीएमएल टेंप्लेट के लिए तेज़ JavaScript लाइब्रेरी है. lit-html फ़ंक्शनल प्रोग्रामिंग तरीकों के साथ अच्छी तरह से काम करता है. इसकी मदद से, अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को उसकी स्थिति के आधार पर, जानकारी के साथ दिखाया जा सकता है.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
lit-html टेंप्लेट को रेंडर करना आसान है:
render(myTemplate('Ada'), document.body);
किसी टेंप्लेट को फिर से रेंडर करने पर, सिर्फ़ बदलाव किया गया डेटा अपडेट होता है:
render(myTemplate('Grace'), document.body);
lit-html बेहतर, बेहतरीन, और एक्सटेंसिबल है.
- बेहतर. lit-html की मदद से बहुत तेज़ी से काम किया जा सकता है. डेटा में बदलाव होने पर, lit-html में किसी तरह के बदलाव करने की ज़रूरत नहीं होती. इसके बजाय, यह याद रखता है कि आपने अपने टेंप्लेट में एक्सप्रेशन कहां डाले हैं और यह सिर्फ़ इन डाइनैमिक पार्ट को अपडेट करता है.
- एक्सप्रेशनिव. lit-html में आपको JavaScript, डिक्लेरेटिव यूज़र इंटरफ़ेस (यूआई), और फ़ंक्शन वाले प्रोग्रामिंग पैटर्न का पूरा फ़ायदा मिलता है. lit-html टेंप्लेट में दिए गए एक्सप्रेशन सिर्फ़ JavaScript होते हैं. इसलिए, आपको कस्टम सिंटैक्स सीखने की ज़रूरत नहीं होती. साथ ही, आपके पास भाषा में इस्तेमाल की जाने वाली हर तरह की वैल्यू होती है. lit-html में कई तरह की वैल्यू नेटिव तौर पर काम करती हैं. जैसे, स्ट्रिंग, DOM नोड, अरे वगैरह. टेंप्लेट ऐसी वैल्यू होती हैं जिनका कंप्यूट किया जा सकता है. साथ ही, इन्हें फ़ंक्शन में और उनसे पास किया जा सकता है और नेस्ट किया जा सकता है.
- एक्सटेंसिबल: lit-html में ज़रूरत के हिसाब से बदलाव किए जा सकते हैं और इसे ज़रूरत के हिसाब से बदला जा सकता है—आपका टेंप्लेट कंस्ट्रक्शन किट. डायरेक्टिव की मदद से, यह तय किया जा सकता है कि वैल्यू कैसे हैंडल की जाएं. इसके अलावा, ये एसिंक्रोनस वैल्यू, कुंजी वाले दोहराव, गड़बड़ियों की सीमाओं वगैरह को बेहतर तरीके से हैंडल करने में मदद करते हैं. lit-html में इस्तेमाल के लिए तैयार कई डायरेक्टिव होते हैं, जो अपने हिसाब से इस्तेमाल करना आसान बनाते हैं.
कई लाइब्रेरी और प्रोजेक्ट में पहले ही lit-html शामिल किया जा चुका है. इनमें से कुछ लाइब्रेरी की सूची GitHub पर awesome-lit-html रेपो में मिल सकती है.
अगर आपको सिर्फ़ टेंप्लेट की ज़रूरत है, तो lit-html दस्तावेज़ों की मदद से शुरुआत करें. अगर आपको ऐप्लिकेशन में कॉम्पोनेंट बनाने हैं या उन्हें अपनी टीम के साथ शेयर करना है, तो ज़्यादा जानने के लिए आगे पढ़ें.
LitElement: लाइटवेट वेब कॉम्पोनेंट बेस क्लास
LitElement एक लाइटवेट बेस क्लास है, जिसकी मदद से वेब कॉम्पोनेंट बनाना और शेयर करना, पहले से ज़्यादा आसान हो जाता है.
LitElement, कॉम्पोनेंट को रेंडर करने के लिए lit-html का इस्तेमाल करता है और रिएक्टिव प्रॉपर्टी और एट्रिब्यूट का एलान करने के लिए एपीआई जोड़ता है. एलिमेंट की प्रॉपर्टी में बदलाव होने पर, वे अपने-आप अपडेट हो जाते हैं. वे बिना किसी बदलाव के तेज़ी से अपडेट होते हैं.
यहां टाइपस्क्रिप्ट में एक सामान्य LitElement कॉम्पोनेंट दिया गया है:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(हमारे पास बेहतरीन वैनिला JavaScript API भी है.)
इससे एक एलिमेंट बन जाता है, जिसे हर उस जगह इस्तेमाल किया जा सकता है जहां सामान्य एचटीएमएल एलिमेंट का इस्तेमाल किया जाता है:
<name-tag name="Ida"></name-tag>
अगर वेब कॉम्पोनेंट का इस्तेमाल पहले से किया जा रहा है, तो आपको यह जानकर खुशी होगी कि अब वे Chrome, Safari, और Firefox में मूल रूप से काम करते हैं. जल्द ही, Edge के साथ काम करने की सुविधा मिलेगी. पॉलीफ़िल की ज़रूरत सिर्फ़ लेगसी ब्राउज़र वर्शन के लिए होती है.
अगर आपको वेब कॉम्पोनेंट की जानकारी नहीं है, तो आपको इन्हें आज़माना चाहिए! वेब कॉम्पोनेंट से आप एचटीएमएल को इस तरह से बढ़ा सकते हैं जो दूसरी लाइब्रेरी, टूल, और फ़्रेमवर्क के साथ काम करता है. इस तरह ये एलिमेंट बड़े संगठन में यूज़र इंटरफ़ेस (यूआई) एलिमेंट शेयर करने, वेब पर कहीं भी इस्तेमाल करने के लिए कॉम्पोनेंट पब्लिश करने या मटीरियल डिज़ाइन जैसे यूज़र इंटरफ़ेस (यूआई) डिज़ाइन सिस्टम बनाने के लिए सबसे सही होते हैं.
जहां भी एचटीएमएल का इस्तेमाल किया जाता है, वहां कस्टम एलिमेंट इस्तेमाल किए जा सकते हैं: मुख्य दस्तावेज़ में, कॉन्टेंट मैनेजमेंट सिस्टम में, मार्कडाउन में या React और Vue जैसे फ़्रेमवर्क के साथ बने व्यू में. LitElement कॉम्पोनेंट को दूसरे वेब कॉम्पोनेंट के साथ भी मिलाया जा सकता है, चाहे वे वनीला वेब टेक्नोलॉजी का इस्तेमाल करके लिखे गए हों या Salesforce लाइटनिंग वेब कॉम्पोनेंट, Ionic के Stencil, SkateJS या पॉलीमर लाइब्रेरी जैसे टूल की मदद से बनाए गए हों.
शुरू करें
क्या आपको lit-html और LitElement को आज़माना है? LitElement ट्यूटोरियल, एक अच्छा शुरुआती पॉइंट है:
अगर आपको lit-html का इस्तेमाल करना है या lit-html का टेंप्लेट किसी दूसरे प्रोजेक्ट में जोड़ना है, तो lit-html दस्तावेज़ देखें:
हमेशा की तरह, हमें अपने अनुभव के बारे में बताएं. हमसे Slack या Twitter पर संपर्क किया जा सकता है. हमारे प्रोजेक्ट ओपन सोर्स हैं (बेशक!) और आप बग की रिपोर्ट, फ़ाइल की सुविधा के अनुरोध या GitHub पर सुधार के सुझाव दे सकते हैं: