🆙 🗒️ 🐫 एक उदाहरण के रूप में GitLab का उपयोग करके विरासत कोड से निपटने के तरीके ✋🏾 🚽 👨🏿‍🚀

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

यह गीतालाब में सामने वाले की उपस्थिति की कहानी है।

यह 2016 में शुरू होने वाले, GitLab में फ्रंट-एंड विक्रेताओं की संख्या का एक ग्राफ है, जब वे बिल्कुल भी नहीं थे, और 2019 में समाप्त हो रहे थे, जब पहले से ही कई दर्जन थे। लेकिन खुद गीताब 7 साल के लिए रहे हैं। इसलिए, 2017 तक, बैकएंड डेवलपर्स पर फ्रंटएंड पर मुख्य कोड लिखा गया था, इससे भी बदतर, रूबी ऑन रेल्स पर बैकएंड डेवलपर्स (किसी भी स्थिति में हम किसी को अपमानित नहीं करना चाहते हैं और नीचे बता रहे हैं कि हम किस बारे में बात कर रहे हैं)।

7 वर्षों के लिए, कोई भी परियोजना, चाहे आपको पसंद हो या न हो, अप्रचलित हो रही है। कुछ बिंदु पर, रिफैक्टरिंग को बंद करना असंभव हो जाता है। और यात्रा शुरू होती है, रोमांच से भरी होती है, जिसका अंतिम बिंदु कभी नहीं पहुंचता है। GitLab में ऐसा कैसे होता है, इस बारे में इल्या क्लिमोव ने कहा।

वक्ता के बारे में: इल्या क्लिमोव (xanf) गिटलब में सीनियर फ्रंटेंड इंजीनियर। इससे पहले, उन्होंने स्टार्टअप्स और आउटसोर्सिंग में काम किया, एक छोटी आउटसोर्सिंग कंपनी का नेतृत्व किया। तब मुझे एहसास हुआ कि मेरे पास अभी तक उत्पाद को बनाने का समय नहीं था, और गिटलैब आया।

लेख में इल्या की एक रिपोर्ट पर आधारित है FrontendConf , इसलिए यह इतनी जानकारी की संरचना नहीं है के रूप में वक्ता के अनुभव को दर्शाता है। यह पीढ़ीगत रूप से संवादात्मक लग सकता है, लेकिन विरासत के साथ काम करने के दृष्टिकोण से कम दिलचस्प नहीं है।

GitLab में, कई अन्य परियोजनाओं के रूप में, वे धीरे-धीरे पुरानी प्रौद्योगिकियों से कुछ अधिक प्रासंगिक के लिए पलायन कर रहे हैं:

जावास्क्रिप्ट में CoffeeScript। रूबी ऑन रेल्स के डेवलपर्स, जब उन्होंने परियोजना शुरू की, तो वह मदद नहीं कर सके, लेकिन कॉफ़ीस्क्रिप्ट पर ध्यान दें, जो रूबी के समान दिखता है।
JQuery Vue. , JQuery. GitLab SPA. server-side rendering progressive enhancement, Vue-. , : Vue-, .
Karma Jest. Jest - . Karma , , .
REST GraphQL , , Vuex Apollo. Vuex, Redux Vue, Apollo local state , . GraphQL , .

एक ही समय में, एक साथ कई दिशाओं में प्रतिस्थापन होते हैं, परियोजना में एक साथ विभिन्न चरणों में एक विरासत-कोड होता है।

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

आगे: jQuery, स्व-घटकों और, उच्चतम बिंदु के रूप में स्व-लिखित कक्षाएं, Vuex, अपोलो, जेस्ट, आदि के साथ लिखित नई आधुनिक विशेषताएं।

GitLab पर मेरा योगदान-ग्राफ ऐसा है।

इसमें - और यह कहानी के सार और मेरे सभी दर्द को समझने के लिए बहुत महत्वपूर्ण है - कई खंडों को अलग किया जा सकता है:

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

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

इसलिए, तीन महीने में मैंने किया:

खंडित नियंत्रण - तीन बटन।
खोज स्ट्रिंग जो स्थानीय इतिहास को संग्रहीत करता है वह थोड़ा अधिक जटिल घटक है।
स्पिनर। और यह घटक अभी तक जमे हुए नहीं है।

अगला, चरण दर चरण, हम विश्लेषण करेंगे कि ऐसा क्यों हुआ और इसके साथ कैसे रहना है। यदि यह आपको लगता है कि मैं अतिशयोक्ति कर रहा हूं, तो यहां कुछ कार्यों का स्क्रीनशॉट है जो मुझे GitLab पर लटकाते हैं (आप सीधे GitLab पर देख सकते हैं, यह खुला है)।

देखें: 12.1 से चूक गए, 12.2 से चूक गए, 12.3 से चूक गए। स्प्रिंट एक महीने तक रहता है, और खंडित नियंत्रण - 3 स्प्रिंट। स्पिनर अभी भी गया है, वह हमारा मुख्य चरित्र होगा।

रिफैक्टरिंग की समस्या और रिफ्लेक्टरिंग के दर्शन बहुत समय से मानवता का सामना कर रहे हैं - सहस्राब्दी के लिए। अब मैं साबित करूंगा:

« ; , , ; ; , .

, , , : ».

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

अवसाद के चरण में, मैंने बड़ी परियोजनाओं को फिर से शुरू करने पर बहुत सारी रिपोर्टें देखीं, लेकिन उनमें से लगभग 70% ने मुझे एक मजाक की याद दिला दी।

जेविस्ट बात:
- हम अपने जावा एप्लिकेशन को कैसे गति देते हैं?
- ओह, तो मेरे पास इसके बारे में एक रिपोर्ट थी! क्या आप बताना चाहते हैं?
- बताने के लिए और मैं कर सकता हूँ, मैं गति करूँगा!

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

1. इंसुलेशन

चीजों को गति देने के लिए, सुधार करने के लिए, रिफ्लेक्टर के लिए, आपको हाथी को स्टेक में काटने की आवश्यकता है, अर्थात, कार्य को भागों में विभाजित करें। गिटलैब बहुत बड़ा है, हमारे पास एक स्लैक चैनल है "क्या यह ज्ञात है", जहां लोग "यह एक बग या एक विशेषता है जैसे सवाल पूछते हैं, कौन समझा सकता है?" - और जवाब हमेशा नहीं मिला है।

एक सरल उदाहरण: GitLab में एक ही स्थान के स्क्रीनशॉट, एक दिन के अंतर के साथ लिया गया।

मैं बहुत परेशान था, क्योंकि मैं इस बटन पर काम कर रहा था, और यह सभी एक तरह से या बटन के साथ एक और समस्या है।

क्या हुआ? यह सरल है: हम एक डिज़ाइन सिस्टम विकसित करते हैं, और एक डिज़ाइन सिस्टम के परीक्षण के लिए एक अलग स्टोरी बुक टूल के भाग के रूप में, हम यह जानने के लिए वैश्विक CSS GitLab को अक्षम करते हैं कि CSS घटक वैश्विक CSS से कैसे अलग हैं।

सारांश: सीएसएस अब नहीं बचा हैकम से कम गिटलैब में।

मैं 14 साल से जावास्क्रिप्ट के साथ काम कर रहा हूं और कभी भी ऐसा प्रोजेक्ट नहीं देखा है कि कम से कम एक या दो साल की लंबाई पूरी तरह से प्रबंधित सीएसएस को संरक्षित करे। वैसे, HTML को या तो (निश्चित रूप से GitLab में) बचाया नहीं जा सकता है।

GitLab को लंबे समय तक और बैकेंडोव के लिए विकसित किया गया है। उन्होंने बूटस्ट्रैप का उपयोग करने के लिए एक विवादास्पद निर्णय लिया क्योंकि बूटस्ट्रैप ने बैकएंड-फ्रेंडली लेआउट सिस्टम की पेशकश की थी।

लेकिन घटक अलगाव दर्शन के संदर्भ में बूटस्ट्रैप क्या है? यह लगभग 600-700 वैश्विक कक्षाएं हैं (वास्तव में, प्रत्येक सीएसएस वर्ग वैश्विक है) जो पूरे आवेदन को अनुमति देता है। प्रबंध क्षमता के संदर्भ में, इससे अच्छा कुछ नहीं होगा।

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

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

मैं देखता हूं कि अब हमारे अपने डिजाइन सिस्टम के अधिक से अधिक भाग हैं, और यह अच्छा है।

डिज़ाइन सिस्टम में अलगाव शामिल है, लेकिन चूंकि GitLab बूटस्ट्रैप में पहले से ही लिखा गया था, हमारे डिज़ाइन सिस्टम का लगभग 50-60% बूटस्ट्रैप / Vue घटकों पर एक आवरण है, जिनकी कार्यक्षमता में कमी है। यह आवश्यक है ताकि डिजाइन सिस्टम आपको घटक का गलत तरीके से उपयोग करने की अनुमति न दे। यदि हम एक अमूर्त पुस्तकालय के बारे में बात करते हैं, तो वहां लचीलापन महत्वपूर्ण है, उदाहरण के लिए, आपके द्वारा इच्छित किसी भी बटन को बनाने की क्षमता। यदि गिटलैब स्पिनर डिजाइनरों द्वारा अनुमोदित चार आकार हो सकते हैं, तो आपको शारीरिक रूप से दूसरों को ऐसा करने की आवश्यकता नहीं है।

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

आप कह सकते हैं कि रिएक्ट में CSS मॉड्यूल हैं, Vue ने ऐसी शैलियों को स्कोप किया है जो समान हैं। उनके साथ बहुत सावधान रहें: सीएसएस मॉड्यूल 100% अलगाव प्रदान नहीं करते हैं क्योंकि वे केवल कक्षाओं के साथ काम करते हैं। और Vue में छितरी हुई शैलियों के साथ, एक बहुत ही दिलचस्प परिदृश्य महसूस किया जा सकता है जब शीर्ष घटक की शैली माता-पिता के मूल तत्व में आती है, और डेटा विशेषताओं का उपयोग वहां किया जाता है जो धीमा हो जाता है।

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

स्पिनर को वापस। उन तीन महीनों में, जिनसे मैंने उससे लड़ाई की, कुछ समय के लिए मैं एक रोमांचक व्यवसाय में लगा रहा: सफाई।

एक वर्ग loading-containerएक स्पिनर का कार्यान्वयन विवरण है, अर्थात, यह एक स्पिनर कार्यान्वयन के अंदर एक वर्ग है। हमने तय किया, क्योंकि सीएसएस को बचाया नहीं जाना है, पजामा में परमाणु सीएसएस पर आधारित अलग सीएसएस बनाने के लिए। मैं व्यक्तिगत रूप से परमाणु सीएसएस अवधारणा को पसंद नहीं करता हूं, लेकिन हमारे पास वही है जो हमारे पास है।

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

2. टेस्ट

GitLab में टेस्ट सभी कोड को कवर करते हैं, विश्वसनीयता प्रदान करते हैं। और इसलिए पाइपलाइन 98 मिनट में पूरी होती है।

GitLab GitLab.com पर सार्वजनिक धावकों के समय का 40% एकत्र करता है क्योंकि GitLab प्रत्येक मर्ज अनुरोध के लिए पाइपलाइन एकत्र करता है।

मैं बहुत प्रेरित था: मुझे आखिरकार एक परियोजना मिली जहां सब कुछ परीक्षणों में शामिल है! बैकएंड कोड कवरेज 100% के करीब है, और मेरे आगमन के समय फ्रंट-एंड कोड 89.3% द्वारा कवर किया गया था ।

दुर्भाग्य से, यह पता चला कि इस कवरेज का अधिकांश हिस्सा कचरा है क्योंकि:

जब परिवर्तन किए जाते हैं तो वे टूट जाते हैं जो घटकों से संबंधित नहीं होते हैं;
जब परिवर्तन किए जाते हैं तो टूटता नहीं है।

मैं उदाहरणों के साथ समझाऊंगा। हमने जेस्ट को लिया क्योंकि हमने सोचा था कि वह हमें कुछ स्थितियों में अभिकथन लिखने के लिए नहीं बल्कि स्नैपशॉट का उपयोग करने की अनुमति देगा। समस्या यह है कि यदि आपने जेस्ट को कॉन्फ़िगर नहीं किया है और सही सीरियलाइज़र जोड़ते हैं, तो Vue Test Utils बस HTML में सहारा को आउटपुट करता है। फिर, उदाहरण के लिए, यह नाम उपयोगकर्ता के साथ प्रॉपर निकलता है, जिसमें नाम डेटा के साथ पैरामीटर में प्रॉपर था, जिस पर ऑब्जेक्ट ऑब्जेक्ट पास किया गया था। प्रेषित डेटा के प्रारूप में कोई भी बदलाव स्नैपशॉट की विफलता का कारण नहीं बनता है।

रूबी डेवलपर्स का उपयोग परीक्षण करने के लिए किया जाता है, मोटे तौर पर बोलना, सभी तरीकों को कवर करना।

जब हम Vue या React घटकों के लिए परीक्षण करते हैं, तो हमें यह परीक्षण करने की आवश्यकता होती है कि सार्वजनिक API कैसे व्यवहार करता है।

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

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

पिनिंग टेस्ट

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

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

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

नतीजतन, कुल 8-9 हजार लाइनों के लिए परीक्षण को फिर से शुरू करने के साथ मेरे 18 मर्ज अनुरोध, कुल चैंज लगभग 20 हजार हो गए, क्योंकि 11 हजार कट गए थे।

उसी समय, औपचारिक रूप से, मैंने एक चीज की खातिर इन सभी परीक्षणों को फिर से काम में लिया: स्पिनर वर्गों के बारे में कथनों को हटाने के लिए, और इसके बजाय यह जांचने के लिए कि सही प्रॉपर वाले स्पिनर को वहां प्रस्तुत किया गया है।

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

3. प्रतिरोध

एक और कार्यक्षमता है कि मेरे अधिक स्पिनर GitLab डिजाइन सिस्टम की प्रतीक्षा कर रहे हैं - ये साधारण SVG आइकन हैं।

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

यहां एक महत्वपूर्ण बिंदु यह है कि आप अनिवार्य रूप से मुठभेड़ करेंगे। रिफैक्टरिंग निरंतर सुधार की एक प्रक्रिया है। लेकिन जल्द या बाद में आपको रोकना होगा।

यह पूरी तरह से बंद करने के लिए सामान्य है, रिफैक्टरिंग को पूरा नहीं करता है, लेकिन ठोस औसत दर्जे का सुधार हो रहा है।

लेकिन अगर आप एक विरासत परियोजना पर काम कर रहे हैं, तो आप अनिवार्य रूप से ऐसे लोगों के पार आएंगे जो ऐसा करते हैं।

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

आपका कार्य जितना संभव हो सके इस का विरोध करना है। यह लड़ना अपेक्षाकृत आसान है, लेकिन इससे भी बड़ा पाप है। कभी-कभी रिफैक्टिंग की प्रक्रिया में आप एक समस्या भर में आते हैं, और आम तौर पर एक तरफ जाने की इच्छा होती है।

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

रिफैक्टिंग, जैसे घर की मरम्मत करना - इसे खत्म करना असंभव है, आप केवल इसे रोक सकते हैं।

रिफैक्टरिंग का पहला 80% समय 20% लेता है, शेष 80% रीफैक्टरिंग (बस उसी तरह) समय का दूसरा 80% लेता है।

यह महत्वपूर्ण है कि रिफैक्टरिंग प्रक्रिया के दौरान नए हैक्स न लगाए जाएं। मेरा विश्वास करो, विकास की प्रक्रिया के दौरान, वे स्वयं दिखाई देंगे।

4. उपकरण

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

मैं समझाऊंगा कि क्या दांव पर लगा है। जबकि मुझे पता था कि ऐतिहासिक रूप से क्या और क्यों ऐसा हुआ था, मेरी across०% खोजों में ३ code हजार पंक्तियों के पूर्व-निर्धारित कोड थे। इतिहास का उपयोग करना लगभग असंभव था, और मुझे वीएस कोड के लिए प्लग-इन को कॉन्फ़िगर करना था ताकि परिवर्तनों के इतिहास की खोज करते समय यह इस प्रतिबद्ध को बाहर कर दे।

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

उपकरण चुनने की प्रक्रिया में, आप भाग्य के साथ टॉस खेलते हैं, और वास्तव में जीतने की कोशिश करते हैं।

GitLab को CoffeeScript के साथ बचपन की चोट थी। यही कारण है कि GitLab में टाइपस्क्रिप्ट में लिखने के सैद्धांतिक विचार को भी धक्का देना असंभव है। सब कुछ एक साधारण तर्क में टूट जाता है: क्या यह कॉफ़ीस्क्रिप्ट के साथ वैसा ही नहीं होगा जब जावास्क्रिप्ट में संकलित भाषा की मृत्यु हो गई है।

उपकरण चुनते समय, कोशिश करें कि उपकरण को प्रतिस्थापित किया जा सके, या, चरम मामलों में, स्वतंत्र रूप से बनाए रखा जाए।

हम GitLab में डेंजर नामक एक शांत चीज़ का उपयोग करते हैं।

यह 2019 में उनकी वेबसाइट का एक वास्तविक स्क्रीनशॉट है । लेकिन, सहयोगियों ने कहा कि वास्तव में 2019 में साइट कुछ भी दिख सकती है।

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

"इस फ़ाइल में एक ESlint अक्षम टिप्पणी है, इसे ठीक करें।"
“यह फ़ाइल इस व्यक्ति द्वारा शासित हुआ करती थी। शायद आपको इस पर समीक्षा करने की आवश्यकता है। ”

मेरी राय में, यह कोड आधार की स्थिति की निगरानी के लिए एक बहुत अच्छा, महत्वपूर्ण और एक्स्टेंसिबल ढांचा है।

5. अमूर्तता

मैं एक उदाहरण से शुरू करता हूँ। कुछ महीने पहले, मैंने खबर देखी: “जीआईटीएचयूबी को jQuery से छुटकारा मिल गया। हम एक लंबा रास्ता तय कर चुके हैं और अब jQuery का उपयोग नहीं कर रहे हैं। ” स्वाभाविक रूप से, मैंने सोचा कि हमें GitLab में jQuery से छुटकारा पाने की आवश्यकता है।

एक त्वरित खोज से पता चला कि 300 फाइलों में jQuery का उपयोग किया जाता है। यह डरावना दिखता है, लेकिन कुछ भी नहीं - आँखें डरती हैं, हाथ कर रही हैं। लेकिन नहीं! jQuery GitLab कोड बेस में एक अभिन्न गोंद है, क्योंकि हमारे पास बूटस्ट्रैप है।

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

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

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

6. मेट्रिक्स

आप ऐसा कुछ नहीं कर सकते जिसके परिणाम को मापा नहीं जा सके। GitLab में, हम वह सब कुछ मापते हैं जो हम उद्देश्यपूर्ण तरीके से जानते हैं कि कोड बेहतर काम कर रहा है।

उदाहरण के लिए, हमारे पास कर्मा परीक्षणों (नीला) से जेस्ट (हरा) तक एक माइग्रेशन शेड्यूल है:

आप देखते हैं कि क्रमिक प्रगति है। और हमारे पास बहुत से ऐसे शेड्यूल हैं। लेकिन यह समझना महत्वपूर्ण है कि हमेशा सब कुछ अच्छी तरह से समाप्त नहीं होता है।

मैं एक और उदाहरण दूंगा (रिपोर्ट में डेमो इस क्षण से शुरू होता है )।

यहाँ GitLab उत्पादन में सामान्य मर्ज अनुरोध इंटरफ़ेस है। जाहिर है, हम फ़ाइलों को ध्वस्त कर सकते हैं, शीर्ष लेख पर क्लिक करें और फ़ाइल ढहने लगेगी।

आपको क्या लगता है, 50 लाइनों की फाइल को ढहने में कितना समय लगता है, जबकि आठवीं पीढ़ी के कोर i7 वाली मशीन अधिकतम प्रदर्शन के लिए मुड़ जाती है? तैनाती में कितना समय लगता है?

फ़ाइल को ढहने में लगने वाला समय 7 से 15 सेकंड तक होता है। तैनाती तुरंत होती है। फिर से तैयार करने से पहले, दोनों ने समान रूप से तेजी से काम किया।

इसलिए मेट्रिक्स होना बहुत जरूरी है।

मैं आपको बताता हूँ कि यहाँ क्या हो रहा है। यह वीयू है, इसकी प्रतिक्रियाशीलता प्रणाली मूल्य का ट्रैक रखती है: यदि यह बदलता है, तो इस मूल्य पर निर्भर सभी निर्भरताएं कहते हैं। प्रत्येक पंक्ति एक Vue घटक है जिसमें कई चीजें होती हैं, क्योंकि आप टिप्पणियों को एक पंक्ति में रख सकते हैं, टिप्पणियां गतिशील रूप से सर्वर से लोड की जा सकती हैं, आदि। यह सब Vue-store की सदस्यता है, जो Vue घटक भी है।

जब आप मर्ज अनुरोध को बंद करते हैं, तो सभी कहते हैं, स्टोर अपडेट होने पर 20 हजार स्टोर सब्सक्रिप्शन को अपडेट करना होगा। यदि पंक्ति हटा दी जाती है, तो उसे निर्भरता से हटा दिया जाना चाहिए। और फिर सरल गणित: आपको उन 20 हजार तत्वों की एक सरणी को देखने की जरूरत है, जिन्हें खोजने की आवश्यकता है। मान लीजिए कि ऐसी 500 लाइनें हैं, और प्रत्येक पंक्ति कई घटक हैं। परिणाम एक गणितीय ऑपरेशन O (N) है, अर्थात O (20,000) * 500 है। जावास्क्रिप्ट यह सब समय से चल रहा है।

तैनाती तुरंत होती है, क्योंकि एक निर्भरता जोड़ना सरणी के लिए एक धक्का है, अर्थात। गणितीय ऑपरेशन ओ (1)।

कभी-कभी कोड की गुणवत्ता में सुधार प्रदर्शन और अन्य मैट्रिक्स को नीचा दिखाता है। उन्हें मापना बहुत महत्वपूर्ण है।

संक्षेप में: खराब कोड को अलग करें और मैट्रिक्स का ट्रैक रखें।

legacy — . , – TechLead Conf — , . – , legacy Python, PHP.

, ++, , FrontendConf. .

एक उदाहरण के रूप में GitLab का उपयोग करके विरासत कोड से निपटने के तरीके