चींटी डिजाइन के बारे में हम क्या जानते हैं

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

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

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

चींटी डिजाइन

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

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

क्यों चींटी डिजाइन अच्छा है

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

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

टेबल

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

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

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

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

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

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

कॉलम और शीर्षक का निर्धारण
शायद बड़ी मात्रा में डेटा प्रदान करने के लिए सबसे लोकप्रिय विशेषता। आप बाएँ और दाएँ दोनों स्तंभ, तालिका शीर्षक और यहां तक ​​कि सभी को एक साथ ठीक कर सकते हैं। यह समय-समय पर बग्स के बिना काम करता है, लेकिन काफी सहनशीलता से।

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

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

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


समस्या आसानी से हल हो जाती है, लेकिन अप्रिय जब आप पहली बार इसके पार आते हैं।

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

आकार

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

बनाए गए फ़ॉर्म में, आप साधारण वस्तुओं के साथ सत्यापन नियम जोड़ सकते हैं, Redux Store के साथ फ़ील्ड मानों को अलग कर सकते हैं, डिफ़ॉल्ट फ़ील्ड मानों को अलग से स्टोर कर सकते हैं, फिर उन्हें एक विधि कहकर लागू कर सकते हैं ... बहुत सारी संभावनाएँ हैं। शुरुआती अक्सर चींटी डिज़ाइन रूपों के घटकों का उपयोग अलग-अलग करना शुरू करते हैं, इसलिए इससे पहले कि आप चींटी डिज़ाइन वाले प्रोजेक्ट पर फ़ॉर्म का उपयोग करना शुरू करें, हम अनुशंसा करते हैं कि आप फॉर्म पर प्रलेखन के अनुभाग को ध्यान से पढ़ें - इस उपकरण के मालिक के लिए बहुत सारी साइकिल लिखने की आवश्यकता समाप्त हो जाती है।

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

• इनपुट और InputNumber दो अलग-अलग घटक हैं
• DatePicker केवल एक दिन या अवधि का चयन कर सकती है। हमें दो या अधिक स्वतंत्र तिथियों का चयन करने की क्षमता को तेज करने का कोई तरीका नहीं मिला।
• रेंजपिकर अक्सर मोबाइल उपकरणों पर फिट नहीं होता है। आपको दो DatePickers का उपयोग करना होगा।
• टाइमपिकर तीन संयुक्त चयनों (घंटे, मिनट, सेकंड) के रूप में बनाया गया है, जो हर किसी के लिए परिचित नहीं हो सकता है।
• अपलोड घटक API हमें बहुत लचीला नहीं लग रहा था।

अनुकूलन और स्थानीयकरण

अपने चींटी डिजाइन विषय को अनुकूलित करने के लिए एक अनुशंसित तरीके के रूप में, यह सुझाव दिया जाता है कि आप less-loader साथ less-loader चर को फिर less-loader । यह विधि बहुत ही क्रूर लगती है और इसमें js-object के रूप में थीम कॉन्‍फ़िगरिंग को सम्‍मिलित करना शामिल है। बोनस, हालांकि, अतिरिक्त आयात के बिना असेंबली के सभी कम फ़ाइलों में कॉन्फ़िगरेशन में निर्दिष्ट चर का उपयोग करने की क्षमता है।

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

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

अंतर्राष्ट्रीयकरण के लिए, Ant Design, LocaleProvider आवरण और चुनने के लिए स्थानों की एक सूची प्रदान करता है। ru_RU सूची में है।

कुल मिलाकर

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