👩🏾‍🚒 🤚🏼 🖕 6 अवधारणाएं जो एक कोणीय अनुप्रयोग वास्तुकार को मास्टर करने की आवश्यकता होती हैं 🗺️ 🛀 🐳

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

1. आर्किटेक्चर, मॉड्यूल और लाइब्रेरी

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

यहां सबसे कठिन हिस्सा यह है कि वेब विकास पहले से ही एक मॉड्यूलर वास्तुकला का उपयोग करता है। बेशक, मैं ईएस 6 आयात के बारे में बात कर रहा हूं।

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

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

▍ विभिन्न प्रकार के कोणीय मॉड्यूल

विभिन्न प्रकार के कोणीय मॉड्यूलों से अवगत होना चाहिए:

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

यहां वह सामग्री है जहां आप कोणीय मॉड्यूल के बारे में विवरण पा सकते हैं।

Module लाइब्रेरी या मॉड्यूल?

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

लेकिन क्या एक मॉड्यूल या पुस्तकालय बनाया जाता है, परियोजना के प्रकार पर निर्भर करता है, और क्या परियोजना का प्रतिनिधित्व मोनो-रिपॉजिटरी या कई रिपॉजिटरी द्वारा किया जाता है।

A मॉड्यूल बनाने से पहले अपने आप से पूछने के लिए प्रश्न

मॉड्यूल लिखने से पहले पूछने के लिए यहां कुछ प्रश्न दिए गए हैं:

? — , . , . , .
, ? . , , . , , .

2. ,

जिम्मेदारियों को साझा करना, सिद्धांत रूप में, सरल है। लेकिन व्यवहार में यह पहले से अधिक कठिन है। डेवलपर्स, Angular.js के समय से जानते थे कि घटकों को यथासंभव कॉम्पैक्ट बनाया जाना चाहिए, और सेवाओं को बड़ा बनाया जाना चाहिए। कोणीय के नए संस्करणों में, इन विचारों में बहुत बदलाव नहीं हुआ है।

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

▍Condition

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

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

डोम के साथ काम करना

संभवतः अधिकांश DOM जोड़तोड़ निर्देशों में किए जाने चाहिए। कल्पना करें कि घटकों में से एक ड्रैग-एंड-ड्रॉप-कार्यक्षमता से सुसज्जित है।

मुझे यकीन है कि इस स्थिति में आप एक घटक बना सकते हैं और उससे संबंधित घटनाओं को बांध सकते हैं, लेकिन यदि आप ऐसा करते हैं, तो दो घटनाएं मिश्रित होंगी:

घटक की उपस्थिति का विवरण।
घटक व्यवहार का निर्धारण।

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

यहां आपके लिए एक व्यायाम है: कोड की लाइनों की संख्या से अपनी वर्तमान परियोजना में सबसे बड़ा घटक ढूंढें। क्या इसमें इसका इस्तेमाल होता है Rendererया ElementRef? इसके विपरीत तर्क, सबसे अधिक संभावना है, निर्देशन में स्थानांतरित किया जा सकता है।

3. पता लगाने और प्रतिपादन बदलें

जब उपयोगकर्ता इंटरफ़ेस को फिर से प्रस्तुत करने की बात आती है, तो कोणीय में सब कुछ किया जाता है जैसे कि जादू द्वारा, फ्रेमवर्क के आंतरिक तंत्र का उपयोग करके।

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

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

Ving परिवर्तन का पता लगाने में सुधार

परियोजना में प्रयुक्त परिवर्तन का पता लगाने की प्रक्रिया में सुधार करने के लिए, यह निम्नलिखित विचारों के साथ शुरू करने के लिए समझ में आता है:

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

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

▍ कोणीय प्रदर्शन सीमाओं पर काबू पाना

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

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

4. रूटिंग

रूटिंग न केवल कई आभासी पृष्ठों के रूप में एसपीए का प्रतिनिधित्व है। यह कोणीय राउटिंग सबसिस्टम सामग्रियों की आलसी लोडिंग क्षमताओं का उपयोग करके मांग पर आवेदन बंडल भी लोड कर रहा है।

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

रूटिंग का उपयोग न केवल शीर्ष-स्तरीय मार्गों को अलग करने के लिए किया जाना चाहिए, बल्कि इंटरफ़ेस के उथले और गहरे भागों के साथ काम को व्यवस्थित करने के लिए भी किया जाना चाहिए।

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

▍ उदाहरण: टैब्ड घटक

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

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

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

5. रूप

अधिकांश CRUD अनुप्रयोग अनिवार्य रूप से कई रूपों से बने होते हैं। यह बहुत संभावना है कि आप फॉर्म बनाने में बहुत समय बिताते हैं। इसलिए, यह उन लोगों के लिए महत्वपूर्ण है जो ठीक से रूपों के साथ काम करने के लिए एक कोणीय वास्तुकार बनना चाहते हैं।

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

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

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

6. आरएक्सजेएस

और हमारी सूची में अंतिम, हालांकि कम से कम नहीं, आरएक्सजेएस तकनीक है।

मुझे विश्वास है कि कोणीय की सबसे शक्तिशाली विशेषताओं में से एक आरएक्स और कार्यात्मक प्रतिक्रियाशील प्रोग्रामिंग के साथ इस ढांचे का गहरा एकीकरण है।

वास्तव में मास्टर कोणीय, उच्च गुणवत्ता वाले अनुप्रयोगों के डिजाइन के लिए मार्ग प्रशस्त करने के लिए, आपको पहले आरएक्स, या कम से कम सबसे महत्वपूर्ण ऑपरेटरों का अध्ययन करने की आवश्यकता है। Rx को समझने में कई घंटे खर्च किए बिना वास्तव में उन्नत कोणीय डेवलपर बनना कठिन है।

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

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

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

Rx डेवलपर को कई ऑपरेटर प्रदान करता है जो उसे कुछ कैश करने में मदद कर सकते हैं, या कुछ पैकेज में निर्माण कर सकते हैं। और यह, परिणामस्वरूप, अनुकूलित अनुप्रयोग प्रदर्शन की ओर जाता है। यहाँ RxJS पैटर्न के बारे में सामग्री।

सारांश

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

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

और आप उन लोगों के लिए अध्ययन करने की क्या सलाह देंगे जो उच्च गुणवत्ता वाले कोणीय-अनुप्रयोगों को डिजाइन करना सीखना चाहते हैं?

6 अवधारणाएं जो एक कोणीय अनुप्रयोग वास्तुकार को मास्टर करने की आवश्यकता होती हैं