2017-02-10 15 views
7

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

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

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

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

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

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

उत्तर

3

प्रतिक्रिया में अधिक जटिल ऐप्स लिखना शुरू करना वास्तव में एक संघर्ष हो सकता है, मुझे पता है कि यह कैसा महसूस करता है!

जैसा कि आप कहते हैं, प्रतिक्रिया एक यूआई lib है और एक घटना ढांचा नहीं है। यही कारण है कि आपको आम तौर पर घटनाओं को संभालने के लिए लाइब्रेरी की आवश्यकता होती है, उदाहरण के लिए रेडक्स। आप स्पष्ट रूप से बताते हैं कि आपने Redux का उपयोग न करने का निर्णय लिया है (आपने यहां तक ​​कि पूंजी अक्षरों का भी उपयोग नहीं किया है :))। अगर मैं आप थे और उस निर्णय पर पुनर्विचार करेंगे तो मैं एक कदम वापस ले जाऊंगा। आप कहते हैं कि रेडक्स का उपयोग न करने का कारण यह है कि Redux का उपयोग करते समय आप अपने घटकों को आसानी से प्लग करने योग्य और पुन: प्रयोज्य नहीं रख सकते हैं। मैं तर्क दूंगा कि यह सच नहीं है। Redux पूरी तरह से आपके प्रतिक्रिया घटकों से decoupled है। रेडक्स केवल घटनाओं को प्राप्त करने और राज्य के प्रबंधन को संभालता है। प्रतिक्रिया घटकों के दृष्टिकोण से, यह केवल प्रोप में डेटा प्राप्त करता है और नियमित कार्यों को कॉल करके ईवेंट भेजता है। अभी भी इकाई परीक्षण, पुन: उपयोग, आदि के लिए संभव है

मैं सुझाव दूंगा कि आप इस पर विचार के साथ रेडक्स पर एक और नज़र डालें। यदि आपके पास और प्रश्न हैं तो मदद करने में प्रसन्नता!

+0

खुशी की संरचना तैयार करना है की देखभाल। 'रेडक्स' के बारे में बात करते हुए, मैंने इसके साथ एक गतिशील फॉर्म घटक लिखने की कोशिश की है और बहुत जल्द उलझन में आया है जब मुझे विभिन्न स्रोतों से राज्य में कॉन्फ़िगरेशन और डेटा फ़ीड करने की आवश्यकता होती है और फिर फॉर्म को सही तरीके से प्रस्तुत किया जाता है और इसके विभिन्न हिस्सों को सिंक में मिलता है । और उसके बाद सत्यापन भाग भी लात मारी, और फिर भिन्नता फ़ील्ड प्रकारों को बनाते हैं, जैसे स्वत: पूर्ण जो ऑनलाइन एपीआई से अपने विकल्पों को लोड करता है। हालांकि, मुझे अभी भी लगता है कि भ्रम की संभावना पुस्तकालय/ढांचे के अनुभव और ज्ञान की कमी के कारण हो सकती है। – Salivan

6

बिल्कुल कोई सवाल नहीं है कि प्रतिक्रिया/Redux (और व्यापक रूप से) आपके द्वारा वर्णित अनुप्रयोगों को विकसित करने के लिए उपयोग किया जा सकता है। आपके विवरण में कुछ भी नहीं है जो आप इतनी अनूठी इमारत बना रहे हैं कि इसमें इसे बनाने के लिए एक मंच के रूप में प्रतिक्रिया शामिल नहीं है। हम सक्रिय रूप से एक बड़े उद्यम ग्राहक के साथ काम कर रहे हैं जो अपने पूरे फ्रंट एंड का निर्माण कर रहा है - 100 + एसपीए (एकल पृष्ठ अनुप्रयोग) के साथ प्रतिक्रिया में। यह एक 2-3 साल की परियोजना में 100 से अधिक डेवलपर्स की एक टीम है।

जिस तरह से हम संरचित इस महत्वपूर्ण रहा है -

पहले, आप एक UI घटक पुस्तकालय चुनना चाहते हैं। नीचे कुछ उदाहरण:

हम मूल रूप से एक ले लिया इनमें से और एक घटक पुस्तकालय का निर्माण किया उन्हें, क्योंकि हमारे घटक बहुत कस्टम स्टाइल हैं।

दूसरा, हमने एक मॉड्यूलर आर्किटेक्चर बनाया, जहां प्रत्येक मॉड्यूल (एसपीए) एक मुख्य कंटेनर घटक और रेडक्स स्टोर के साथ एक एनपीएम पैकेज है।

अंत में, हमारे पास एक केंद्रीय सर्वर पैकेज है, जहां प्रत्येक मॉड्यूल पंजीकृत है। सर्वर पैकेज प्रमाणीकरण, प्रमाणीकरण, लॉगिंग, रूटिंग इत्यादि के लिए ज़िम्मेदार है।

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

+0

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

+0

वेबसाइट पर 100 एसपीए कैसे हो सकते हैं? क्या आपका मतलब है कि आपके पास एक समग्र यूआई है जो एकाधिक आईफ्रेम लोड करता है जिसमें एसपीए होता है? अन्यथा आप जो वर्णन करते हैं उसके लिए आपकी शब्दावली शायद गलत है। – plalx

+0

प्रत्येक एसपीए का अपना यूआरएल होता है। "वेबसाइट" यह वर्णन करने का सही शब्द नहीं हो सकता है कि यह क्या है। यह एसपीए के संग्रह की तरह है जो संगठन की ऑनलाइन उपस्थिति बनाता है। –

2

मैं अभी इसी तरह की स्थिति में हूं। मेरे पास बड़े डेस्कटॉप अनुप्रयोगों में एक पृष्ठभूमि है (ईआरपी, LOB - WinForms, WPF) - 1000+ मॉड्यूल, बहुत गतिशील (यूआई का 70% से अधिक इनपुट डेटा/कॉन्फ़िगरेशन द्वारा उत्पन्न किया गया था), नई कार्यक्षमता जोड़ना कुछ कॉन्फ़िगरेशन को विस्तारित करने के बारे में था (स्रोत कोड को छूए बिना)।

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

मैं कोणीय 2/4 + साथ एक बहुत अच्छा अनुभव है और मुझे लगता है कि अब के लिए, यह अनुप्रयोगों उस तरह के लिए सर्वश्रेष्ठ प्रौद्योगिकी है (यदि आप WPF पता है, यह बहुत समान है)। यह एक पूर्ण ढांचा है, जो बॉक्स के बाहर स्केलिंग के लिए तैयार है।आप अपने ऐप को स्वतंत्र मॉड्यूल में विभाजित कर सकते हैं (यह निर्दिष्ट करना कि कौन से घटक बाहरी दुनिया में दिखाई देंगे), प्रत्येक घटक में सार्वजनिक एपीआई (स्थैतिक रूप से टाइप, इनपुट/आउटपुट) और encapsulated सीएसएस शैलियों (दूसरों के बीच कोई हस्तक्षेप नहीं है) है। वैश्विक स्थिति (उपयोगकर्ता, वैश्विक कॉन्फ़िगरेशन, आदि में लॉग इन) के लिए, आप अभी भी लाइब्रेरी एनजीआरएक्स/स्टोर का उपयोग कर सकते हैं (जो रेडक्स पैटर्न लागू करता है और अतिरिक्त प्रभावों के साथ आता है, जैसे 'प्रभाव' और कोणीय पारिस्थितिकी तंत्र में वास्तव में अच्छी तरह से एकीकृत करता है)।

मैंने कोणीय वास्तव में पागल सामान (गतिशील रूप से बैकएंड कॉन्फ़िगरेशन से पूरे एप्लिकेशन को उत्पन्न करने) में करने की कोशिश की और सब कुछ पूरी तरह से काम किया।

0

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

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

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

घटकों के तर्क को अलग करना प्रतिक्रिया का मूल दृष्टिकोण है ... आपको तर्क लिखना "डमी घटक" अलग करना होगा और कनेक्ट के साथ इसका पुन: उपयोग करना होगा। या प्रोप के रूप में मूल्य गुजर रहा है।

हम कार्य निर्माता के रूप में थंक मध्य-बर्तन का उपयोग कर रहे हैं क्योंकि कनेक्टेड घटक केवल विधि और तर्क को क्रिया रचनाकारों में कॉल करेगा। आप ऐप की पूरी स्थिति तक पहुंच सकते हैं, इससे पहले कि आप कुछ प्राप्त कर सकें और परिणाम पर आधार आप विभिन्न कार्यों को प्रेषित कर सकें।

मैं पर क्या पसंद प्रतिक्रिया/redux कैसे async कॉल आदि सबसे पहले डिजाइन घटक सभी राज्यों

1) मैप करने के लिए लागू करने के लिए की तरह मैं नहीं डेटा 2) डेटा लोड 3) लोड हो रहा है किया 4) है लोडिंग त्रुटि

इसके लिए आपको अपने राज्य में केवल एक सेमफोर चाहिए और कुछ रेंडर विधि में चेक करें। एक एक्शन निर्माता से जो प्रगति का वर्णन करने वाले प्रगति प्रेषण कार्रवाई पर डेटा और आधार लोड करेगा।

यह भी अच्छा है कि प्रतिक्रिया/रेडक्स ऐप में आपके पास एकल डेटा प्रवाह होता है जब नई देव परियोजना में कूद जाती है।

यूआई के लिए हम सामग्री यूआई का उपयोग कर रहे हैं, हाँ इस फ्रेम कार्य में कुछ समस्याएं हैं लेकिन कुछ भी नहीं जो आप निपटने में सक्षम नहीं होंगे।

हम ऐप में नेविगेट करने के लिए राउटर का भी उपयोग कर रहे हैं।

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

हम हमारे लिए शुरू करते हैं इस टेम्पलेट जहां सब कुछ एक परियोजना JavaScriptServices

में काम करता है बंद पाठ्यक्रम महान Abramov ट्यूटोरियल से उपयोगी था।

Storybook

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

1

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

  1. राज्य प्रबंधन,
  2. ट्री स्ट्रक्चर डेटा हैंडलिंग, है
  3. कोड को कम करें,
  4. आपको पता चलेगा कि परिवर्तन कहां किए गए हैं (क्रियाएं, Reducers)
  5. आपका घटक wil एल केवल पता करने के लिए किसी को यहाँ पहले से ही पता है कि हम क्या करने जा रहे हैं यूआई बातें

जो आप करना चाहते अपने डेटा

संबंधित मुद्दे