युद्ध में कस्टम तत्व

शुभ दोपहर

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

इस संबंध में, यदि विकास की गति बढ़ाने और उत्पादों की एकरूपता सुनिश्चित करने की इच्छा थी, तो एक सामान्य घटक आधार विकसित करने का निर्णय लिया गया। हम इस बारे में बात नहीं करेंगे कि यूआई किट कैसे बनाया गया और डिजाइनरों के साथ लंबी लड़ाई के बारे में, लेकिन मैं इस कार्य के कार्यान्वयन के बारे में बात करना चाहता हूं।
मोर्चे पर, हमारे पास लोकतंत्र या अराजकता भी है। लोग उन समाधानों का उपयोग करने के लिए स्वतंत्र हैं, जिनके साथ वे सहज हैं। फिलहाल AngularJS, Angular, React, Vanilla में युद्ध की परियोजनाएं हैं, और आंतरिक उपयोग के लिए Vue में परियोजनाएं भी हैं। इस बिंदु पर, हमारी टकटकी वेब घटकों में बदल गई।

वेब घटक

आइए वेब घटकों की अवधारणा पर एक नज़र डालें। यह कस्टम तत्वों की अवधारणा पर आधारित है, जो आपको उपयोगकर्ता से छिपे हुए व्यावसायिक तर्क के साथ, अपने स्वयं के html टैग बनाकर HTMLElement वर्ग का विस्तार करने की अनुमति देता है। अच्छा लगता है, अच्छा लग रहा है। आइए देखें कि हम क्या कर सकते हैं। इसके बाद, सोर्स कोड टाइपस्क्रिप्ट में दिया गया है।

एक कस्टम तत्व बनाने के लिए, हमें निम्नलिखित करने की आवश्यकता है। कक्षा का वर्णन करें और घटक को पंजीकृत करें।

export class NewCustomElement extends HTMLElement { constructor() { super(); console.log('Here I am'); } } if (!customElements.get('new-custom-element')) { /*  ,     */ customElements.define('new-custom-element', NewCustomElement); } 

इसके अलावा, इस कोड को किसी भी html से जोड़कर (इसे JS में संकलित करते हुए), हम घटक का उपयोग कर सकते हैं (हम इस पर वापस आएँगे, वास्तव में, यदि आपके ग्राहक क्रोम का उपयोग नहीं करते हैं)।

कस्टम तत्व हमें घटक जीवन की ट्रैकिंग के लिए कुछ हुक भी देते हैं।

 export class NewCustomElement extends HTMLElement { constructor() { super(); console.log('I am created'); } /*   ,     DOM,   ,  ,    ,       */ connectedCallback() { console.log('Now I am in Dom'); this._render(); this._addEventListeners(); } /*   ,     DOM,  ,    */ disconnectedCallback() { console.log('I am removed now'); this._removeEventListeners(); } /*      */ static get observedAttributes() { return ['date']; } /* ,       */ attributeChangedCallback(attrName, oldVal, newVal) { switch (attrName) { case 'date': { /*   ,      */ break; } } } /*      */ adoptedCallback() { /*  ,    ,      */ } } 

हम प्रेषण विधि के माध्यम से घटकों में घटनाओं को भी उत्पन्न कर सकते हैं

 export class NewCustomElement extends HTMLElement { ////// _date: Date = new Date(); set date(val: Date) { this._date = val; this.dispatchEvent(new CustomEvent('dateChanged', { bubbles: true, cancelable: false, detail: this._date })); } ////// } 

भविष्य आ गया है, उन्होंने कहा, आप एक बार कोड लिखते हैं और हर जगह इसका उपयोग करते हैं, उन्होंने कहा

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

आइए देखें कि हमें क्या फायदे मिले।

• पुन : प्रयोज्य : हमें वास्तव में पुन: प्रयोज्य पुस्तकालय मिला। फिलहाल, यह वेनिला परियोजना में काम करता है, जो एक संकलित वेबपैक बंडल के रूप में जुड़ता है, और कोणीय 7 परियोजना में, AppModule में टाइपस्क्रिप्ट स्रोतों के रूप में जुड़ता है
• समझने योग्य व्यवहार : यदि आप सर्वोत्तम प्रथाओं का पालन करते हैं , तो हमें समझने योग्य व्यवहार वाले घटक मिलते हैं जिन्हें आसानी से मौजूदा रूपरेखाओं में एकीकृत किया जा सकता है, उदाहरण के लिए, कोणीय के लिए, एक बॉक्स में केले का उपयोग करना, विशेषताओं के माध्यम से मूल अनुप्रयोगों में, या संपत्ति के साथ काम करना जो विशेषताओं को दर्शाता है
• एकीकृत शैली : यह पुन: प्रयोज्य पर बिंदु की कुछ पुनरावृत्ति है, लेकिन फिर भी। अब सभी परियोजनाएँ UI के निर्माण के लिए एकल बिल्डिंग ब्लॉक्स का उपयोग करती हैं।
• ईमानदारी से, मैं किसी भी अधिक लाभ के साथ नहीं आ सकता : हमें बताएं कि वेबकॉमर्स ने आपकी कैसे मदद की है।

अगला, मैं उन चीजों का वर्णन करने की कोशिश करूंगा जो मुझे पसंद नहीं थे।

• श्रम लागत : विकासशील घटकों की लागत एक ढांचे के विकास की तुलना में अतुलनीय रूप से अधिक है।
• नामकरण : घटक विश्व स्तर पर प्रतिस्पर्धा करते हैं, इसलिए वर्ग नाम और टैग नाम दोनों को उपसर्ग करना चाहिए। यह देखते हुए कि हमारे पास अभी भी फ्रेमवर्क के तहत लागू किए गए घटक पुस्तकालय हैं जिन्हें < company -component-name> नाम दिया गया था, हमें वेब कंपोनेंट्स को दो बार <Company- wc -component-name> के साथ उपसर्ग करना था।
• ShadowRoot : सर्वोत्तम प्रथाओं के अनुसार, ShadowRoot का उपयोग करने की अनुशंसा की जाती है। हालांकि, यह बहुत सुविधाजनक नहीं है, क्योंकि बाहर से घटक की उपस्थिति को प्रभावित करने की कोई संभावना नहीं है। और इस तरह की जरूरत अक्सर सामने आती है।
• रेंडर : फ्रेमवर्क के बिना, आपको डेटा बाइंडिंग और प्रतिक्रियाशीलता (मदद करने के लिए LitElement के बारे में भूलना होगा, लेकिन यह एक और निर्भरता है)।
• भविष्य नहीं आया है : पुराने स्तर पर उपयोगकर्ता के समर्थन को बनाए रखने के लिए (हमारे पास यह है यानी 11 और सब कुछ जो ताजा है), आपको पॉलीफ़ाइल्स को जकड़ना होगा, es5 लक्ष्य मानक है, जो अतिरिक्त समस्याएं पैदा करता है।
• पॉलीफिल्स खुद : IE के तहत यह सब सामान प्राप्त करने के लिए, मुझे बहुत पीड़ा होती है और कुछ बदसूरत निर्णय लेने पड़ते हैं, जैसे कि वेबकंपोनेंट से पॉलीकॉम हैंगर के अंदर कुछ तोड़ते हैं, जिससे कॉल स्टैक ओवरफ्लो होता है। नतीजतन, मुझे पॉलीफ़िल पॉलीफ़िल करना पड़ा, अतिरिक्त निर्भरता प्राप्त हुई।

मुझे नहीं पता कि इस सब से कौन सा निष्कर्ष निकालना है। यदि Microsoft क्रोमियम-आधारित ब्राउज़र बनाता है और IE और एज का समर्थन करना बंद कर देता है, तो हाँ, यह साँस लेना आसान हो जाएगा।

एक अजीब लाभ है: आप नौसिखिया डेवलपर्स को स्वच्छ वेब घटकों का विकास दे सकते हैं - उन्हें यह देखने दें कि यह कैसा है, जेएस में फ्रेमवर्क के बिना लिखें। एक लंबे समय के लिए एक सहकर्मी यह नहीं समझ सका कि घटक में संपत्ति में परिवर्तन तुरंत डोम में परिलक्षित क्यों नहीं हुआ। यहाँ वे चौखटे पर उगे हुए लोग हैं। और मैं वही हूं।