Aviasales के लिए रिएक्ट टेस्ट विकास का अनुभव

नमस्ते, मैं अपने अनुभव को एवालेस के लिए एक परीक्षण मामले को विकसित करने में साझा करना चाहता था।

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

आप लिंक पर परीक्षण कार्य यहां पा सकते हैं।

यहां पूर्ण कार्य के मेरे भंडार का लिंक दिया गया है।

मैंने एक दिन में काम पूरा करने के लिए खुद को सीमित कर लिया (हालांकि मैंने प्रकाशन के बाद मामूली सुधार किया: मैंने स्केच समाप्त कर दिया, इसलिए बोलने के लिए)।

मैंने विकास के लिए क्या चुना:

1. मैंने NextJS को आधार के रूप में चुना, क्योंकि मैं वेबपैक के लिए वातावरण की स्थापना के साथ छेड़छाड़ नहीं करना चाहता, और आप कुछ ही क्लिक के साथ इस परियोजना को तैनात कर सकते हैं।
2. मैं तेजी से लिखना चाहता था और Redux के बजाय MobX के साथ मिलकर प्रतिक्रिया-IOC पैकेज चुना। यह एक पैकेज है जो आपको सेवाओं के माध्यम से अनुप्रयोगों को लिखने की अनुमति देता है जो कोणीय सेवाओं से मिलते जुलते हैं।
3. मैंने वेब वर्कर का उपयोग किया ताकि डेटा की एक बड़ी मात्रा को सॉर्ट करते समय इंटरफ़ेस में कोई अंतराल न हो।
4. मैंने एक परीक्षण कार्य पर समय की बेकार बर्बादी के साथ अतिरिक्त कोड नहीं लिखने के उद्देश्य से टाइपस्क्रिप्ट का उपयोग नहीं किया।
5. अनुच्छेद 4 के आधार पर, मैंने परीक्षण भी नहीं लिखे।
6. मैंने प्रोजेक्ट में दो अतिरिक्त पैकेज जोड़े: डेब्यू, आरएक्सजेएस। सरल कॉलबैक बनाने के लिए सबसे पहले आवश्यक है, उदाहरण के लिए, डाउनलोड स्थिति को बदलना ताकि स्पिनर लोड को प्रदर्शित न करे यदि डाउनलोड में बहुत कम समय लगता है। मैं हमेशा एक्शन स्क्रिप्ट बनाने के लिए दूसरे पैकेज का उपयोग करता हूं, उदाहरण के लिए, सर्वर को अनुरोध भेजते समय एक त्रुटि के मामले में राज्यों को संसाधित करने के लिए।

विकास के पहले चरण के लिए प्रक्रिया:

1. प्रारंभिक भंडार।
2. आरंभिक NextJS परियोजना।
3. एक हैलो वर्ल्ड संदेश के साथ एक इंडेक्स बेस पेज जोड़ा गया।
4. एक टिकट.प्रोविडर सेवा बनाई जो एपि सर्वर के साथ इंटरैक्ट करती है।
5. टिकट.सेवा सेवा का निर्माण किया, जो टिकट इंजेक्ट करती है ।provider और पर्यवेक्षक को प्रदर्शित टिकटों की एक सरणी के साथ भरता है
6. बनाया गया टिकट ।filter.service, जो फ़िल्टर किए गए डेटा को टिकट से इंजेक्ट करता है। @ सेवा के माध्यम से @computed

विकास का दूसरा चरण:

1. टास्क रिपॉजिटरी में दिए गए लेआउट का उपयोग करके उनके लिए बनाए गए घटक और चित्रित शैलियाँ।
2. मैंने डाउनलोड का एक स्पिनर बनाया और सेवाओं से इसका मूल्य कम किया।
3. घटकों के साथ सभी सेवा तर्क जुड़े।
4. डेटा स्वरूपण के साथ उपयोगिताओं को जोड़ा गया, जैसे समय और पैसा।

तब मैंने "टच" इंटरफेस की कोशिश करने का फैसला किया और एप्लिकेशन का उपयोग करते समय खामियां पाईं:

1. फ़िल्टर बदलते और छँटाई करते समय इंटरफ़ेस मंदी होती है, इसलिए मैंने वेब वर्कर को डेटा के भंडारण, पुनर्प्राप्ति और फ़िल्टरिंग को स्थानांतरित कर दिया, जिसके बाद लैग्स पूरी तरह से गायब हो गए।
2. स्पिनर ने जंपिंग लाइन एनीमेशन को ठीक नहीं किया, इसलिए मैंने इसे टिमटिमाते एनीमेशन के साथ लाइनों के दृश्य प्रदर्शन के साथ बदल दिया।
3. डेटा रेंडरिंग में आसानी के लिए, मैंने वेब वर्कर को डेटा फ़ॉर्मेटिंग कॉल हस्तांतरित की, इससे घटक रेंडरिंग पर लोड कम हो जाता है

फिर मैंने अपना काम खत्म किया और दिन के अंत में सत्यापन के लिए एक कार्य भेजा।

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

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

मैंने उनसे 7 दिनों तक प्रतिक्रिया का इंतजार किया, उन्होंने मेरे किसी भी संदेश का जवाब नहीं दिया। यह एक अप्रिय अनुभव था, इसलिए बोलना था। लेकिन फिर भी उन्होंने जवाब दिया, और जवाब पढ़ने के लिए बेहद परेशान था। संदेश नीचे देखा जा सकता है।

आइए नज़र डालते हैं बिंदुओं पर:

[1]। "काम बहुत सावधानी से किया गया था"

मैं नहीं देखता कि कोई तर्क नहीं है, क्योंकि कोई उदाहरण नहीं है।

[2]। "ऐसा लगता है कि विकास ने" यह काम करता है "के लक्ष्यों का पीछा किया और" यह कैसे काम करता है "को नजरअंदाज कर दिया।

कोई तर्क नहीं, कोई उदाहरण नहीं।

[3]। "उम्मीदवार के स्तर के लिए हमारी आवश्यकताओं के आधार पर, पूरा हुआ कार्य मुश्किल से मध्य तक पहुँचता है।"

आवश्यकताएं क्या हैं? वे कहां हैं?

[4]। “हम उम्मीद करते हैं कि फिल्टर हार्डकोड नहीं होंगे और डेटा के लिए अनुकूल होंगे। यदि आप एविएलेस पर जाते हैं, तो आप देख सकते हैं कि पहली किस्त दिखाई देते ही टिकट तुरंत दिखाए जाते हैं, और हम सभी को लोड होने का इंतजार नहीं करते हैं।

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

[5]। राउटर और विंडो के बारे में “Filter.service क्यों जानता है? उसे आवेदन की स्थिति को नियंत्रित नहीं करना चाहिए और इस तरह की निर्भरताएँ बिल्कुल नहीं होनी चाहिए।

क्योंकि सेवाओं को संपूर्ण एप्लिकेशन की स्थिति, या मॉड्यूल जहां वे मौजूद हैं, को नियंत्रित करने के लिए बनाया जाता है। यहाँ लेखक स्पष्ट रूप से घटकों में सभी तर्क लिखने का सुझाव देता है।

[6]। “वेब वर्कर्स। लाभ क्या है? इस मामले में, अतुल्यकालिक संचालन पर बहुत समय खर्च किया जाता है, और मुख्य थ्रेड में सहेजे गए लोड को क्रमबद्ध / deserialize ऑब्जेक्ट्स (और अवलोकन योग्य ऑब्जेक्ट) पर खर्च किया जाता है। यदि हम अनुकूलन के बारे में बात कर रहे हैं, तो यह वेब वर्कर को हटाने के साथ शुरू करने के लायक नहीं था, लेकिन मुख्य धागे में समस्याओं को ठीक करना था। ”

मैं मुख्य थ्रेड में और एक ही समय में इंटरफ़ेस लैग के बिना बड़ी मात्रा में डेटा के प्रसंस्करण को कैसे संभाल सकता हूं? मेरे लिए यह जानना बेहद दिलचस्प होगा कि यदि किसी के पास कोई उदाहरण है, तो टिप्पणियों में लिखें। जाहिर है मुझे कुछ याद आ रहा है।

[7]। "यह कोई मतलब नहीं है कि परियोजना के लिए rxjs जोड़ने के लिए सिर्फ पुनः प्रयास और अनुक्रमिक लोडिंग को लागू करना है।"

यह समझ में क्यों नहीं आता है? आप RxJS में कड़ाई से आवश्यक कार्यों को आयात कर सकते हैं; यदि वृक्ष हिलाने वाले पैकेज और फ़ंक्शन ठीक से काम नहीं करते हैं, तो इससे एप्लिकेशन का आकार नहीं बढ़ेगा।

[8]। "परियोजना को बढ़ाया और बनाए नहीं रखा जा सकता है। (ticket.segments || [{}, {}]).map((ticket) => ...) बहुत ही बोझिल हैं। ”

आइए स्केलिंग और समर्थन के मानदंड के माध्यम से चलते हैं: पहुंच ticket.segments || [{}, {}] (सेवाएं इस समस्या को हल करती हैं), जोखिम ( ticket.segments || [{}, {}] केवल उदाहरण हैं कि कैसे मामलों से निपटना है यदि इनपुट में डेटा नहीं है। एक उदाहरण खराब है, लेकिन अशक्त संरचना दृष्टिकोण कम से कम, लेकिन मैं पालन करने की कोशिश करता हूं), स्वच्छ कोड (अच्छी तरह से, कम से कम मुझे पता है कि यह क्या है :), हालांकि मैंने सब कुछ लिखने की कोशिश की जैसा कि यह होना चाहिए)। ऐसा लगता है कि सब कुछ कब्जा कर लिया है, फिर से एक तर्क नहीं।

[9]। “मुझे आभास हो गया है कि हुड के तहत रिएक्ट कैसे काम करता है, इसकी बिल्कुल समझ नहीं है। घटकों के लिए प्रॉप्स के साथ काम करने में कई महत्वपूर्ण त्रुटियां हैं जो प्रदर्शन पर बहुत बुरा प्रभाव डालती हैं। प्रतिक्रिया अनुकूलन तंत्रों की अनदेखी की जाती है। ”

मैं नहीं समझ सकता कि ये वर्णित समस्याएं कहां हैं। किस तरह के तंत्र?

[10]। "सौंपनेवाला के अंदर हैंडलर कार्यों का निर्माण।"

मेरे पास किसी भी हैंडलर फ़ंक्शन को प्रस्तुत करने के लिए बिल्कुल भी नहीं है, क्या कोई समझता है कि यहां क्या लिखा गया है? मैंने वेब वर्कर को फ़ॉर्मेटिंग प्रोसेसिंग भी हस्तांतरित की

[11]। “एक नई खाली वस्तु बनाना और उसे टिकट पर स्थानांतरित करना। ticket-list-loading.jsx:10 Ticket.tsx:24 ticket-list-loading.jsx:10 या Ticket.tsx:24 "

लोडिंग-टिकट घटक को अलग से निकालने के लिए मेरे आलस्य को छोड़कर, यहां कुछ भी महत्वपूर्ण नहीं है। खाली वस्तु को पास करना किसी भी प्रोग्रामिंग सिद्धांत का उल्लंघन नहीं करता है, सिवाय इसके कि यहां ticket = ticket || {}; माध्यम से ऐसा करना आवश्यक था ticket = ticket || {}; लेकिन यह विशुद्ध रूप से इस तथ्य के कारण है कि विकास का समय एक दिन तक सीमित था और सभी छोटी खामियों को ठीक करने में अधिक समय लगेगा।

[12]। "टिकट सूची में चाबी के रूप में सूचकांकों को व्यवस्थित करें"

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

और अंत में, निष्कर्ष: "सामान्य तौर पर, प्रतिक्रिया काम नहीं करती थी (
कुल: मध्य स्तर के लिए, हम उम्मीद करते हैं कि प्रतिक्रिया के साथ कोई महत्वपूर्ण समस्या नहीं होगी, लेकिन किए गए काम में बहुत सारे हैं। ”

पहले से कोई टिप्पणी नहीं है ...

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

संदेश का पूरा पाठ:

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

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

इसके अलावा, अधिक तकनीकी बिंदु।

1. क्यों रूटर और खिड़की के बारे में filter.service जानता है? यह आवेदन की स्थिति को नियंत्रित नहीं करना चाहिए और इस तरह की निर्भरता बिल्कुल नहीं होनी चाहिए।
2. वेब वर्कर्स। लाभ क्या है? इस मामले में, अतुल्यकालिक संचालन पर बहुत समय खर्च किया जाता है, और मुख्य थ्रेड में सहेजे गए लोड को क्रमबद्ध / deserialize ऑब्जेक्ट्स (और अवलोकन योग्य ऑब्जेक्ट) पर खर्च किया जाता है। यदि हम अनुकूलन के बारे में बात कर रहे हैं, तो यह वेब कार्यकर्ता में हटाने के साथ शुरू करने के लायक नहीं था, लेकिन मुख्य धागे में समस्याओं को ठीक करना था।
3. इसका कोई मतलब नहीं है कि केवल परियोजना के लिए rxjs को जोड़ने के लिए रिट्री और अनुक्रमिक लोडिंग को लागू करना है।
4. परियोजना को बढ़ाया और बनाए नहीं रखा जा सकता है। कंस्ट्रक्शंस जैसे ( ticket.segments || [{}, {}]).map((ticket) => ticket ) बहुत ही बोझिल हैं।
   प्रतिक्रिया:
   मुझे यह आभास हो गया कि इस बात की बिल्कुल समझ नहीं है कि हुड के नीचे रिएक्ट कैसे काम करता है। घटकों के लिए प्रॉप्स के साथ काम करने में कई महत्वपूर्ण त्रुटियां हैं जो प्रदर्शन पर बहुत बुरा प्रभाव डालती हैं। प्रतिक्रिया अनुकूलन तंत्रों की अनदेखी की जाती है। संक्षेप में समस्याओं के बारे में:
5. रेंडर के अंदर हैंडलर फंक्शन्स बनाना।
6. एक नई खाली वस्तु बनाएं और उसे टिकट पर स्थानांतरित करें। ticket-list-loading.jsx:10 Ticket.tsx:24 ticket-list-loading.jsx:10 या Ticket.tsx:24 . Ticket.tsx:24 ।
7. टिकट सूची में चाबी के रूप में सूचकांकों को व्यवस्थित करें।
   सामान्य तौर पर, रिएक्ट ने काम नहीं किया :(

कुल: मध्य स्तर के लिए, हम उम्मीद करते हैं कि प्रतिक्रिया के साथ कोई महत्वपूर्ण समस्या नहीं होगी, लेकिन किए गए काम में उनमें से बहुत सारे हैं।