एक बार फिर वेब घटकों के बारे में ...

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

मूल बातें

वेब घटक निम्नलिखित मूल तत्वों से युक्त आधुनिक विशिष्टताओं का एक समूह हैं:

कस्टम तत्व - निर्दिष्ट व्यवहार, उपस्थिति और अपने स्वयं के आंतरिक मार्कअप के साथ अपने स्वयं के HTML टैग बनाने की एक देशी क्षमता।

शैडो डोम - आंतरिक शैलियों और दस्तावेज़ के बाकी हिस्सों के इनकैप्सुलेशन के साथ घटक की आंतरिक संरचना को अलग करना।

टेम्प्लेट - एक विशेष टैग जो आपको मार्कअप के टुकड़ों को स्टोर करने की अनुमति देता है, उन्हें लागू करें और यदि आवश्यक हो तो उनका पुन: उपयोग करें।

HTML आयात - अन्य HTML फ़ाइलों में संग्रहीत HTML ब्लॉकों को आयात करने की क्षमता

उपरोक्त सभी के पकवान को देशी सीएसएस चर, देशी ईएस मॉड्यूल और HTTP / 2 सर्वर पुश के साथ सीज किया जा सकता है। स्लॉट, कस्टम विशेषताएँ, कस्टम ईवेंट और अन्य विवरण भी हैं। उनके बारे में थोड़ी देर बाद, जब हम अभ्यास के लिए आगे बढ़ते हैं।

हां, आपका ये वेब घटक लगभग कहीं भी समर्थित नहीं है।

ड्राई नंबर एक इंजीनियर के सबसे अच्छे दोस्त होते हैं। आइए इस कोण से "लगभग कहीं नहीं" पर एक नज़र डालें:

कस्टम तत्व - 78.71%
शैडो डोम - 79.12%
टेम्पलेट - 89.61%
HTML आयात - 69.16%

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

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

खैर, बाकी ~ 20% उपयोगकर्ताओं के साथ क्या करना है?

इन लोगों का समर्थन करने के लिए पॉलीफिल का उपयोग किया जा सकता है। हां, यह पॉलीफिल्स के साथ थोड़ा धीमा काम करेगा, लेकिन यह नग्न आंखों के लिए ध्यान देने योग्य नहीं है। लेकिन बाकी सभी के लिए - यह तेज हो जाएगा।

हमने पॉलीमर पर एक प्रोजेक्ट करने के लिए पांच साल पहले कोशिश की थी। सब कुछ बहुत धीमा था।

उन "दूर" समय में, मानक का प्रारूप (v0) उग्र था, जिसका समर्थन केवल क्रोम में लागू किया गया था। तब से, बहुत कुछ बदल गया है: मानक का एक नया संस्करण, v1, अपनाया गया था, विभिन्न ब्राउज़रों में मूल समर्थन लागू किया गया था, पॉलीफ़ाइल्स को फिर से लिखा गया था, और अच्छी प्रथाओं को निपटाने के लिए सभी तरह से चला गया। पॉलिमर खुद एक तकनीकी पूर्वावलोकन से एक पूरी तरह से काम कर रहे समाधान में विकसित हुआ है, जिससे निपटना अच्छा है।

कुछ पॉलिमर ... यह सब क्या है?

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

वेब घटकों का उपयोग कब करें?

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

यदि आप ब्राउज़र दृष्टिकोण में डिजाइन के करीब हैं । आप आवेदन के लगातार पुनर्निर्माण के बिना और अनावश्यक निर्भरता के बिना बना सकते हैं। यह प्रोटोटाइप को बहुत ही सुखद अनुभव बनाता है और आपके एप्लिकेशन को प्रोटोटाइप स्टेट से प्रोडक्शन वर्जन स्टेट तक आसानी से विकसित होने देता है। मुझे वह पसंद है।

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

यदि आप BEM से नफरत करते हैं : शैडो डोम घटक शैलियों को अलग करता है। मल्टी स्टोरी राक्षसी नामकरण के लिए कोई ज़रूरत नहीं है, न ही एक सामान्य सीएसएस ढेर में घोषणाओं को नेविगेशन प्रदान करने के लिए। सब कुछ कॉम्पैक्ट रूप से एक घटक में पैक किया गया है: शैलियों, लेआउट, तर्क।

यदि आप इलेक्ट्रॉन पर आधारित अनुप्रयोग विकसित कर रहे हैं। इलेक्ट्रॉन में क्रोमियम का वर्तमान संस्करण पहले से ही आपकी जरूरत की हर चीज का समर्थन करता है। संस्करणों में सामान्य अंतराल के बावजूद।

यदि आप अपना ढांचा / पुस्तकालय लिखना चाहते हैं। इस तरह के प्रयोगों के लिए वेब घटक एक उत्कृष्ट रचना है।

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

यदि आपके उपयोगकर्ता आधुनिक ब्राउज़र का उपयोग करते हैं। अपने आप से।

यदि आप PWA का विकास कर रहे हैं : मुख्य मोबाइल प्लेटफ़ॉर्म बॉक्स से बाहर सब कुछ का समर्थन करते हैं। एक त्वरित शुरुआत के लिए, एक पवा-स्टार्टर-किट है ।

यदि आप बढ़ी हुई आवेदन सुरक्षा में रुचि रखते हैं और एक विस्तृत निर्भरता ऑडिट आपके लिए निषेधात्मक है। यहां सब कुछ सरल है: कम निर्भरताएं - कम अनियंत्रित छेद।

यदि आप एक पागल आशावादी हैं और DOM API के साथ काम करना पसंद करते हैं : वेब घटक DOM API का हिस्सा हैं, जिसमें साधारण DOM तत्वों की सभी मानक विशेषताएं हैं।

यदि आप लाइब्रेरी संस्करणों के पिछड़े संगतता को तोड़ने के बारे में जलाते हैं : जब सब कुछ कट्टर मानक पर आधारित होता है, तो यह किसी तरह अधिक विश्वसनीय होता है।

जब आपको वेब घटकों का उपयोग नहीं करना चाहिए

जब आपके प्रोजेक्ट की आवश्यकताएं हैं, तो पुराने और विदेशी ब्राउज़रों का समर्थन करने की आवश्यकता है। इस मामले में, आपको सामान्य रूप से नहीं बताया जाएगा। मेरी संवेदना।

जब आप छोटे जीवन चक्र के साथ सरल उत्पाद विकसित करते हैं और आपको एक कोड कोड विकसित करने की आवश्यकता नहीं होती है।

जब आप मुख्य रूप से एक विरासत कोड के साथ काम कर रहे हैं।

जब आप और आपके सहयोगी केवल कुछ फैशनेबल का उपयोग करते हैं और कुछ और जानना नहीं चाहते हैं।

मुझे यह सब क्यों चाहिए? मेरे पास रिएक्ट / वीयू / एंगुलर / वगैरह है, मेरे लिए काफी ...

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