एक्सट जेएस 5: एमवीसी, एमवीवीएम, आदि।

Sencha Ext JS JS फ्रेमवर्क एंटरप्राइज़ वेब एप्लिकेशन डेवलपमेंट के लिए एक व्यापक विजेट लाइब्रेरी, शक्तिशाली डेटा सपोर्ट और डेवलपमेंट टूल्स का एक समृद्ध समूह बन गया है। 2007 में एक्सट जेएस 1.0 की रिहाई के बाद से, हमारे उद्योग में बहुत कुछ बदल गया है, और वेब अनुप्रयोग निस्संदेह पहले से कहीं अधिक बड़े और अधिक जटिल हो गए हैं।



2010 में, स्नेचा ने टच 1.0 जारी किया, जिससे उद्योग को बड़े वेब अनुप्रयोगों द्वारा सामना की जाने वाली वास्तु समस्याओं का समाधान करने के लिए पहला एमवीसी-सक्षम जावास्क्रिप्ट ढांचा मिला। हमने तब 2011 में एक्सट जेएस 4.0 के लिए एक ही दृष्टिकोण लिया, एंटरप्राइज़ वेब अनुप्रयोगों की नई दुनिया में कोड को व्यवस्थित करने में मदद की।



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

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

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



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

MVC क्या है?

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







एमवीसी कार्यान्वयन अलग-अलग अनुप्रयोगों के लिए भिन्न हो सकते हैं, लेकिन मूल रूप से, प्रत्येक भाग अपने स्वयं के लिए जिम्मेदार है:

• मॉडल - एप्लिकेशन में उपयोग किए जाने वाले डेटा प्रारूप का वर्णन करता है। व्यावसायिक नियम, सत्यापन नियम और कुछ अन्य कार्य हो सकते हैं।
• देखें - उपयोगकर्ता को डेटा प्रदर्शित करता है। अलग-अलग विचार एक ही डेटा को अलग-अलग तरीकों से प्रदर्शित कर सकते हैं (उदाहरण के लिए, टेबल और ग्राफ़)।
• नियंत्रक MVC अनुप्रयोग का केंद्रीय भाग है। यह एप्लिकेशन के भीतर घटनाओं पर नज़र रखता है और मॉडल और दृश्य के बीच कमांड वितरित करता है।

एमवीसी: उदाहरण

आइए Sencha Fiddle में एक उदाहरण देखें :







इस उदाहरण में, हम एक साधारण MVC एप्लिकेशन देखते हैं जिसमें एक मास्टर / डिटेल स्कीम शामिल है। मुख्य (मास्टर) दृश्य (Ext.grid.Panel) में रिकॉर्ड होते हैं, जो चयनित होने पर, संबंधित अधीनस्थ (विवरण) दृश्य (Ext.form.Panel) भरें। "सहेजें" बटन पर क्लिक करने से (सबव्यू में) मास्टर में प्रविष्टि को अपडेट करता है।



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



थोड़ी देर बाद हम इस उदाहरण पर लौटेंगे, लेकिन अब हम एक वैकल्पिक वास्तुकला पर विचार करेंगे।

MVVM क्या है?

मॉडल-व्यू-व्यूमॉडल ( एमवीवीएम ) एक अन्य एमवीसी-आधारित वास्तुकला प्रोग्रामिंग पैटर्न है। दोनों के बीच मुख्य अंतर यह है कि MVVM व्यू-व्यूमॉडल का एक अमूर्त जोड़ देता है, जो मॉडल डेटा में परिवर्तन को ट्रैक करता है और उन्हें एक दृश्य (डेटा-बाइंडिंग) में प्रदर्शित करता है - ऐसा कुछ जो पारंपरिक एमवीसी अनुप्रयोगों में करना महंगा है।







एमवीवीएम पैटर्न डेटा बाइंडिंग में अतिरिक्त सुविधा प्रदान करते हुए एमवीसी (साझा जिम्मेदारी) के वास्तु लाभों को भुनाने का प्रयास करता है। नतीजतन, मॉडल और ढांचा काम पर लग जाता है, जिससे एप्लिकेशन लॉजिक कम हो जाता है (और कभी-कभी पूरी तरह से समाप्त हो जाता है), जो सीधे प्रस्तुति को नियंत्रित करता है।



MVVM टेम्पलेट के तत्वों में शामिल हैं:

• मॉडल - एप्लिकेशन में उपयोग किए गए डेटा प्रारूप का वर्णन करता है। साथ ही MVC में।
• देखें - उपयोगकर्ता को डेटा प्रदर्शित करता है। साथ ही MVC में।
• ViewModel एक दृश्य है जो व्यू और संबंधित मॉडल को जोड़ता है। एमवीसी में, यह कुछ नियंत्रक की जिम्मेदारी होगी, लेकिन MVVM ViewModel में किसी विशेष दृश्य के लिए डेटा बाइंडिंग से सीधे संबंधित है।

ध्यान रखें कि सभी दृश्यों के लिए ViewModel की आवश्यकता नहीं होती है, लेकिन यदि उनका उपयोग किया जाता है, तो ViewModel प्रत्येक दृश्य के लिए बनाया जाता है, इसलिए कई उदाहरण एक साथ काम कर सकते हैं।

MVVM: उदाहरण

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



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

MVVM में नियंत्रकों का क्या हुआ?

मॉडल-व्यू-व्यूमॉडल नाम के बावजूद, MVVM टेम्पलेट में आप अभी भी कंट्रोलर्स का उपयोग कर सकते हैं, हालांकि कोई इसे MVC + VM आर्किटेक्चर कह सकता है। संक्षिप्त रूप को छोड़ दें, तो मुख्य विचार यह है कि Ext JS 5 आपको MVC और MVVM के बीच चयन नहीं करता है ( यहाँ एक मिश्रित उदाहरण देखें)।



Ext JS 4 ने MVC को एक व्यापक अर्थ में पेश किया, और Ext JS 5 भी इस अवधारणा का समर्थन करता है। हालाँकि, एक्सट जेएस 5 भी ViewController नामक एक नए विकल्प का समर्थन करता है।



व्यूकंट्रोलर ViewModel की प्रकृति के समान है। दोनों एक विशिष्ट दृश्य के उद्देश्य से हैं, वस्तुओं के प्रबंधन और आवेदन की स्थिति को बहाल करने के लिए पारंपरिक एमवीसी में ओवरहेड को काफी हद तक खत्म कर रहे हैं।



ViewControllers ExtJS 4 के पारंपरिक (वैश्विक) MVC के समान हैं, जिस तरह से वे घटनाओं की निगरानी करते हैं और इन घटनाओं के जवाब में तर्क निष्पादित करते हैं। हालाँकि, ViewControllers और Regular Controllers के बीच मुख्य अंतर यह है कि ViewControllers प्रत्येक संबंधित View के लिए बनाए जाते हैं जब Controllers एक ही उदाहरण में होते हैं और विश्व स्तर पर कई View की घटनाओं की निगरानी करते हैं।







ViewControllers और ViewModels घटक जीवन चक्र में भाग लेते हैं, जिसका अर्थ है कि ViewModel और ViewController के अद्वितीय उदाहरण व्यू के प्रत्येक उदाहरण के लिए बनाए गए हैं। इसके अलावा, जब दृश्य नष्ट हो जाता है, तो ViewModel और ViewController हटा दिए जाते हैं।



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



आखिरी बात यह ध्यान में रखना है कि MVVM में सभी दृश्यों के लिए ViewController की आवश्यकता नहीं है: वे पूरी तरह से वैकल्पिक हैं।

निष्कर्ष

Ext JS 4 ने एंटरप्राइज़ वेब एप्लिकेशन के लिए MVC का उपयोग करने का मार्ग प्रशस्त किया, जिसने एक स्थिर कोड संगठन आर्किटेक्चर दिया। एमवीसी के साथ संगतता बनाए रखते हुए, एक्सटी जेएस 5 एमवीवीएम के लिए समर्थन जोड़ता है, इसलिए डेवलपर्स को एक्सटी जेएस 4 से अपने अनुप्रयोगों को नवीनतम संस्करण में अपग्रेड करने में समस्या नहीं होनी चाहिए।



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



यह एप्लिकेशन आर्किटेक्चर, एमवीवीएम, और डेटा बाइंडिंग के विचार की समीक्षाओं की श्रृंखला में पहला लेख है। ViewControllers और घोषणात्मक श्रोताओं पर आगामी व्यापक पोस्ट के लिए बने रहें।



युपीडी। इस विषय पर वेबिनार से Dew1983 वीडियो: vimeo.com/sencha/review/96094423/0255ad109