आप क्या कर सकते हैं और वेब घटकों से बाहर नहीं निकाल सकते

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

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

उपकरण

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

ऐसे कई रैपर नहीं हैं, और यहां तक ​​कि एक गंभीर उत्पादों में उपयोग के लिए पर्याप्त परिपक्व हैं: हाइब्रिड्स, लिट्लमेंट, स्टैंसिल। और वे सभी एक ही चीज़ के बारे में एक ही तरीके से करते हैं, अंतर छोटी चीज़ों में है। हाइब्रिड ट्रेंडी और क्लासलेस होने की कोशिश कर रहा है, स्टैंसिल ट्रेंडी और रिएक्ट-लाइक है, लिट्लिमेंट के लिए कोशिश करना मुश्किल नहीं लगता। और नगण्य trifles से चुनने के परिणामों के अनुसार, आउटपुट LitElement बना रहा - OOPshniki ने Hybrids से अपनी नाक बदल ली, और प्रतिक्रिया के गैर-शौकीनों - स्टैंसिल से, जिसमें JSX ने आमतौर पर प्रतिक्रिया के सबसे निर्विवाद विचारों के दोहराव को महसूस किया।

लड़ाई के लिए?

यह इस बारे में बात करना दिलचस्प नहीं है कि आप क्या कर सकते हैं, यह दस्तावेज़ में है, इसलिए मैं मुख्य रूप से इस बारे में बात करना जारी रखूंगा कि आप क्या कर सकते हैं: वे आमतौर पर इस बारे में दस्तावेज में नहीं लिखते हैं।

टेम्पलेट्स

टेम्प्लेटिंग के संदर्भ में, लिट्लमेंट ने लिट-html का उपयोग किया है, जो पूरी तरह से न्यूनतर है:

const template = html` <div attr=${a} .property=${b} ?booleanAttr=${c} @click=${handleClick} ></div> `; 

यह html नहीं है, लेकिन आपको यहां एक प्रतीक में तीन निर्माणों को याद रखने की आवश्यकता है - ""। ","? ", और" @ "। बाकी सब html है। JSX के बारे में, अपने क्लासनेम और बाकी हिस्सों के साथ, यह थोड़ा अच्छा है और कानूनी रूप से JS / TS कोड से अलग है। लेकिन, वैसे, यहां से पहला "असंभव" इस प्रकार है - कुछ भी करने के लिए भयानक काम नहीं करता है, आप केवल विशेषताओं और गुणों के मूल्यों में और पाठ सामग्री में बांध सकते हैं। बेशक, टेम्प्लेटेड टेम्प्लेट शाब्दिक में कोई जादू नहीं है, और एक निश्चित मात्रा में विकृतियों की कीमत पर, आप रनटाइम में एक स्ट्रिंग को संकलित कर सकते हैं और इसमें लिट-html बाइंडर्स संलग्न कर सकते हैं, लेकिन यह वास्तव में आपके हाथों से रेंडर में मिल रहा है, और उसी सफलता के साथ आप लाइनों को इकट्ठा कर सकते हैं और उन्हें भेज सकते हैं। भीतरी HTML में। सामान्य तरीके से, यह सभी टेम्पलेट्स की संरचना और सरल घटकों में जटिल घटकों के टूटने के माध्यम से किया जाता है। बॉयलरप्लेट काफी छोटा है - टेम्पलेट बाइंडिंग वास्तव में अनुपस्थित है, क्योंकि यह सिर्फ एक चर है, और एक घटक बनाने के लिए, आपको पांच "अतिरिक्त" लाइनों की आवश्यकता है।

घटकों

घटकों की एकमात्र (लेकिन महत्वपूर्ण) समस्या यह है कि बच्चों के रेंडर के साथ घटकों को पूरी तरह से "मिक्स" करने के लिए, कहीं न कहीं माता-पिता के टेम्पलेट के अंदर आपको शैडो डोम की आवश्यकता होती है। जो निश्चित रूप से, डिफ़ॉल्ट रूप से LitElement में शामिल है, और सामान्य तौर पर यह बुरा नहीं लगता है। लेकिन छाया डोम वर्तमान में शैलियों के साथ एक बड़ी समस्या है, सीएसएस मॉड्यूल के समान: शैलियों को अलग-थलग करने के लिए इसे पूरी तरह से अलग किया जाता है, लेकिन जिस तरह से यह पूरे झरना को काट देता है। बाहर से अलग-थलग शैलियों में प्रवेश करना असंभव है। आम तौर पर (लगभग) कुछ भी नहीं।

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

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

ठीक है, यह भी ध्यान देने योग्य है कि भविष्य के ब्राउज़र समर्थन और पॉलीफ़िल्स में :: भाग और :: थीम नीचे जाने की संभावना है, और उनके साथ छाया डोम अंततः समाधान बन जाएगा जिसका सभी कई वर्षों से इंतजार कर रहे हैं - ताकि यह अलग-थलग हो जाए एक्स्टेंसिबल / परस्पर। लेकिन अभी तक ऐसा नहीं है।

तैनाती

इस बिंदु पर, "क्या असंभव है" के बारे में लिखना अब बाहर नहीं आता है, क्योंकि सब कुछ आगे हो सकता है - ईएस मॉड्यूल के रूप में जलाया जाने वाला पुस्तकालय मौजूद है, और इसलिए बिना किसी समस्या के कुछ भी और किसी भी तरह से उठाया जाता है (यहां तक ​​कि एक नंगे ब्राउज़र के साथ भी जो मॉड्यूल को संभाल सकता है )। IE और वर्तमान एज के लिए, आपको मॉड्यूल के लिए वेब घटकों के एक पॉलीफ़िल को कनेक्ट करने की आवश्यकता है, यदि आप उन्हें सीधे ब्राउज़र से उठाना चाहते हैं, तो आपको कुछ ऐसा चाहिए जो ब्राउज़र आयात के दर्द से छुटकारा दिलाता है, उदाहरण के लिए es-मॉड्यूल-शिम। खैर, या एक बंडलर।

आवेदन में हुक किए गए वेब घटक सरल और उपयोग करने में आसान हैं, आप उन्हें HTML में उपयोग करना शुरू कर सकते हैं और कोड में उनके तरीकों और गुणों को खींच सकते हैं। आप देख सकते हैं कि यह सब किसी अन्य पुस्तकालय या ढांचे से कितना जुड़ा हो सकता है (प्रतिक्रिया यहां उत्कृष्ट है, लेकिन औसतन सब कुछ बहुत अच्छा है)। हम AngularJS से चिपके रहे, और सब कुछ ट्राइट था: एनजी-प्रोप आपको कुछ घटक को स्थानांतरित करने की अनुमति देता है, और एनजी-ऑन आपको घटनाओं को सुनने की अनुमति देता है।

परिणाम

यदि आपको एक घटक यूआई बनाने की जरूरत है और इसे कुछ इस तरह से जकड़ें कि आप बिल्कुल (विरासत कोड, अनौपचारिक डरावनी रूपरेखा, और अन्य खराब स्थानों) में नहीं जाना चाहते हैं - वेब घटक बस ठीक होने में मदद करते हैं। उनके साथ प्रबंधित किए जाने वाले मुख्य "परिपक्व" पुस्तकालय आकार में छोटे हैं, मॉड्यूलरिटी और लेआउट की कोई गंभीर तकनीकी समस्याएं नहीं हैं, और आप बस इसे ले सकते हैं और कर सकते हैं। आप किस तरह की लाइब्रेरी लेते हैं - यहां तक ​​कि इतना महत्वपूर्ण नहीं है, फिलहाल उनके बीच बहुत कम अंतर हैं; विशेष रूप से, जिस LitElement को हमने लिया वह हमारे लिए एक भी अतिरिक्त समस्या नहीं पैदा करता है, और सभी मामलों में अपेक्षित तरीके से काम करता है।