🚚 💩 📳 कैसे परीक्षण आपके स्वयं के यूआई-किट बनाने में आपकी सहायता कर सकते हैं 👨🏻‍⚖️ 🥇 👋🏽

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

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

हम यह चाहते हैं या नहीं, चाहे हम समझते हैं कि हम क्या लिखते हैं या नहीं, हम घटकों के साथ काम करते हैं, हम हमेशा छोटे लोगों में कार्यों का विघटन करते हैं।

और हमारे आंतरिक सुंदर यूआई-किट के लिए तालिका के अगले कार्यान्वयन को लिखने के लिए मिलियनवीं बार एक साथ मिल रहा है, मैंने सोचा - मुझे क्या प्रारंभिक कार्य करने की आवश्यकता है? वास्तव में क्या लिखा जाना चाहिए? और कहाँ से शुरू करें?

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

मैं UI- किट - IDOLS के प्रोटोटाइप के अपने स्वयं के सेट को पेश करने के लिए तैयार हूं! आइए एक नजर डालते हैं!

मैं इंटरफ़ेस पृथक्करण के लिए खड़ा हूं, डी निर्भरता उलटा के लिए खड़ा है, ओ खड़ा है ... बस मजाक कर रहा है, ज़ाहिर है, यह ठोस है

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

आइए इन सिद्धांतों को हमारे "RAM" में लोड करें और बिंदुओं पर जाएं।

एस - एकल जिम्मेदारी

हम्म, कृपया नहीं ...

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

ओ - खुला / बंद

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

एल - लिस्कोव प्रतिस्थापन

पिछले सिद्धांत का एक छोटा विस्तार, बेस क्लास के उदाहरण के बजाय उपवर्ग के किसी भी उदाहरण का उपयोग किया जा सकता है। मुझे यकीन नहीं है कि यह सिद्धांत घटकों के संदर्भ में कैसे फिट है, सबसे अधिक संभावना है कि यह पिछले सिद्धांत का दोहराव होगा।

मैं - इंटरफ़ेस अलगाव

हम आगे भी इस बारे में बात करेंगे, अब हम कह सकते हैं कि दूसरे डेवलपर को एक बड़े से छोटे इंटरफेस के लिए बेहतर है, लेकिन सब कुछ के लिए। आइए नीचे दिए गए उदाहरणों की तुलना करें।

सब कुछ एक ही स्थान पर कॉन्फ़िगर किया जा रहा है, अचूक, गैर-पुन: प्रयोज्य ...

एक निर्माता के रूप में सब कुछ, आप की तरह और आसानी से इकट्ठा

डी - निर्भरता उलटा

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

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

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

तो आइए एक नजर डालते हैं, परमाणु डिजाइन क्या है।

टोकन

पहला स्तर टोकन है, कोई इसे मॉडल में शामिल करता है, कोई नहीं करता है, लेकिन यह ध्यान देने योग्य है। टोकन (रंग, फ़ॉन्ट आकार, स्पेसिंग, एनिमेशन) सभी प्राइमेट हैं जिन्हें हम किसी भी प्लेटफ़ॉर्म पर पुनः उपयोग कर सकते हैं।

यह ध्यान देने योग्य है कि हम परमाणु डिजाइन में पदानुक्रम में जितने अधिक होते हैं, उतनी ही पुन: प्रयोज्यता कम हो जाती है। लेकिन उस पर और बाद में।

परमाणुओं

अगला परमाणु हैं (तर्क, इनपुट, बटन के बिना सरल घटक)। पहला स्तर वह है जहां घटक दिखाई देते हैं और वे क्या उत्पादन करते हैं। परमाणुओं की कोई स्थिति नहीं है, केवल स्थैतिक स्टाइल मार्कअप दिखाते हैं।

अणु

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

अणु अंतिम स्तर हैं जहां हम स्टाइल से मिल सकते हैं।

जीव

अणु जीव (घटकों के अभिन्न अंग) का निर्माण करते हैं, उदाहरण के लिए, एक शीर्ष लेख, पाद लेख और इतने पर। जीवों को अन्य जीवों और शैलियों के बारे में कुछ भी पता नहीं है, यह हमारे "लॉजिक ऑफ डीएनए" हमारे व्यापारिक तर्क हैं, जो जानते हैं कि इसे कैसे दिखाना है और इसे कब बदलना चाहिए।

टेम्प्लेट / पृष्ठ

परमाणु डिजाइन का अंतिम एक स्तर। यह स्तर जीवों के समूहों का प्रतिनिधित्व करता है, जिसमें वर्तमान पृष्ठ शामिल है।

हम अणुओं के माध्यम से पृष्ठ पर जीवों की रचना कर सकते हैं और फिर उस पृष्ठ को "लेआउट" के रूप में बुला सकते हैं और इसके अंदर अपने जीवों को बदलने का पुन: उपयोग कर सकते हैं।

इन दो तरीकों (SOLID और परमाणु) का उपयोग करते हुए, हम घटकों को विकसित करते समय कुछ सिफारिशें तैयार करने की कोशिश करेंगे। तो, उन सिफारिशों को समझने के लिए हमारे लिए आवश्यक होगा, जब हम कहते हैं कि हम क्या कर रहे हैं "एक और घटक बनाएं"।

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

हम अपना आदर्श इंटरफ़ेस विकसित करना शुरू कर सकते हैं।

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

इस प्रकार, सबसे अच्छा समाधान निम्नलिखित होगा:

यह सुचारू रूप से हमें निम्नलिखित में लाता है:

1. घटक की स्थिति का निर्धारण करें

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

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

जब राज्य के मुद्दों से निपटते हैं, तो एक अनपेक्षित रूप से डिफ़ॉल्ट राज्यों की समस्या पर ठोकर खाता है। इसकी वजह से, दूसरी सिफारिश।

2. डिफ़ॉल्ट मानों को परिभाषित करें

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

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

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

3. पहिया को सुदृढ़ करने की कोई आवश्यकता नहीं है

ChangePasswordInputValue, लेकिन onChange नहीं बदलें, क्योंकि अगर यह आपका "अणु" है, तो यह हमेशा स्पष्ट होगा कि मूल्य क्या बदलेगा।

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

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

4. डेवलपर्स को यथासंभव नियंत्रण देने की कोशिश करें

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

ठीक है, अगर आप मानते हैं कि पहली जगह में हम परमाणु घटकों के साथ काम करना शुरू करते हैं, तो निम्नलिखित सिफारिश यहाँ से आती है।

5. अपने घटकों साफ रखें और इतने सूखे कि कपोल-कल्पना रिसाव नहीं है (चुंबन)।

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

इसलिए, हमें अनुशंसाओं की एक शॉर्टलिस्ट मिली, जिसका पालन करना अच्छा होगा।

राज्य को परिभाषित करें
डिफ़ॉल्ट मान को परिभाषित करें
पहिया को सुदृढ़ मत करो
उन्हें (देवों को) शासन करने दो
यह सरल रखें, बेवकूफ (चुंबन)

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

केवल अगर हम समझते हैं कि यह हमारे लिए बुद्धिमान बना देता है, तो सामान्य तौर पर, एक पंक्ति में दो सप्ताह तक नहीं सोना आसान होगा, उत्पादन में कीड़े को ठीक करना, हम कार्य को और अधिक कठिन बना देंगे (उद्देश्य कारणों से) और आसान (हमारे लिए) कारणों)।

फिर हमारे दिमाग को धोखा देने और सिफारिशें काम करने के लिए कैसे?

ठीक है, चलो इसे स्वचालित करने का प्रयास करें।

automatization

हम एस्लिंट + लेफ्टथुक बंडल या किसी अन्य गिट-हुक टूल का उपयोग कर सकते हैं।

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

लेकिन यह चांदी की गोली नहीं है और हम सभी सिफारिशों को पूरा नहीं कर सकते। केवल एक हिस्सा।

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

फिर आप दूसरा तरीका आजमा सकते हैं। एसडीडी के माध्यम से हमारे घटकों का विकास करना। स्टोरीबुक प्रेरित विकास।

स्टोरीबुक संचालित विकास

हमारे पास फॉर्म में एक कहानी फ़ाइल है जहां हम घटक के सभी संभावित राज्यों का वर्णन करते हैं। और इन कहानियों को इकट्ठा करने वाली एक स्टोरीबुक।

घटक के बारे में हमारी कहानियाँ

स्टोरीबुक हमें कैसे कहानियां दिखाती है

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

लेकिन अंत में, यह भी हमें वह सब कुछ नहीं देगा जो हम चाहते हैं।

इसलिए, केवल एक चीज बनी हुई है।

टेस्ट और स्नैपशॉट

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

हम स्नैपशॉट चेक सेट कर सकते हैं, जो हमें अपने घटकों की स्थिति की निगरानी करने और भविष्य में सभी परिवर्तनों को जानने की अनुमति देगा।

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

और यहाँ हम चलते हैं ...

अपने घटकों के लिए परीक्षण लिखें। धन्यवाद।

कैसे परीक्षण आपके स्वयं के यूआई-किट बनाने में आपकी सहायता कर सकते हैं