Backbone.js के आधार पर कई रूपरेखाओं की वास्तविक दुनिया की ताकत और कमजोरियां क्या हैं? [बन्द है]


186

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

मुझे पता है कि निम्नलिखित रूपरेखाएँ उपलब्ध हैं:

और शायद मुझे कुछ याद आया।

यहाँ मतभेदों के बारे में संक्षिप्त परिचय दिया गया है:

लेकिन यह बहुत सामान्य है। मैं सोच रहा था कि क्या कोई व्यक्ति इन रूपरेखाओं का उपयोग करके अपने जीवन के वास्तविक अनुभवों को साझा कर सकता है।

एक के बाद दूसरे को चुनने का क्या फायदा? जब मैरिनेट चैप्लिन के ऊपर एक बेहतर समाधान होगा, या कुछ अनुप्रयोगों के लिए क्यों वेटब्रिज बेहतर है, उदाहरण के लिए।

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

धन्यवाद!

संपादित 1: इस पोस्ट को मिला: Backbone.Marionette बनाम Backbone-Boilerplate

संपादित 2: मेल द्वारा माथियास स्फ़र (चैपलिन) का उत्तर:

संक्षेप में, वर्तमान संरचना संस्करण 1.0 के करीब है क्योंकि यह पहले से ही उत्पादन में उपयोग किया जाता है। हम 1.0 तक बड़ी नई सुविधा या ब्रेकिंग एपीआई परिवर्तन जोड़ने की योजना नहीं बना रहे हैं।

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

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

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

दो प्रिंसिपल हैं जो इस संरचना के साथ आते हैं: - मॉडर्लाइज़ेशन, डिकॉउलिंग और सैंडबॉक्सिंग - पब्लिश / सब्सक्राइब और मध्यस्थ का उपयोग करके क्रॉस-मॉड्यूल संचार

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

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


12
+1 आपका प्रश्न मौके पर पहुंच गया। पिछले साल या दो किसी भी प्रकार के ढांचे के प्रचार ने कई वास्तुकला-प्रेरित परियोजनाओं के साथ परिदृश्य को फूला दिया है जो वास्तव में अलग करना मुश्किल है - प्रत्येक को थोड़ा सा खुद को लागू करने और चीजों को करने के लिए अक्सर फूला हुआ दृष्टिकोण लागू करने के साथ। ध्यान दें कि यह एक टिप्पणी है :)
kontur

जवाबों:


132

अधिकांश (सभी के;) जिन रूपरेखाओं को आप देख रहे हैं, वही समस्याएं हल करती हैं, लेकिन वे इसे थोड़े अलग तरीके से अलग-अलग लक्ष्यों के साथ करते हैं।

मुझे लगता है कि यह कहना उचित है कि इन सभी परियोजनाओं से इन श्रेणियों में समस्याओं का समाधान होगा:

  • चूक के समझदार सेट प्रदान करें
  • बॉयलरप्लेट कोड को कम करें
  • बैकबोनजेएस बिल्डिंग ब्लॉकों के शीर्ष पर एप्लिकेशन संरचना प्रदान करें
  • ऐसे पैटर्न निकालें जो लेखक अपने ऐप में उपयोग करते हैं

मेरीओनेट, जो मैं 2011 के दिसंबर से बना रहा हूं, कुछ अलग लक्ष्य और आदर्श हैं, साथ ही:

  • समग्र अनुप्रयोग वास्तुकला
  • एंटरप्राइज मैसेजिंग पैटर्न प्रभाव
  • संशोधन के विकल्प
  • वृद्धिशील उपयोग (कोई सभी-या-कुछ भी आवश्यकता नहीं)
  • कोई सर्वर लॉक-इन नहीं
  • उन चूक को बदलना आसान बनाएं
  • कॉन्फ़िगरेशन / ओवर कॉन्फ़िगरेशन के रूप में कोड

मैं यह नहीं कह रहा हूँ कि अन्य रूपरेखाओं में से कोई भी समान लक्ष्य नहीं है। लेकिन मुझे लगता है कि Marionette की विशिष्टता इन लक्ष्यों के संयोजन से आई है।

समग्र अनुप्रयोग वास्तुकला

मैंने 5 से अधिक वर्षों तक मोटी-क्लाइंट में काम किया, WinForms और C # का उपयोग करके सॉफ्टवेयर सिस्टम वितरित किया। मैंने डेस्कटॉप, लैपटॉप (स्मार्ट-क्लाइंट), मोबाइल डिवाइस और वेब एप्लिकेशन के लिए ऐप बनाए हैं, सभी एक कोर फंक्शनल सेट साझा कर रहे हैं और एक ही सर्वर के साथ कई बार काम करते हैं। इस समय में, मैंने मॉडर्लाइज़ेशन के मूल्य को सीखा और बहुत तेज़ी से कंपोज़िट एप्लिकेशन डिज़ाइन का एक पथ नीचे चला गया।

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

मैंने अपने ब्लॉग पर इसके बारे में थोड़ा सा लिखा है, बैकबोन के लिए एक समग्र एप्लिकेशन आर्किटेक्चर के रूप में मैरियनट का परिचय देते हुए:

संदेश कतार / पैटर्न

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

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

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

modularization

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

Marionette यह moduleपरिभाषाओं के माध्यम से सीधे तौर पर संशोधन प्रदान करता है । लेकिन मैं यह भी मानता हूं कि कुछ लोग जरुरज को पसंद करते हैं और उसका इस्तेमाल करना चाहते हैं। इसलिए मैं एक मानक बिल्ड और एक आवश्यकताJJ दोनों संगत बिल्ड प्रदान करता हूं।


MyApp = new Backbone.Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  // your module code goes here

});

(इसके लिए अभी तक कोई ब्लॉग पोस्ट उपलब्ध नहीं है)

वृद्धिशील उपयोग

यह एक मुख्य दार्शनिक है जिसे मैं मैरियनट के हर हिस्से में सेंध लगाता हूं जो मैं कर सकता हूं: मैरियोनेट के उपयोग के लिए कोई "सभी-या-कुछ नहीं" आवश्यकता।

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

उस छोर तक, मैरियोनेट में मेरे द्वारा बनाए गए अधिकांश टुकड़े अकेले खड़े होने के लिए, बैकबोन के मुख्य टुकड़ों के साथ काम करने के लिए और बेहतर तरीके से एक साथ काम करने के लिए बनाए गए हैं।

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


MyApp.addRegions({
  someRegion: "#some-div"
});

MyApp.someRegion.show(new MyView());

लेकिन एक क्षेत्र का उपयोग करने के लिए आपको मैरियनेट के विचारों का उपयोग करने की आवश्यकता नहीं है। केवल आवश्यकता यह है कि आप ऑब्जेक्ट के प्रोटोटाइप चेन में कुछ बिंदु पर Backbone.View से विस्तार कर रहे हैं। यदि आप एक closeविधि, एक onShowविधि, या अन्य प्रदान करने के लिए चुनते हैं, तो Marionette का क्षेत्र आपके लिए सही समय पर कॉल करेगा।

कोई सर्वर लॉक-इन नहीं

मैं सर्वर तकनीकों की एक विस्तृत विविधता के शीर्ष पर बैकबोन / मैरियनेट एप्लिकेशन बनाता हूं:

  • ASP.NET MVC
  • रूबी ऑन रेल्स
  • रूबी / सिनात्रा
  • NodeJS / एक्सप्रेसजेएस
  • PHP / स्लिम
  • जावा
  • Erlang
  • ... और अधिक

जब यह ब्राउज़र में चलने की बात आती है, तो जावास्क्रिप्ट ही जावास्क्रिप्ट है। सर्वर साइड जावास्क्रिप्ट बहुत बढ़िया है, लेकिन इसका शून्य प्रभाव या प्रभाव है कि मैं अपने ब्राउज़र आधारित जावास्क्रिप्ट को कैसे लिखूं।

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

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

आसानी से चूक को बदलें

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

मैं <script>टेम्पलेट के लिए इनलाइन टैग के आधार पर रेंडरिंग प्रदान करता हूं , डिफ़ॉल्ट रूप से टेंपरेचरिंग का उपयोग करके। लेकिन आप इसे Marionette में Renderer/ और TempalteCacheवस्तुओं को बदलकर बदल सकते हैं । ये दो वस्तुएं प्रतिपादन क्षमताओं का मूल प्रदान करती हैं, और विकी पृष्ठ हैं जो दिखाते हैं कि इसे विशिष्ट टेंपलेटिंग इंजन और लोड करने के विभिन्न तरीकों के लिए कैसे बदलना है।

Marionette के v0.9 के साथ, यह और भी आसान हो जाता है। उदाहरण के लिए, यदि आप इनलाइन टेम्प्लेट स्क्रिप्ट ब्लॉक के उपयोग को पूर्व संकलित टेम्प्लेट से बदलना चाहते हैं, तो आपको केवल रेंडरर पर एक विधि को बदलना होगा:


Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

और अब पूरा अनुप्रयोग पूर्व-संकलित टेम्पलेट्स का उपयोग करेगा जो आप अपने दृश्य की templateविशेषता के साथ संलग्न करते हैं ।

मैं v0.9 के साथ एक Marionette.Async ऐड-ऑन भी प्रदान करता हूं जो आपको अतुल्यकालिक रूप से प्रस्तुत करने वाले विचारों का समर्थन करने की अनुमति देता है। मैं मैरियनट में डिफ़ॉल्ट व्यवहारों को बदलने के लिए इसे यथासंभव आसान बनाने के लिए निरंतर प्रयास करता हूं।

कॉन्फ़िगरेशन के रूप में कोड

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

यह उद्देश्य और इरादे के साथ किया जाता है।

मैंने एक सार्थक और तेज़ तरीके से काम करने के लिए सम्मेलनों की कोशिश करने के दर्द को जानने के लिए पर्याप्त जावास्क्रिप्ट प्लगइन्स, चौखटे, ऐड-ऑन और एप्लिकेशन बनाए हैं। यह गति के साथ किया जा सकता है, लेकिन आमतौर पर इसे बदलने में सक्षम होने की कीमत पर।

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

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

आपको Marionette में "कॉन्फ़िगर" या "विकल्प" API नहीं मिलेगा। लेकिन आपको बड़ी संख्या में ऐसे तरीके मिलेंगे, जिनमें से प्रत्येक स्वच्छ हस्ताक्षर के साथ एक बहुत ही विशिष्ट उद्देश्य की पूर्ति करता है, जिससे यह बदलना आसान हो जाता है कि मार्वेट कैसे काम करता है।


16
यह सबसे अधिक मूल्यांकित उत्तर क्यों है? यह इस सवाल का जवाब नहीं देता है - यह मूल रूप से मैरियनेट के लिए एक इतिहास / विज्ञापन है ...
जेस टेलफ़ोर्ड

@JessTelford आप इस प्रश्न को फिर से पढ़ना चाह सकते हैं, यह इसका एक बहुत अच्छा जवाब है।
मोर

@ प्रश्न यह है What is the benefit of choosing one over the other?- यह उत्तर है Marionette [...] has a few very distinct goals and ideals in mind, जो एक बार दूसरे फ्रेमवर्क से अपनी तुलना नहीं करता है। यदि प्रश्न कृपया यह समझाएं कि इनमें से प्रत्येक ढांचा क्या कर सकता है , तो निश्चित रूप से, यह एक महान उत्तर है। लेकिन ऐसा नहीं है। और यह नहीं है।
जेस टेल्फोर्ड

@JessTelford प्रश्न स्पष्ट रूप से कई उत्तरों के लिए पूछता है। यह एक ताकत और समस्याओं को बताता है जो मैरियनेट को स्वीकार करता है। प्रश्न पढ़ने के बाद, मुझे यह उत्तर वास्तव में मददगार लगा। जरूरी नहीं कि मेरी राय में सबसे अच्छा हो, लेकिन फिर भी यह एक अच्छा जवाब है। ओह, और सवाल यह है: What are the strengths and weaknesses of...
मोर

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

25

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

तो, आपके प्रश्न का मेरा उत्तर है: रीढ़ की हड्डी के रूप में उपयोग करना शुरू करें, और अपने आप से पूछें कि क्या गायब है और फ्रेमवर्क के बारे में आपकी अपेक्षाएं क्या थीं। यदि आप पाते हैं कि रीढ़ की हड्डी में बहुत सी चीजें बची हुई हैं, तो जाएं और अन्य रूपरेखाओं में उनकी खोज करें और चुनें कि आपकी जरूरत सबसे नजदीक है। और अगर आप अभी भी पसंद में विश्वास नहीं कर रहे हैं, तो शायद रीढ़ आपके लिए नहीं है और आपको कुछ अन्य समाधान (ember.js, sproutcore, ExtJs, JavaScript MVC सभी अच्छे हैं) देखना होगा। यदि आपके पास क्लाइंट ऐप्स लिखने का अनुभव है, तो आपको सही तरीके से चुनने के लिए सभी रूपरेखा पर अनुभव की आवश्यकता नहीं है (आपके लिए, निश्चित रूप से)


13

मैंने Backbone.js के साथ निर्मित विभिन्न चौखटे का अध्ययन किया है और HauteLook में एक परियोजना के लिए कशेरुक का निर्माण किया है। परियोजना के लक्ष्यों में शामिल हैं ... डायनेमिक स्क्रिप्ट लोडिंग, एएमडी मॉड्यूल प्रारूप, निर्भरता प्रबंधन, ज्यादातर खुले स्रोत पुस्तकालयों के साथ निर्माण, संकुल में कोड व्यवस्थित करना, एक या कई एकल पृष्ठ ऐप्स के लिए अनुकूलन और निर्माण, पूरी तरह से कैश किए गए सर्वर पर होस्ट, जैसे कोई सर्वर नहीं। डेटा के लिए केवल एक एपीआई का उपयोग करके स्क्रिप्टिंग, और मेरे लिए सबसे मजेदार, प्रोजेक्ट के लिए व्यवहार चालित विकास का उपयोग करें। इस परियोजना पर एक विवरण है: http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-use-amd/

हमारी समस्या:

चयनित पुस्तकालय (jQuery, Underscore.js, Backbone.js, आवश्यकताएँ, मूंछें) मॉड्यूल लोडिंग, निर्भरता प्रबंधन, आवेदन संरचना (मॉडल, संग्रह, विचार और मार्गों के लिए) प्रदान करते हैं, एपीआई के साथ अतुल्यकालिक बातचीत, विभिन्न उपयोगिताओं और वस्तुओं को अतुल्यकालिक व्यवहार का प्रबंधन करने के लिए। , उदा। (वादा) आस्थगित, कॉलबैक। ढांचे को पूरा करने के लिए आवश्यक शेष तर्क में शामिल हैं:

  • एक वस्तु (मॉडल) सिंगल-पेज एप्लिकेशन की स्थिति का प्रबंधन करने के लिए;
  • एक लेआउट प्रबंधक प्रस्तुत करने के लिए, व्यवस्था / संक्रमण और स्पष्ट विचार, और
  • नियंत्रक जो मार्गों पर प्रतिक्रिया करते हैं, आवेदन स्थिति प्राप्त करते हैं, और लेआउट प्रबंधक को काम बंद करते हैं।

हमारे समाधान (कशेरुक में लागू):

आवेदन राज्य प्रबंधक -

एप्लिकेशन प्रबंधक मेमोरी में डेटा संग्रहीत करता है और सामान्य डेटा / मेटाडेटा के लिए संसाधन प्रदान करने के लिए ब्राउज़र स्टोरेज में डेटा को भी बनाए रखता है। पिछले इंटरैक्शन (जैसे चयनित टैब, एप्लाइड फ़िल्टर) के आधार पर पृष्ठ दृश्यों को फिर से बनाने के लिए डेटा (राज्य) प्रदान करता है। एप्लिकेशन स्टेट मैनेजर संसाधनों को पुनः प्राप्त करने के लिए एक रणनीति प्रदान करता है। राज्य मशीन के रूप में कार्य करने का साधन।

लेआउट प्रबंधक -

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

नियंत्रक -

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

टोडोस ऐप को देव मोड में होस्ट किया जाता है और हरोकू पर अनुकूलित किया जाता है ...

अन्य ढाँचों में कई अवधारणाएँ उधार ली गई हैं, उदाहरण के लिए डेरिक बैली द्वारा बताई गई स्मृति लीक का पूर्वावलोकन करने के लिए विचारों को नष्ट करने की आवश्यकता है - http://lostechies.com/derickbailey/ ; टिम ब्रैन द्वारा लेआउट मैनेजर http://tbranyen.github.com/backbone.layoutmanager/

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

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


विस्तृत उत्तर के लिए धन्यवाद।
दानिकोरेन

13

मैंने बेंचपेप में काम करते हुए लुका फ्रेमवर्क विकसित किया, जहां हमने इसका इस्तेमाल बैकबोन.जेएस लाइब्रेरी के शीर्ष पर कई बड़े सिंगल पेज ऐप विकसित करने के लिए किया।

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

इस दृष्टिकोण का एक फायदा बैकबोन के विस्तार का उपयोग करके केवल मामूली बदलावों के साथ कई ऐप या आपके ऐप में अलग-अलग स्थानों पर घटकों को फिर से उपयोग करने की क्षमता है। JSON कॉन्फ़िगरेशन में केवल मामूली बदलाव करके घटकों के कई अलग-अलग लेआउट / प्रस्तुतियों के साथ प्रयोग करना बहुत आसान है।

सहायक / उपयोगिता कार्यों की एक विस्तृत श्रृंखला के अलावा, कई उच्च स्तरीय बैकबोन डेरिवेटिव्स के साथ लुका जहाज, जिसे आप एक जटिल यूआई बनाने के लिए किसी भी तरह से कल्पना कर सकते हैं।

दृश्य, अवयव, कंटेनर

  • संवर्धित मॉडल, दृश्य, संग्रह, राउटर कक्षाएं
  • कॉन्फ़िगरेशन विकल्प जो मॉडल, संग्रह, दृश्य, एप्लिकेशन और उसके संबंधित प्रबंधकों के बीच संचार की सुविधा प्रदान करते हैं।
  • कंटेनर (स्प्लिट / कॉलम लेआउट, ग्रिड लेआउट, टैब व्यू, कार्ड / विज़ार्ड व्यू)
  • सभी मानक फ़ील्ड घटकों के साथ FormView, और Backbone.Model के साथ सिंक्रनाइज़ करने के लिए सहायक
  • GridView, Luca.Collection से स्क्रॉल करने योग्य ग्रिड तत्व बनाने के लिए
  • संग्रह के आधार पर विचार उत्पन्न करने के लिए संग्रह दृश्य
  • टूलबार / बटन

ट्विटर बूटस्ट्रैप शैलियाँ और मुफ्त के लिए मार्कअप

  • लुका ट्विटर बूटस्ट्रैप फ्रेमवर्क के साथ बहुत अच्छा खेलता है। बस Luca.enableBootstrap = true पर सेट करके, और CSS सहित, आपके घटक (जैसे टैब दृश्य, टूलबार, बटन, फ़ॉर्म, फ़ील्ड, ग्रिड, आदि) स्वचालित रूप से Twitter बूटस्ट्रैप संगत मार्कअप और CSS क्लास सम्मेलनों का उपयोग करेंगे।
  • लेआउट के लिए ग्रिड सिस्टम का उपयोग करता है, और अधिकांश बूस्टस्ट्रैप बेस सीएसएस कक्षाओं का बुद्धिमानी से जवाब देता है
  • Luca.Viewport और GridLayout घटक बूटस्ट्रैप के उत्तरदायी, द्रव या स्थिर ग्रिड सिस्टम के साथ काम करने के लिए सेटअप हैं।
  • ट्विटर बूटस्ट्रैप घटकों के लिए एक से एक मैच प्रदान करने के उद्देश्य से, उन्हें विन्यास योग्य रीढ़ दृश्य के रूप में प्रस्तुत करना है

अनुप्रयोग घटक

  • Backbone.Model आधारित राज्य मशीन गेट्टर / सेटर विधियां प्रदान करती है और अनुप्रयोग नियंत्रण प्रवाह की एक शैली के रूप में घटनाओं को बदल देती है
  • इंटीग्रेटेड कंट्रोलर कंपोनेंट जो बैकबोन.राउटर या स्टेट मशीन इवेंट्स के जवाब में ऐप के पेज को छुपाता / दिखाता है
  • एकीकृत संग्रह प्रबंधक जो आपके द्वारा बनाए गए संग्रह का ट्रैक रखता है, आपको उन्हें स्कोप करने, उन्हें समूह बनाने, उन्हें डिफ़ॉल्ट पैरामीटर असाइन करने की अनुमति देता है
  • एक सॉकेट मैनेजर जो वेबसैट सेवाओं के शीर्ष पर एक अमूर्त परत है जो बैकबोन के रूप में आसान बनाता है।
  • एक कीबोर्ड इवेंट राउटर जो घटकों पर प्रमुख घटनाओं को ट्रिगर करता है जो इस तरह की घटनाओं का जवाब देने के लिए परवाह है

संग्रह और मॉडल संवर्द्धन

  • संग्रह बैकबोन-क्वेरी पर आधारित होते हैं , जो एक क्वेरी इंटरफ़ेस को मोंगडब के समान प्रदान करता है
  • केवल संग्रह .localStorage = true सेट करके एक स्थानीय संग्रहण Backbone.sync सक्षम करें
  • संग्रह की स्वचालित जनसंख्या जिसका डेटा पृष्ठ लोड पर बूटस्ट्रैप किया गया है
  • कैश्ड तरीके / संगणित गुण। संग्रह विधियों का परिणाम कैश करें, और संग्रह या उसके मॉडल पर ईवेंट को बदलने / जोड़ने / हटाने के लिए कैश को समाप्त करें
  • मॉडलों पर गणना किए गए गुण। जटिल फ़ंक्शन के आधार पर विशेषताओं का निर्माण करें, और परिवर्तनों के जवाब में स्वचालित रूप से गणना किए गए मूल्य को अपडेट करें

घटनाएँ और हुक

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

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

रूबी रत्न

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

लुका एसेट पाइपलाइन पर काम करने के लिए कॉन्फ़िगर की गई रूबी जेम के हिस्से के रूप में, या डाउनलोड करने योग्य जेएस फाइल के रूप में वितरित किया जाता है।

आपको रेल या सिनात्रा का उपयोग करने की आवश्यकता नहीं है। लेकिन अगर आप करते हैं, तो मैंने बहुत सी उपयोगी चीजों को शामिल किया है:

  • .Luca एक्सटेंशन वाली फाइलें JAM स्टाइल वैरिएबल इंटरपोल के साथ HAML के रूप में संसाधित होती हैं। (परिसंपत्ति पाइपलाइन द्वारा .jst.ejs.haml के बराबर)
  • ब्राउज़र के लिए एक टेस्ट हार्नेस, या कई बैकबोन और अंडरस्कोर टेस्ट सहायकों के साथ जैस्मीन आधारित यूनिट टेस्ट।
  • लुका के साथ आने वाले विकास टूलसेट के लिए एक एपीआई समापन बिंदु (इस पर बाद में)
  • एक एपीआई एंडपॉइंट जो आपको कम से कम कॉन्फ़िगरेशन के साथ लुका.कॉलक्शन के लिए एक स्कीमालेस स्टोरेज इंजन के रूप में रेडिस का उपयोग करने की अनुमति देता है

विकास उपकरण

  • लुका एप्लिकेशन एक ब्राउज़र ल्यॉका विशिष्ट सहायकों और कमांडों के साथ कॉफ़िशस्क्रिप्ट कंसोल को सक्षम कर सकता है जो लुका अनुप्रयोगों और घटकों की निगरानी, ​​निरीक्षण, डिबगिंग में सहायता करता है।

CoffeeScript द्वारा संचालित ब्राउज़र डेवलपमेंट कंसोल में लुका का एक उदाहरण

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

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

  • कंपोनेंट टेस्टर जल्द ही जैस्मीन के साथ एकीकृत हो जाएगा ताकि आप वास्तविक समय में अपने घटक इकाई परीक्षणों के परिणाम देख सकें क्योंकि आप उनका कोड संपादित करते हैं

घटक परीक्षक का एक स्क्रीनशॉट

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


11

मैं चैप्लिन का सह-लेखक हूं और मैंने चैप्लिन.जेएस और मैरियनेट के बीच गहराई से तुलना लिखी है।

http://9elements.com/io/index.php/comparison-of-marionette-and-chaplin/

यह एक "गोलीबारी" नहीं है, लेकिन दोनों तरीकों को संतुलित तरीके से समझाने की कोशिश करता है।


लिंक-ओनली उत्तर यहां अच्छा नहीं है। कृपया अपने उत्तर में एक वास्तविक उत्तर शामिल करें।
फ्लिमज़ी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.