जावास्क्रिप्ट MVC फ्रेमवर्क का भविष्य

पेश है ओम

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

रोको, रोको, रोको। लेकिन अपरिवर्तनीय डेटा संरचनाओं का प्रदर्शन जावास्क्रिप्ट MVC के साथ क्या करना है? - आवश्यक पर्याप्त।

यह समझाने के लिए बहुत आसान नहीं हो सकता है, लेकिन फिर भी मैं कोशिश करूंगा। तथ्य यह है कि नई ओम लाइब्रेरी में प्रस्तुत अपरिवर्तनीय डेटा संरचनाएं आपको लोकप्रिय जेएस एमवीसी फ्रेमवर्क जैसे कि एमवीसी बैकबोन.जेएस (मैनुअल अनुकूलन के बिना) की तुलना में अधिक कुशलता से एप्लिकेशन बनाने की अनुमति देती हैं। ओम को फेसबुक के महान ढांचे, रिएक्ट पर बनाया गया है। यदि आपने इसके बारे में पहले नहीं सुना है, तो मैं JSConf EU 2013 से एक वीडियो देखने की सलाह देता हूं । एक दिलचस्प तथ्य यह है कि अपरिवर्तनीय संग्रह के कारण, ओम बिना किसी संशोधन के उपयोग करते समय बेहतर परिणाम दिखा सकता है।

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

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

बेंचमार्क खेल

एक ब्राउज़र में ओम टोडोएमवीसी खोलें और पहला बेंचमार्क लॉन्च करें। यह 200 सूची आइटम बनाता है, और सफारी 7 में 11 इंच मैकबुक एयर पर, यह 120ms में चलता है।

अब Backbone.js TodoMVC खोलें और एक समान बेंचमार्क चलाएं। मेरी मशीन पर, पृष्ठ लगभग 500ms में प्रदान किया गया।

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

आइए इन बेंचमार्क के लिए क्रोम देव टूल्स के प्रोफाइल पर नज़र डालें। हम गैर-अनुकूलित Backbone.js की तुलना में बॉक्स के बाहर प्रतिक्रिया / ओम के काम में एक बड़ा अंतर देख सकते हैं:

प्रतिक्रिया / ओम:


Backbone.js:


मेरी राय में, प्रतिक्रिया / ओम ग्राफ से पता चलता है कि वैश्विक अनुकूलन और सुधार के लिए बहुत अधिक अवसर हैं।

ठीक है, महान काम! लेकिन फिर भी ... 2-4 गुना से केवल 3 मुख्य ब्राउज़रों में उत्पादकता में वृद्धि के तथ्य को कई लोगों के लिए दिलचस्पी का होना चाहिए था। विशेष रूप से यह देखते हुए कि हम अपरिवर्तनीय डेटा संरचनाओं की बदौलत इस स्तर तक पहुँच रहे हैं। ट्विटर पर मेरे द्वारा किए गए कोई 30-40 गुना वृद्धि नहीं है।

अब दूसरा ओम बेंचमार्क आज़माएं - यह 200 तत्व बनाता है, उन सभी को 5 बार स्विच करता है, और फिर उन्हें हटा देता है। मेरे मैकबुक पर सफारी 7 में, यह सब लगभग 5ms में होता है।

अगला, Backbone.js चलाएं। पहले सभी आइटम निकालना सुनिश्चित करें, और फिर दूसरे बेंचमार्क का प्रयास करें। मेरी मशीन पर, सफारी ब्राउज़र में, यह 4200ms के लिए चला।

यह कैसे संभव है? - सरल।

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

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

बेशक, आप प्रतिक्रिया के साथ Backbone.js या अपने पसंदीदा JS MVC फ्रेमवर्क का उपयोग कर सकते हैं, और यह बहुत अच्छा लाभ का एक अच्छा संयोजन है। हालाँकि, मैं इवेंट-ओरिएंटेड MVC सिस्टम में विश्वास नहीं करता। और ऊपर दिए गए मानक इसकी पुष्टि करते हैं। मॉडल और विचार अलग करना केवल पहला महत्वपूर्ण कदम है।

उम्मीद है कि यह वर्तमान जेएस एमवीसी फ्रेमवर्क के प्रशंसकों के लिए विचार करने के लिए कुछ कारण देगा, और यहां तक ​​कि उन लोगों के लिए भी जो केवल देशी जावास्क्रिप्ट और jQuery का उपयोग करने में विश्वास करते हैं। ऊपर, मैंने यह दिखाने की कोशिश की कि एक जावास्क्रिप्ट-संकलित भाषा जो धीमी डेटा संरचनाओं का उपयोग करती है, अंततः अधिक जटिल इंटरफेस बनाने के लिए अपने प्रतियोगी की तुलना में तेज है। सर्वोत्तम परिणामों की सूची के शीर्ष पर अन्य सभी रूपरेखाओं के समान कार्यक्षमता वाला ओम टोडोएमवीसी है , ~ कोड की 260 लाइनें (सभी टेम्पलेट वाले सहित) और 63K गिज़्ड का कम वजन (इसमें सभी शामिल हैं: प्रतिक्रिया - 27K, मानक क्लोजुरस्क्रिप्ट लाइब्रेरी, core.async, राउटिंग लाइब्रेरी, और Google बंद से कई मददगार)।

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

तकनीकी विवरण निम्नानुसार है।

यह कैसे काम करता है

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

प्रतिक्रिया में, एक महत्वपूर्ण कार्य होना चाहिए shouldComponentUpdate, जिसका उपयोग आपके घटकों द्वारा प्रस्तुत वर्चुअल DOM में अंतर की गणना करने के लिए किया जाता है। यदि यह गलत है, तो रिएक्ट कभी भी इस घटक के बच्चों की गणना नहीं करेगा। इस प्रकार, रिएक्ट धीरे-धीरे उन तत्वों के बारे में डेटा प्राप्त करने के लिए एक वर्चुअल डोम ट्री बनाता है जिन्हें बदलने की आवश्यकता होती है।

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

जावास्क्रिप्ट ऑब्जेक्ट्स का उपयोग करने के बजाय, ओम क्लोजुरस्क्रिप्ट से डेटा संरचनाओं का उपयोग करता है, जो कि जैसा कि हम जानते हैं, बदला नहीं जा सकता है। इसके आधार पर, हम एक घटक प्रदान कर सकते हैं जो लिंक की समानता के लिए - सबसे तेज़ चेक का उपयोग करते हुए ,ComComententUpdate को लागू करता है। इसका मतलब यह है कि हम हमेशा लॉगरिदमिक समय में परिवर्तित संरचना का निर्धारण कर सकते हैं।

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

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

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

अंतिम विचार

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