बहुत तेज़ी से काम करने वाले टेंप्लेट और वेब कॉम्पोनेंट - lit-html & LitElement

हमें यह बताते हुए खुशी हो रही है कि हमने अगली पीढ़ी की वेब डेवलपमेंट लाइब्रेरी की दो पहली स्टेबल रिलीज़ कर दी हैं: lit-html और LitElement.

lit-html, एचटीएमएल टेंप्लेट के लिए एक छोटी, तेज़, और बेहतर लाइब्रेरी है. LitElement, lit-html टेंप्लेट की मदद से वेब कॉम्पोनेंट बनाने के लिए एक आसान बेस क्लास है.

अगर आपने इन प्रोजेक्ट के बारे में पढ़ा है, तो आपको पता होगा कि lit-html और LitElement क्या हैं. अगर आपको इनके बारे में जानना है, तो आखिर तक जाएं. अगर आपने lit-html और LitElement का इस्तेमाल पहले कभी नहीं किया है, तो इनके बारे में खास जानकारी पाने के लिए आगे पढ़ें.

lit-html: एचटीएमएल टेंप्लेट के लिए छोटी और तेज़ लाइब्रेरी

lit-html, एचटीएमएल टेंप्लेट के लिए एक छोटी (सिर्फ़ 3 हज़ार से ज़्यादा बंडल की गई, छोटी की गई, और ज़िप की गई) और तेज़ 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 का इस्तेमाल करता है. साथ ही, रिऐक्टिव प्रॉपर्टी और एट्रिब्यूट की जानकारी देने के लिए एपीआई जोड़ता है. एलिमेंट की प्रॉपर्टी बदलने पर, वे अपने-आप अपडेट हो जाते हैं. साथ ही, ये डेटा फ़ाइलें, डेटा में अंतर की जांच किए बिना तेज़ी से अपडेट होती हैं.

यहां TypeScript में एक आसान 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 के लिए यह सुविधा जल्द ही उपलब्ध होगी. साथ ही, polyfills की ज़रूरत सिर्फ़ ब्राउज़र के लेगसी वर्शन के लिए होती है.

अगर आपने वेब कॉम्पोनेंट का इस्तेमाल पहले कभी नहीं किया है, तो आपको इसे आज़माना चाहिए! वेब कॉम्पोनेंट की मदद से, एचटीएमएल को इस तरह बढ़ाया जा सकता है कि वह अन्य लाइब्रेरी, टूल, और फ़्रेमवर्क के साथ काम कर सके. इस वजह से, ये बड़े संगठन में यूज़र इंटरफ़ेस (यूआई) एलिमेंट शेयर करने, वेब पर कहीं भी इस्तेमाल करने के लिए कॉम्पोनेंट पब्लिश करने या Material Design जैसे यूज़र इंटरफ़ेस (यूआई) डिज़ाइन सिस्टम बनाने के लिए सबसे सही हैं.

कस्टम एलिमेंट का इस्तेमाल, एचटीएमएल का इस्तेमाल करने वाली जगहों पर किया जा सकता है: अपने मुख्य दस्तावेज़ में, कॉन्टेंट मैनेजमेंट सिस्टम में, मार्कडाउन में या React और Vue जैसे फ़्रेमवर्क से बनाए गए व्यू में. LitElement कॉम्पोनेंट को दूसरे वेब कॉम्पोनेंट के साथ भी मिक्स और मैच किया जा सकता है. भले ही, उन्हें वेनिला वेब टेक्नोलॉजी का इस्तेमाल करके लिखा गया हो या Salesforce Lightning वेब कॉम्पोनेंट, Ionic के Stencil, SkateJS या Polymer लाइब्रेरी जैसे टूल की मदद से बनाया गया हो.

अपनी प्रोफ़ाइल बनाना शुरू करें

क्या आपको lit-html और LitElement आज़माना है? LitElement ट्यूटोरियल से शुरुआत करें:

अगर आपको lit-html का इस्तेमाल करना है या किसी दूसरे प्रोजेक्ट में lit-html टेंप्लेट को इंटिग्रेट करना है, तो lit-html के दस्तावेज़ देखें:

हमेशा की तरह, हमें अपनी राय दें. हमसे Slack या Twitter पर संपर्क किया जा सकता है. हमारे प्रोजेक्ट ओपन सोर्स हैं (बिल्कुल!) और GitHub पर गड़बड़ियों की शिकायत की जा सकती है, सुविधाओं के अनुरोध किए जा सकते हैं या सुधारों के सुझाव दिए जा सकते हैं: