स्केलेबल फ्रंट-एंड प्रोजेक्ट्स के 10 सिद्धांत

1. डिजाइन घटक, स्क्रीन नहीं

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

2. व्यावसायिक तर्क / प्रबंधन से अलग प्रस्तुति परतें

3. मानक डेटा निष्कर्षण विधि का उपयोग करें।

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

4. एक सामान्य उपयोगकर्ता इनपुट रणनीति का उपयोग करें

• इनमें फॉर्म, लेबल चयन, सत्यापन और सत्यापन, त्रुटि की स्थिति शामिल हैं।
• : antd.
• UI-, .

5.

• , , Cypress.
• - .
• e2e smoke- . API.

6. Storybook

7. लिंटर और फॉर्मेटर्स का उपयोग करें

• लिंटर के उदाहरण: ESLint, स्टाइललिंट ।
• अधिकांश क्विक स्टार्ट टूल, जैसे कि क्रिएट-रिएक्शन-ऐप, आपके लिए लिंटर इंस्टॉल करेगा। लेकिन अगर आप पुराने कोड बेस के साथ काम कर रहे हैं, तो लिंटर बेकार हो सकते हैं।
• वे बग खोजने में मदद करते हैं, लेकिन उस कोड को स्टाइल करने के लिए भी उपयोग किया जा सकता है जो टीम लिखती है। यह आपके सहयोगियों से प्राप्त सुविधाओं पर काम करते समय संज्ञानात्मक भार को कम करता है।
• SonarJS eslint प्लगइन उसके तार्किक संरचना की जाँच करके कोड की गुणवत्ता में सुधार करने में मदद करेगा।
• prettier — . . .

8.

• .
• CSS- CSS-in-JS.
• .

9.

• , gitflow — « Git, ».
• . .

• .
• कोणीय में प्रतिबद्ध संदेश लिखने के नियम अक्सर अन्य परियोजनाओं के लिए उपयुक्त होते हैं। और जब आप अपने संदेश लिखते हैं, तो कमेटी इन नियमों का पालन करने में मदद करेगी।

10. चैंज को सपोर्ट करें

यह सूची लम्बी होते चली जाती है