Backbone.js पर मूल वेब अनुप्रयोग वास्तुकला

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

अन्य एपीआई

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

पेशेवरों और संभावनाओं

• HTML एक अनुरोध में टेम्पलेट
• कॉम्पैक्ट JSON
• स्थानीय भंडारण
• मोबाइल एप्लिकेशन
• डेस्कटॉप अनुप्रयोग

बुनियादी वास्तुकला

आपको एक नया पृष्ठ जोड़ने की आवश्यकता है

1. मॉडल का वर्णन करें और, यदि आवश्यक हो, तो वह संग्रह जिसके साथ पृष्ठ काम करेगा
2. पृष्ठ दृश्य वर्ग से विरासत में मिला एक दृश्य लिखें
3. HTML टेम्पलेट का एक टुकड़ा जोड़ें

पेज खुल रहा है

प्रारंभिक और रेंडर तरीकों का लाभ

जबकि डेटा सर्वर से लोड किया जा रहा है, हम पृष्ठ का हिस्सा आकर्षित कर सकते हैं। यह, उदाहरण के लिए, फिल्टर वाला एक कॉलम, जिसमें जटिल घटकों का एक गुच्छा होता है। और औसत अजाक्स अनुरोध 150 एमएस है, जो इस दिनचर्या के लिए पर्याप्त होगा।

घटक बदलें और सहेजें

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

• मॉडल परिवर्तन पर नज़र रखता है और बचत का सुझाव देता है
• आपको मूल डेटा को वापस दिखाने और रोल करने की अनुमति देता है
• यदि कुछ सहेजा नहीं गया है तो पृष्ठ बंद करना बंद कर देता है

ऐसा क्यों है यदि प्रत्येक बैकबोन मॉडल में पिछले गुण हैं?
उनमें केवल एक ही चरण होता है और कुछ बदलाव पिछली स्थिति को मूल स्थिति से अलग कर देंगे।

और अगर उपयोगकर्ता ने मूल मानों को खेतों में वापस कर दिया है?
यह घटक isEqual फ़ंक्शन का उपयोग करता है, जो पूरी तरह से प्रारंभिक स्थिति और वर्तमान की तुलना करता है। इसलिए, यदि वे अलग नहीं होते हैं, तो पैनल स्वचालित रूप से छिपाया जाएगा।

लेकिन संग्रह में बचत नहीं है! आप उन्हें कैसे बचाते हैं?
हमने एक विधि लिखी जो संग्रह में मॉडल ढूंढती है जिन्हें बनाया, संशोधित या हटाया गया है। और फिर हम तीन प्रश्न बनाते हैं जिसमें केवल ये मॉडल भाग लेते हैं। इस प्रकार, हम बड़ी मात्रा में डेटा के साथ आसानी से काम कर सकते हैं।

स्टूडियो में कोड!
हम इस घटक को पॉलिश करेंगे, इसे एक सुंदर दृश्य में लाएंगे और इसे ओस्ट्रोव्का फ्रंट-एंड की ओर से सभी के साथ साझा करेंगे।

कुल मिलाकर

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

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

मैं बैकबोन पर परियोजना बनाने में उनकी मदद, सलाह और सुझावों के लिए इलिया बाटिया चारा , ईगोर विनोग्रादोव और एंटोन एगोरोव सत्यायरस को धन्यवाद देने का अवसर लेता हूं। धन्यवाद दोस्तों!