जैसा कि हमने लिखा है, हमारे स्वयं के होस्टिंग कंट्रोल पैनल के सामने: फ्रेमवर्क और बैकडोर

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

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

फ्रेमवर्क पसंद: आप एक नए की तलाश क्यों कर रहे थे

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

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

क्यों एसपीए?

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

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

क्यों Vue?

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

1. Vue एक सरल घोषणात्मक ढांचा है, यहां तक ​​कि कोडर्स भी इसे समझ सकते हैं। यदि कुछ भी हो, तो उसके लिए डेवलपर ढूंढना आसान है या केवल एक दोस्त को सिखाएं। इसका मतलब यह है कि हमें एक नए डेवलपर को खोजने और परियोजना में प्रवेश करने में समस्या नहीं होगी यदि कोई ट्राम मुझे पार करता है (देवताओं की प्रशंसा, वे मेरे शहर में नहीं हैं)।
2. Vue SPA अनुप्रयोगों को लिखने के लिए उद्देश्यपूर्ण है।
3. मुझे अपनी आंखों के सामने रिएक्ट विकसित करने का अनुभव था और मैंने सुझाव दिया कि Vue की लोकप्रियता भी बढ़ेगी। अब फ्रेमवर्क को लोकप्रिय JS चौखटों के TOP-3 में शामिल किया गया है (यह खोज क्वेरी से जांचना आसान है), जो केवल React और Angular के लिए दूसरा है। उसके पास अच्छा समर्थन, एक विकसित पारिस्थितिकी तंत्र और एक बड़ा समुदाय है।
4. विकास की गति। व्यक्तिगत रूप से, मैंने तुरंत Vue को एक प्रकार के निर्माणकर्ता के रूप में समझना शुरू कर दिया और उस पर विकास बहुत तेज है: अगर मुझे ज़रूरत है, उदाहरण के लिए, एक तारीख बीनने वाला, सबसे अधिक संभावना Vue पर यह पहले से मौजूद है, समुदाय द्वारा उपयोग और परीक्षण करने के लिए स्वतंत्र है। मैं सिर्फ परियोजना में घटक स्थापित करता हूं, एक टैग लिखता हूं और सब कुछ काम करता है। वास्तव में, हमारे पैनल में 70-80% तैयार पुस्तकालय हैं। मेरा मतलब है कि घटक का उपयोग, कोड आधार के आकार का नहीं, जिसे एक कमांड के साथ चेक किया जा सकता है जैसे: npx intricic / loc

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

Habré पर इसके निर्माता से Vue के बारे में एक अद्भुत लेख है , और मैं हमारे आवेदन की कुछ विशेषताओं के बारे में बताऊंगा।

रेस्टापी सेवा के साथ Vuex सिंक

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

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

घटना बस

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

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

1. सबसे पहले, दुर्लभ आवश्यकता के कारण
2. दूसरे, हमारे सभी रूप गतिशील रूप से उत्पन्न होते हैं और किसी भी रूप के लिए फ़ील्ड का सेट नाटकीय रूप से बदल सकता है।

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

पैनल के साथ RestAPI बातचीत

पुराने jQuery फ्रेमवर्क में इंटरफ़ेस को और अधिक संवेदनशील बनाने के लिए, रेस्टापी से क्लाइंट एप्लिकेशन के फीडबैक को एक चालाक टाइमर सिस्टम के माध्यम से अनुकरण किया गया था: यह एक निश्चित अंतराल पर रेस्टापी के चुनावों को चलाता था और परिवर्तनों को प्रभावित करने वाले DOM नोड्स को फिर से तैयार करता था।

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

एक नए पैनल में इस समस्या को हल करने के लिए, मैंने Nginx वेब सर्वर के लिए Nchan मॉड्यूल से बंडल और HTML5 इंटरफेस - EventSource और WebWorker की नई सुविधाओं का उपयोग करने का निर्णय लिया।

Nchan मॉड्यूल, Websocket, EventSource और Long-Polling के माध्यम से संदेश भेजने का समर्थन करता है। मैंने कई परीक्षण किए और EventSource का उपयोग करने का निर्णय लिया: संदेश केवल पाठ हो सकते हैं और संदेश केवल एक दिशा (सर्वर से) में प्रवाहित होते हैं। इससे कार्य पूरी तरह से हल हो गया।

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

बैकसाइड: मैं और घटक सुरक्षा की जांच कैसे और क्यों करते हैं

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

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

मैं हमेशा "setup.json" फ़ाइल के "स्क्रिप्ट" फ़ील्ड में हुक को प्रीइंस्टॉल्ड, इंस्टाल और इंस्टाल करने के लिए पैकेज की जाँच करता हूँ। इसके अलावा, मैं रिटायर , snyk और npm पैकेज मैनेजर के "ऑडिट" कमांड जैसे स्टैटिक पैकेज एनालाइज़र का उपयोग करता हूं।

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

यदि एक पुस्तकालय ने एक बार खुद को समझौता कर लिया है, तो इसे प्रतिस्थापित करना बेहतर है - यह अविश्वसनीयता का संकेत है, इसलिए चेतावनियों के साथ मैं दूसरे पुस्तकालय की तलाश करता हूं।

पैकेज के विश्लेषण पारित होने के बाद, मैं निश्चित रूप से इसके संस्करण को ठीक कर दूंगा। यदि आपको एक अलग संस्करण की आवश्यकता है - पैकेज फिर से विश्लेषण से गुजरता है। हां, इसमें समय लगता है, लेकिन यह इसके लायक है।

अब तक, बैकडोर हमारे उत्पादन के लिए कभी नहीं आए हैं।

बहुत सी टिप्पणियाँ

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

क्यों मैं एक पूरे के रूप में नए दृश्य और पैनल के साथ प्यार में गिर गया

कोड को बनाए रखना आसान हो गया है

विकास को आधा साल लगा। अब मुझे पैनल समर्थन में अधिक संभावना है, मेरा कोड प्रेस नहीं करता है और रगड़ता नहीं है।

ग्राहकों को जल्दी से वे क्या अनुरोध कर सकते हैं।

बैकेंड में दिखाई देने वाली नई सुविधाओं को जोड़ने के लिए यह तेज़ और सुविधाजनक हो गया: उदाहरण के लिए, मैंने 2 दिनों में कानूनी संस्थाओं के लिए भुगतान जोड़ा, 1 दिन में स्नैपशॉट।

मैं सवालों के लिए खुला हूं

इस लेख में, हमने हमारे पैनल के दृश्यपटल से संबंधित कुछ रहस्यों का खुलासा किया। यदि आपके कोई प्रश्न हैं - टिप्पणी में आपका स्वागत है, तो मैं उत्तर देने का प्रयास करूंगा।

और, ज़ाहिर है, मैं आपको पैनल में सुधार के लिए सुझाव व्यक्त करने के लिए आमंत्रित करता हूं।

हमारे Instagram डेवलपर की सदस्यता लें