घटक-आधारित वास्तुकला क्या है और यह बात क्यों करता है?

वेब घटक आपको कस्टम HTML तत्व बनाने देते हैं। आपको आधुनिक फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क में सबसे अधिक बार उपयोग किए जाने वाले वेब घटक मिलेंगे। लेकिन "वेब कंपोनेंट्स" वास्तव में एक डब्ल्यू 3 सी वेब मानक है और इसे उपयोगी होने के लिए एक रूपरेखा की आवश्यकता नहीं है।

वेब घटक क्या हैं?

वेब घटक HTML के लिए लेगो की तरह काम करते हैं। वे प्रौद्योगिकियों का एक संग्रह है जो HTML को अधिक उपयोगी और पुन: प्रयोज्य बनाने में मदद करते हैं। अधिक पृष्ठभूमि के लिए, वेब घटकों पर W3 वेब घटक विनिर्देश और मोज़िला डेवलपर नेटवर्क के पृष्ठ देखें ।

ये तकनीकें हैं:

• कस्टम तत्व
• HTML टेम्पलेट
• द शैडो डोम
• ईएस मॉड्यूल

आइए इन पर एक नज़र डालें।

कस्टम तत्व

कस्टम तत्व विशेष HTML तत्व हैं जिन्हें जावास्क्रिप्ट अधिक कार्यात्मक बनाता है। वे हमेशा कॉलबैक के बिना हमेशा अप-टू-डेट डेटा प्रदर्शित करने के लिए उपयोग किए जाते हैं। आप उन्हें अपनी इच्छानुसार कुछ भी नाम दे सकते हैं।

HTML टेम्पलेट

टेम्पलेट HTML का पुन: प्रयोज्य हिस्सा हैं। वे उन वस्तुओं के लिए बहुत अच्छे हैं जो कई स्थानों पर या हेडर, फुटर और मेनू जैसे कई पृष्ठों पर जाते हैं।

द शैडो डोम

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

छाया डोम का उपयोग करके, प्रत्येक कस्टम तत्व अपना स्वयं का डोम प्राप्त कर सकता है। ऐसा करने से स्टाइलिंग और जावास्क्रिप्ट फ़ंक्शंस संशोधित करने वाले तत्वों से प्रभावित रहते हैं जिन्हें आप प्रभावित नहीं करना चाहते हैं।

ईएस मॉड्यूल

ये विशेष जावास्क्रिप्ट लाइब्रेरी हैं जो वेब घटकों को काम करती हैं।

वेब घटकों के प्रमुख लाभों में से एक यह है कि आप कहीं भी अपने कस्टम HTML का पुन: उपयोग कर सकते हैं। क्योंकि वेब घटक सादे HTML और जावास्क्रिप्ट हैं, वे वेनिला जावास्क्रिप्ट एप्लिकेशन के साथ-साथ फ्रेमवर्क के साथ संगत हैं। आप webcompords.org पर अधिक जान सकते हैं।

एक फ्रेमवर्क के साथ वेब घटक

वेब घटकों का उपयोग शुरू करने का सबसे आसान तरीका एक रूपरेखा है। इससे पहले कि वेब घटक भी आस-पास थे, Angular.js ने एक समान कार्यक्षमता प्रदान की जिसे निर्देश कहा जाता है। उन्होंने घटक के रूप में एक ही काम किया, इससे पहले कि घटक एक मानक बन गए।

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

Vue

Vue.js एक लोकप्रिय घटक-आधारित फ्रंट-एंड फ्रेमवर्क है जो डेवलपर्स के बीच पसंदीदा है। Vue सीखना आसान है और प्रोग्राम करना आसान है। फ्रेमवर्क से मूल HTML वेबसाइटों में सरल घटकों को जोड़ना भी आसान हो जाता है।

संबंधित: क्या Vue.js है?

प्रतिक्रिया

प्रतिक्रिया एक फ्रंट-एंड फ्रेमवर्क है जिसे व्यापक रूप से व्यावसायिक रूप से अपनाया गया है। यह ढांचा डेवलपर्स के बीच भी पसंदीदा है। HTML, CSS, और JavaScript को एक स्क्रिप्ट में डालकर वेब विकास को सरल बनाने के लिए रिएक्ट सबसे अच्छा है।

अधिक जानने के लिए, वेब ऐप्स बनाने के लिए React सीखने के लिए हमारे राउंडअप ट्यूटोरियल देखें ।

एक फ्रेमवर्क के बिना वेब घटक

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

पॉलिमर

पॉलिमर वेब घटक आंदोलन में Google का योगदान है। यह हल्के पुस्तकालयों का संग्रह है जो सादे जावास्क्रिप्ट की तुलना में कस्टम तत्वों को बनाना आसान बनाते हैं। इसमें कस्टम तत्वों के साथ-साथ टेम्पलेट्स बनाने के लिए पुस्तकालय हैं।

पॉलिमर के पास पुराने ब्राउज़रों के साथ संगतता सुनिश्चित करने के लिए पॉलीफिल्स के लिए एक पुस्तकालय है। सादे HTML में सामग्री डिज़ाइन जोड़ने के लिए सामग्री डिज़ाइन घटकों की एक प्रारंभिक रिलीज़ भी है।

पतला

एक अन्य विकल्प स्लिम.जेएस है, एक ऑल-इन-वन लाइब्रेरी जो एक साधारण वेबसाइट को जोड़ना आसान बनाता है। यह कस्टम तत्व निर्माण प्रक्रिया को सुव्यवस्थित करता है और छाया डोम तक सीधी पहुंच प्रदान करता है।

स्टैंसिल

अंतिम लेकिन कम से कम उत्कृष्ट स्टैंसिल नहीं है, जो आपको दोनों दुनिया का सर्वश्रेष्ठ देता है। यह रिएक्ट के समान है और समान कार्यक्षमता प्रदान करता है। लेकिन यह आपको एक भारी शुल्क वाले ढांचे में बंद किए बिना फ्रेमवर्क स्तर की कार्यक्षमता प्रदान करता है।

स्टैंसिल आपके घटकों को भी पूर्व-संकलित करता है, जो उन्हें हल्का बनाता है। इसके विपरीत, रिएक्ट जैसे ढांचे ब्राउज़र में पूरे ढांचे को लोड करते हैं और मक्खी पर घटकों का संकलन करते हैं। जब तक स्टैंसिल घटक ब्राउज़र को प्राप्त हो जाते हैं, तब तक वे केवल वेनिला जावास्क्रिप्ट और HTML होते हैं जिनमें कोई अतिरिक्त सामान नहीं होता है।

वेब घटक और वेब डिज़ाइन

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

पारंपरिक वेब डिज़ाइन फ्रेमवर्क

अच्छी खबर यह है कि चुनने के लिए कई डिज़ाइन फ्रेमवर्क हैं। वादिन कुछ सुंदर घटक प्रदान करता है। एक उद्यम स्वाद के लिए, वहाँ OpenUI5 है । और जैसा कि पहले ही उल्लेख किया गया है, Google का पॉलिमर मटेरियल UI घटकों को भी प्रदान करता है।

बुरी खबर यह है कि आपको वही अनुभव नहीं मिलेगा जो आपको बूटस्ट्रैप से मिलता है। और वे ऐसे कई तत्वों को याद कर रहे हैं जिन्हें आप टाइपोग्राफी की तरह अधिकांश डिज़ाइन रूपरेखाओं में देखते हैं।

घटक-आधारित डिज़ाइन फ्रेमवर्क दृष्टिकोण क्या है?

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

Tachyons CSS कक्षाओं को सबसे छोटे संभव उपयोग के लिए तोड़ता है। उदाहरण के लिए, यह है कि आप इसका उपयोग करके एक बटन कैसे बनाते हैं:

 <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>

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

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

अवयवों में सोच

एक अन्य बाधा पारंपरिक वेबसाइट लेआउट से घटक-आधारित संरचना में गियर बदलने के लिए आपके मस्तिष्क को मिल रही है। घटकों में सोचने के लिए सीखने के लिए दो तकनीकें हैं।

परमाणु दृष्टिकोण

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

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

DRY दृष्टिकोण

या आप बस उस जीव, कोशिका और परमाणु बकवास को भूल सकते हैं और इसे DRY रख सकते हैं। DRY का मतलब है खुद को दोहराना नहीं है।

कुछ भी, बड़ा या छोटा, एक घटक हो सकता है। इसलिए हमेशा की तरह अपना HTML लिखें। जब आपको कुछ ऐसा मिलता है, जिसका आप पुन: चाहते हैं, जैसे कि गैलरी या फुटर, इसे अपने ही घटक में तोड़ दें।

क्या आपको अपने अगले प्रोजेक्ट में वेब कंपोनेंट्स का इस्तेमाल करना चाहिए?

विचार करने के लिए मुख्य बिंदु आपकी टीम और वेब मानक हैं।

सभी प्रमुख ब्राउज़रों ने वेब घटकों को अपनाया है। CanIUse कस्टम घटकों को 93 प्रतिशत गोद लेने की दर और 95 प्रतिशत पर टेम्पलेट्स , इसलिए वे उपयोग करने के लिए सुरक्षित हैं। और कुछ स्ट्रैगलर के लिए पॉलीफिल होते हैं जो वेब घटकों का समर्थन नहीं करते हैं। इसका मतलब है कि अनुपालन एक गैर-मुद्दा है।

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

वेब घटकों को अपनाने का सबसे कठिन भाग डिजाइन फ्रेमवर्क की कमी और घटकों के संदर्भ में सोचना सीखना है। लेकिन हमने उन दोनों को कवर किया है। वेब घटक 2014 के बाद से हैं, इसलिए वे एक नई तकनीक नहीं हैं। लेकिन वे एक बेहतर तकनीक हैं।