मैं वेब घटकों का उपयोग क्यों नहीं करता

मैं इसे भविष्य में मुख्य रूप से अपने लिए लिखता हूं, ताकि मेरे पास यह बताने के लिए जगह हो कि कोई मुझसे पूछे कि मैं वेब घटकों के बारे में संदेह क्यों कर रहा हूं और डिफ़ॉल्ट रूप से Svelte को वेब घटकों में क्यों नहीं संकलित किया गया है। (हालांकि, इसे वेब घटकों में संकलित किया जा सकता है, साथ ही साथ उनके साथ एकीकृत किया जा सकता है, जैसा कि कस्टम एलिमेंट्स पर उत्कृष्ट रेटिंग द्वारा दर्शाया गया है )।

निम्नलिखित में से किसी को भी वेब घटकों पर की गई कड़ी मेहनत की आलोचना के रूप में नहीं लिया जाना चाहिए। शायद मैंने इस प्रकाशन में भी गलतियाँ कीं, जिस स्थिति में मुझे संशोधन करने में खुशी होगी। न ही मैं यह घोषणा करता हूं कि आपको वेब घटकों का उपयोग नहीं करना चाहिए। उनका अपना दायरा है। मैं सिर्फ यह समझाता हूं कि वे मेरे लिए उपयुक्त क्यों नहीं हैं।

1. प्रगतिशील सुधार

यह एक पुराने ढंग का विश्वास हो सकता है, लेकिन मेरा मानना ​​है कि वेबसाइटों को जावास्क्रिप्ट के बिना जितना संभव हो उतना काम करना चाहिए। जेएस के बिना वेब घटक काम नहीं करते हैं। यह उन चीज़ों के लिए सामान्य है जो स्वाभाविक रूप से इंटरेक्टिव हैं, जैसे कि कस्टम फ़ॉर्म तत्व (<cool-datepicker>), लेकिन यह उदाहरण के लिए साइट नेविगेशन के लिए सामान्य नहीं है। या एक <twitter-share> घटक की कल्पना करें जो Twitter को भेजने के लिए URL बनाने के तर्क को कूटबद्ध करता है। मैं इसे Svelte पर लागू कर सकता हूं, जो सर्वर पर मेरे लिए निम्न HTML प्रदान करता है:

 <a target="_blank" noreferrer href="..." class="svelte-1jnfxx"> Tweet this </a> 

दूसरे शब्दों में, सामान्य < <a> अपने सभी वैभव में उपलब्ध है।

जब जावास्क्रिप्ट सक्षम होता है, तो प्रगतिशील सुधार होता है - एक नया टैब खोलने के बजाय, एक छोटा पॉप-अप विंडो खुलता है। लेकिन जेएस के बिना भी, घटक अभी भी ठीक काम करता है।

HTML वेब घटक के मामले में, यह कुछ इस तरह दिखेगा:

 <twitter-share text="..." url="..." via="..."/> 

... जो बेकार है और उपयोग के लिए अनुपयुक्त है यदि जेएस अवरुद्ध है, या किसी कारण से टूट गया है, या उपयोगकर्ता के पास एक पुराना ब्राउज़र है।

इसके अलावा, class="svelte-1jnfxx" हमें शैडो डोम के बिना स्टाइल class="svelte-1jnfxx" प्रदान करता है। जो हमें अगले बिंदु पर लाता है।

2. सीएसएस इन, उह ... जेएस

यदि आप शैडो डोम का उपयोग शैलियों को एनकैप्सुलेट करने के लिए करना चाहते हैं, तो आपको <style> CSS <style> में अपना सीएसएस सम्मिलित करना होगा। ऐसा करने का एकमात्र व्यावहारिक तरीका है, यदि आप लोडिंग सामग्री ब्लिंकिंग (FOUC) से बचना चाहते हैं, तो CSS को जावास्क्रिप्ट में स्ट्रिंग के रूप में एम्बेड करना है जो आपके वेब घटक के बाकी तर्क को परिभाषित करता है।

यह प्रदर्शन सुधार सलाह का खंडन करता है जो पढ़ता है: "कम जावास्क्रिप्ट, कृपया।" सीएसएस-इन-जेएस समुदाय, विशेष रूप से, सीएसएस के लिए सीएसएस फ़ाइलों का उपयोग नहीं करने के लिए बहुत आलोचना की गई है, और यहां हम वेब घटकों के साथ फिर से हैं।

भविष्य में, हम इस समस्या से निपटने के लिए CSS Modules के साथ-साथ Constructable Stylesheets का उपयोग करने में सक्षम होंगे। हमारे पास शैडो डोम के इंटर्ल्स को ::theme और ::part माध्यम से स्टाइल करने का अवसर भी होगा। लेकिन यहाँ यह समस्याओं के बिना नहीं था।

3. मंच की थकान

यह मेरे लिए एक दुखद मुकुट है - मैंने कई सालों तक इन चीजों को "भविष्य" के रूप में विज्ञापित किया है, लेकिन वर्तमान के साथ बनाए रखने के लिए , हमें विभिन्न विशेषताओं के एक समूह के साथ मंच भरना था, ब्राउज़रों के बीच अंतर को बढ़ाता है।

लेखन के समय, https://crbug.com पर, Chrome का बग ट्रैकर, 61,000 खुले बग जो आधुनिक ब्राउज़र लिखने की विशाल जटिलता को दर्शाते हैं।

हर बार जब हम प्लेटफ़ॉर्म में एक नई सुविधा जोड़ते हैं, तो हम जटिलता को बढ़ाते हैं - नए बग के लिए क्षमता बनाते हैं और यह कम संभावना बनाते हैं कि क्रोम में एक नया प्रतियोगी होगा। यह उन डेवलपर्स के लिए भी मुश्किलें पैदा करता है, जिन्हें इन नई विशेषताओं (जिनमें से कुछ, जैसे कि HTML आयात या कस्टम तत्व मानक के मूल संस्करण, को सीखने के लिए प्रोत्साहित किया जाता है) ने Google के बाहर रूट नहीं लिया है और अब हटाने की प्रक्रिया में हैं)।

4. पॉलीफिल्स

तथ्य यह है कि पुराने ब्राउज़र का समर्थन करने के लिए आपको पॉलीफ़ाइल्स का उपयोग करने की आवश्यकता है, स्थिति के विकास में योगदान नहीं करता है। और यह Google (हाय जेसन!) में लिखे गए कंस्ट्रक्टेबल स्टाइल्सशीट्स के सभी लेखों में मदद नहीं करता है। यह उल्लेख न करें कि यह सुविधा केवल क्रोम में उपलब्ध है। ( विनिर्देश के सभी तीन लेखक Google के लिए काम करते हैं। वेबकिट को इस मानक के कुछ पहलुओं के बारे में संदेह है )।

5. रचना

यह नियंत्रित करने के लिए उपयोगी हो सकता है जब एक स्लॉट की सामग्री को प्रदान करने की आवश्यकता होती है। कल्पना करें कि आपके पास दिखाई देने पर कुछ अतिरिक्त सामग्री लोड करने के लिए <html-include> है:

 <p>Toggle the section for more info:</p> <toggled-section> <html-include src="./more-info.html"/> </toggled-section> 

अचानक! भले ही हमने अभी तक toggled-section नहीं खोला है, लेकिन ब्राउज़र ने पहले से ही सभी छवियों और अन्य संसाधनों के साथ-साथ more-info.html अनुरोध किया है।

ऐसा इसलिए है क्योंकि स्लॉट्स की सामग्री को वेब घटकों में अग्रिम रूप से प्रस्तुत किया गया है। वास्तव में, यह पता चला है कि ज्यादातर मामलों में आप स्लॉट की सामग्री को आलसी रूप से प्रस्तुत करना चाहते हैं। Svelte v2 ने वेब मानकों को पूरा करने के लिए एक सक्रिय रेडिंग मॉडल अपनाया, लेकिन यह असुविधा का मुख्य स्रोत था - हम उदाहरण के लिए, रिएक्ट राउटर के समान कुछ भी नहीं बना सकते थे। Svelte v3 में, हम वेब घटकों के व्यवहार से दूर चले गए और कभी पीछे मुड़कर नहीं देखा।

दुर्भाग्य से, यह DOM की मूलभूत विशेषताओं में से एक था। जो हमें लाता है ...

6. गुणों और विशेषताओं के बीच भ्रम

गुण और गुण मूल रूप से एक ही बात है, है ना?

 const button = document.createElement('button'); button.hasAttribute('disabled'); // false button.disabled = true; button.hasAttribute('disabled'); // true button.removeAttribute('disabled'); button.disabled; // false 

खैर, लगभग:

 typeof button.disabled; // 'boolean' typeof button.getAttribute('disabled'); // 'object' button.disabled = true; typeof button.getAttribute('disabled'); // 'string' 

ऐसे नाम हैं जो मेल नहीं खाते:

 div = document.createElement('div'); div.setAttribute('class', 'one'); div.className; // 'one' div.className = 'two'; div.getAttribute('class'); // 'two' 

... और ऐसे हैं जो बिल्कुल सहमत नहीं हैं:

 input = document.createElement('input'); input.getAttribute('value'); // null input.value = 'one'; input.getAttribute('value'); // null input.setAttribute('value', 'two'); input.value; // 'one' 

लेकिन हम इन quirks, स्ट्रिंग प्रारूप की बातचीत (HTML) और DOM से निपट सकते हैं। इन विशेषताओं की एक सीमित संख्या है, वे प्रलेखित हैं, ताकि हम कम से कम उनके बारे में जान सकें, अगर हमारे पास समय और धैर्य है।

वेब घटकों से फर्क पड़ता है। गुण और विशेषताओं के बीच संबंध के बारे में कोई गारंटी नहीं है, और आप, वेब घटक डेवलपर के रूप में, दोनों का समर्थन करने के लिए आवश्यक हैं। जो हमें इस तरह के काम में लाता है:

 class MyThing extends HTMLElement { static get observedAttributes() { return ['foo', 'bar', 'baz']; } get foo() { return this.getAttribute('foo'); } set foo(value) { this.setAttribute('foo', value); } get bar() { return this.getAttribute('bar'); } set bar(value) { this.setAttribute('bar', value); } get baz() { return this.hasAttribute('baz'); } set baz(value) { if (value) { this.setAttribute('baz', ''); } else { this.removeAttribute('baz'); } } attributeChangedCallback(name, oldValue, newValue) { if (name === 'foo') { // ... } if (name === 'bar') { // ... } if (name === 'baz') { // ... } } } 

आप इसके विपरीत कर सकते हैं - विशेषताचैल्कॉलबैक गेटर्स और कॉलर्स को कॉल करें। किसी भी मामले में, इसके साथ काम करने की सुविधा बस निराशाजनक है। उसी समय, एक घटक को डेटा स्थानांतरित करने के लिए चौखटे में एक सरल और अस्पष्ट तरीका है।

7. लीक डिजाइन

यह आइटम थोड़ा अस्पष्ट है, लेकिन यह मुझे अजीब लगता है कि attributeChangedCallback सिर्फ एक क्लास विधि है। आप सचमुच निम्नलिखित कर सकते हैं:

 const element = document.querySelector('my-thing'); element.attributeChangedCallback('w', 't', 'f'); 

विशेषताएँ नहीं बदली हैं, लेकिन कोड ऐसा व्यवहार करता है जैसे कि हुआ। बेशक, जावास्क्रिप्ट में नुकसान पहुंचाने के कई तरीके हैं, लेकिन जब मैं एक कार्यान्वयन विवरण को इस तरह से चिपका हुआ देखता हूं, तो मुझे लगता है कि डिजाइन के साथ कुछ स्पष्ट रूप से गलत है।

8. खराब डोम

ठीक है, हम पहले ही स्थापित कर चुके हैं कि डोम खराब है। लेकिन इंटरैक्टिव अनुप्रयोगों को बनाने में कितना असुविधाजनक है, यह कहना अभी भी कठिन है।

कुछ महीने पहले, मैंने एक लेख लिखा था, "कम कोड लिखें," यह वर्णन करने के लिए कि कैसे रिएक्ट और वेउ जैसे फ्रेमवर्क की तुलना में स्वेल्ट घटक को अधिक कुशलता से लिख सकते हैं। वेनिला डोम के साथ कोई तुलना नहीं थी, लेकिन होनी चाहिए। संक्षेप में, हमारे पास एक सरल घटक है <Adder a={1} b={2}/> :

 <script> export let a; export let b; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p> 

वह सब है। अब वेब घटक के माध्यम से एक ही बात लिखें:

 class Adder extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <input type="number"> <input type="number"> <p></p> `; this.inputs = this.shadowRoot.querySelectorAll('input'); this.p = this.shadowRoot.querySelector('p'); this.update(); this.inputs[0].addEventListener('input', e => { this.a = +e.target.value; }); this.inputs[1].addEventListener('input', e => { this.b = +e.target.value; }); } static get observedAttributes() { return ['a', 'b']; } get a() { return +this.getAttribute('a'); } set a(value) { this.setAttribute('a', value); } get b() { return +this.getAttribute('b'); } set b(value) { this.setAttribute('b', value); } attributeChangedCallback() { this.update(); } update() { this.inputs[0].value = this.a; this.inputs[1].value = this.b; this.p.textContent = `${this.a} + ${this.b} = ${this.a + this.b}`; } } customElements.define('my-adder', Adder); 

हाँ।

ध्यान दें कि यदि हम सिंक्रोनस a और b दोनों को बदलते हैं, तो हमारे पास दो अलग-अलग अपडेट होंगे। अधिकांश चौखटे इस समस्या से ग्रस्त नहीं हैं।

9. वैश्विक नाम

मैं बहुत लंबे समय तक इस पर ध्यान केंद्रित नहीं करूंगा, यह कहने के लिए पर्याप्त है कि एक एकल साझा नामस्थान में काम करने के खतरे लंबे समय से ज्ञात और असंतुष्ट हैं।

10. इन सभी समस्याओं का समाधान पहले ही हो चुका है।

सबसे बड़ा दुख यह है कि हमारे पास पहले से ही अच्छे घटक मॉडल हैं। हम अभी भी सीख रहे हैं, लेकिन मूल कार्य - घटक-उन्मुख शैली में DOM को अपडेट करने के माध्यम से एक निश्चित स्थिति के साथ दृश्य को सिंक्रनाइज़ करना - कई साल पहले ही हल हो चुका है। और हम अभी भी वेब प्लेटफ़ॉर्म में सुविधाओं को जोड़ते हैं, जो कि हमारे पास पहले से ही पुस्तकालयों और रूपरेखाओं में हैं।

चूँकि हमारे संसाधन अनंत नहीं हैं, इसलिए एक कार्य पर बिताए गए समय का मतलब दूसरे कार्य पर ध्यान न देना है। डेवलपर्स की सामान्य उदासीनता के बावजूद, वेब घटकों पर महत्वपूर्ण ऊर्जा खर्च की गई थी। इस ऊर्जा को किसी और चीज़ पर खर्च करके हम क्या हासिल कर सकते हैं?