कोरोलेव। वेब के लिए दवा

लगभग एक साल पहले, निकिता प्रकोपोव के सॉफ्टवेयर में निराशा पर प्रकट लेख जारी किया गया था। सकारात्मक प्रतिक्रिया को देखते हुए, डेवलपर्स अपने उत्पादों की गुणवत्ता के प्रति उदासीन नहीं हैं। शायद यह अभिनय शुरू करने का समय है?

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

आगे पढ़ने से पहले लिंक का अनुसरण करें । कुछ गेम खेलने की कोशिश करें। डेस्कटॉप से ​​अधिमानतः खेलें।

थोड़ा सा इतिहास

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

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

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

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

कोरोलेव कैसे काम करता है

तो, क्या होगा अगर हम रिपोर्ट के बिंदु पर लौटते हैं? वह पल जब कोई व्यक्ति पृष्ठ को फिर से लोड किए बिना सामग्री को अद्यतन करने के विचार के साथ आया, और ऐतिहासिक अनिवार्यता ने AJAX को जन्म दिया? क्या होगा यदि आप सर्वर पर सब कुछ छोड़ देते हैं और एक पतली ग्राहक बनाते हैं? सबसे अच्छी साइटें सर्वर पेज प्री-रेंडरिंग (SSR) करती हैं ताकि उपयोगकर्ता JS लोड होने और शुरू होने से पहले इंटरफ़ेस देख सके। आप आगे जा सकते हैं और क्लाइंट पर केवल उस कोड को छोड़ सकते हैं जो I / O प्रसंस्करण के लिए ज़िम्मेदार है, अन्तरक्रियाशीलता के लिए वर्तमान आवश्यकताओं को देखते हुए। इस बारे में विचार कोरोलेव परियोजना में देखे गए ।

यह क्लाइंट की तरफ से कैसे काम करता है? उपयोगकर्ता पृष्ठ पर आता है। सर्वर जेनरेट किए गए HTML और एक छोटी स्क्रिप्ट (बिना कंप्रेशन के ~ 6 Kbytes) देता है जो वेब सॉकेट के माध्यम से सर्वर से जुड़ता है। जब कोई उपयोगकर्ता किसी घटना (उदाहरण के लिए, एक क्लिक) पर आग लगाता है, तो स्क्रिप्ट सर्वर पर भेजती है। घटना को संसाधित करने के बाद, सर्वर "एक नया <div> वहां जोड़ें", "ऐसे तत्व में एक वर्ग जोड़ें", "इस तरह के और इस तरह के एक तत्व को हटाएं" फॉर्म के आदेशों की एक सूची तैयार करता है। क्लाइंट आदेश सूची को DOM पर लागू करता है। जैसे, HTML के साथ काम नहीं होता है - स्क्रिप्ट सीधे DOM के साथ काम करती है, इसलिए चिंता न करें कि फॉर्म की सामग्री या स्क्रॉल की स्थिति रीसेट हो जाएगी।

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

डेवलपर के कोड और हेड में क्या होता है? ऊपर आप रिएक्ट की याद दिला सकते हैं, इस अंतर के साथ कि सब कुछ सर्वर पर चलता है। विकास के दृष्टिकोण के संदर्भ में, हमारे पास भी कुछ ऐसा ही है। इसलिए, यदि आपने रिएक्ट या किसी अन्य "वर्चुअल डोम" के साथ काम किया है, तो रानी का दृष्टिकोण आपसे परिचित होगा। यदि आप रिएक्ट से परिचित नहीं हैं, तो कल्पना करें कि आपके पास डेटा है जिसे आप टेम्पलेट में सम्मिलित करते हैं। कल्पना करें कि टेम्पलेट के अनुसार, घटना हैंडलर बिखरे हुए हैं जो डेटा को बदल सकते हैं (लेकिन डोम नहीं)। आप डेटा बदलते हैं, पेज अपने आप बदल जाता है। कोरोलेव स्वयं डोम को बदलने के तरीके के साथ आता है।

उत्पादकता

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

सर्वर लोड के बारे में सवाल आमतौर पर beckenders द्वारा पूछा जाता है। परिवर्तन आउटपुट इंजन बहुत तेज़ी से काम करता है: ~ 2013 के जूनियर मैकबुक पर 500 नोड्स के दो मनमाने पेड़ों के लिए प्रति सेकंड 10 हजार निष्कर्ष। स्थैतिक प्रतिपादन भी एक बहुत अच्छा परिणाम देता है: प्रति सेकंड 1 मिलियन पृष्ठों तक। प्रत्येक "वर्चुअल डोम" एक विशेष क्रमबद्ध रूप में संग्रहीत और संसाधित किया जाता है और औसत वेब पेज के लिए 128 केबी लेता है। आउटपुट प्रक्रिया विशेष रूप से अनुकूलित है और मेमोरी और जीसी के लिए एक ओवरहेड नहीं है।

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

कीमत

आपको लाभ के लिए भुगतान करना होगा। कुछ आदतों को छोड़ना होगा, और कुछ नए हासिल करने होंगे। उदाहरण के लिए, आपको JS एनिमेशन को छोड़ना होगा और CSS एनिमेशन से संतुष्ट होना होगा। आपको यह सीखना होगा कि यदि आप उच्च गुणवत्ता वाले विभिन्न देशों के उपयोगकर्ताओं की सेवा करना चाहते हैं तो बुनियादी ढांचे को शुरू में भू-वितरित कैसे किया जाए। जेएस को छोड़ना और स्काला जाना है।

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

निष्कर्ष

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

गिथब पर परियोजना के लिए लिंक