Backbone.js [केस स्टडी] के साथ 10 वेब ऐप्स बनाए गए

क्या आप कभी स्पेगेटी कोड में उलझ गए हैं? क्या आप बल्कि अपने ऐप को कुछ स्वास्थ्यप्रद खिलाएंगे? यदि हां, तो Backbone.js के साथ पूरा किया जा सकता है पर एक नज़र रखना. रीड की हड्डी एक जावास्क्रिप्ट लाइब्रेरी है, जो मॉडल-व्यू-कंट्रोलर डिज़ाइन पैटर्न पर आधारित है, लेकिन चूंकि इसमें कंट्रोलर तत्व की कमी है, इसलिए इसे MV * फ्रेमवर्क कहना बेहतर होगा।.

यह आपको निर्माण करने में मदद करता है तेज, चिकना और डेटा से भरपूर एकल-पृष्ठ वेब ऐप्स, आपके रखता है डेटा लॉजिक आपके यूजर इंटरफेस से अलग है, अपने डेटा को DOM पर बांधने से बचाता है, और तराजू के रूप में अपने एप्लिकेशन बढ़ता है. जैसा कि बैकबोन डिफ़ॉल्ट रूप से किसी भी RESTful API के साथ समन्‍वयित करता है, आप अपने क्लाइंट-साइड ऐप को अपने मौजूदा सर्वर-साइड API से एक RESTful JSON इंटरफ़ेस के माध्यम से आसानी से जोड़ सकते हैं.

इस पोस्ट में हम 10 वेब एप्स का अध्ययन करेंगे जो बैकबोन लाइब्रेरी की सुविधाओं का उपयोग करते हैं, जिससे आपको अपने भविष्य के वेब ऐप परियोजनाओं के लिए संभावित बैकबोन.जेएस की मदद मिलती है।.

1. ट्रेलो

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

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

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

2. चौका

सबसे अधिक संभावना है कि आपने पहले से ही सुना है सचाई से, लोकप्रिय स्थान-आधारित सामाजिक नेटवर्किंग ऐप जो आपको दुनिया भर में अपने दोस्तों के साथ स्थानों को साझा करने में सक्षम बनाता है.

फोरस्क्वेयर का कोर जावास्क्रिप्ट एपीआई बैकबोन मॉडल्स के आसपास बनाया गया है, जहां ए फोरस्क्वेयर एपीआई के मॉडल वर्ग (जैसे कि उपयोगकर्ता, स्थान और चेक-इन) बैकबोन मॉडल वर्गों के उपवर्ग हैं और उनके तरीकों और गुणों को विरासत में मिला.

कोड के कार्यान्वयन को इस तरह स्केच किया जा सकता है: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); हां, यह सही है, बैकबोन देवों को सक्षम बनाता है अच्छी वस्तु उन्मुख जावास्क्रिप्ट लिखें.

बैकबोन व्यूज़ की भी फोरसेक्वेयर ऐप में उनकी भूमिका है, क्योंकि वे उपयोगकर्ता अनुभव को जैसी सुविधाओं के साथ बढ़ाते हैं मुखपृष्ठ मानचित्र और सूचियाँ. बैकबोन के अलावा, फोरस्क्वेयर का जावास्क्रिप्ट एपीआई भी उपयोग करता है jQuery, Underscore.js (जो बैकबोन की एकमात्र कठिन निर्भरता है), और क्लोजर कंपाइलर.

3. बेसकैंप कैलेंडर

आधार शिविर, लोकप्रिय परियोजना प्रबंधन ऐप अपने कैलेंडर सुविधा के लिए Backbone.js का उपयोग करता है.

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

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

अपने पूरे ऐप के लिए बैकबोन की जरूरत है या नहीं, यह तय करने के लिए बैकबोन एंटीपैटर्न पर और पढ़ें.

4. फ्लडॉक

Flowdock एक रीयल-टाइम टीम कम्युनिकेशन ऐप है जो आपको ग्रुप चैट, टीम इनबॉक्स और रियल-टाइम वर्कफ़्लोज़ जैसी सुविधाएँ प्रदान करता है

फ्लडडॉक को बैकबोन.जेएस के ऊपर जमीन से बनाया गया था। विकास टीम की मुख्य चुनौती वास्तविक समय के संदेशों और वर्कफ़्लोज़ को सक्षम करना था। डिफ़ॉल्ट रूप से Backbone.js एक RESTful इंटरफ़ेस पर सर्वर साइड से कनेक्ट होता है, जो वास्तविक समय डेटा प्रवाह को संभव नहीं बनाता है। इसलिए देवता सॉकेट के माध्यम से संदेशों को सहेजने का निर्णय लिया। रीयल-टाइम इंजन REST API के बजाय.

इसे हासिल करने के लिए वे एक कस्टम तरीका लिखा बुलाया Backbone.sync. Socket.io भी एक JavaScript लाइब्रेरी है क्योंकि यह जावास्क्रिप्ट-संचालित फ्रंटेंड और बैकएंड (Node.js) के बीच संचार को सहज बनाती है। फ़्लोडॉक मुख्य रूप से सर्वर साइड पर एक रेल ऐप है, लेकिन उनके पास एक अलग Node.js बैकएंड है जो सॉकेट .io कनेक्शन को संभालता है.

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

5. कॉकटेल खोज

कॉकटेल खोज एक ओपन सोर्स ऐप है जो आपको Backbone.js के बहुत ही सरल कार्यान्वयन के कोड को देखने का मौका देता है। बैकएंड पायथन द्वारा संचालित है, लेकिन हमारे लिए क्या दिलचस्प है एप्लिकेशन की script.js फ़ाइल.

यदि आप कोड की जांच करते हैं तो आप मॉडल-व्यू- * फ्रेमवर्क की एक बहुत ही बुनियादी संरचना देख सकते हैं: इसमें एक शामिल है आदर्श में परिभाषित किया गया कॉकटेल वह वर्ग जो Backbone.Model पैरेंट क्लास की डिफ़ॉल्ट सेटिंग्स को नहीं बदलता है, एक बैकबोन कलेक्शन खोज परिणामों और 3 बैकबोन दृश्यों के लिए, प्रत्येक नए तरीके जोड़ता है Backbone.View अभिभावक वर्ग.

यदि आप index.html फ़ाइल पर एक नज़र डालते हैं, तो आप यह जान सकते हैं कि डेवलपर ने Backbone.js और उसकी निर्भरता को कैसे जोड़ा, Underscore.js तथा jQuery हेड सेक्शन में। Underscore.js बैकबोन की एकमात्र कठिन निर्भरता है जबकि jQuery की जरूरत है अगर आप Backbone Views की मदद से DOM में हेरफेर करना चाहते हैं (जो कॉकटेल सर्च ऐप का मामला है).

6. बिटबकेट

बिट बकेट एक स्रोत कोड होस्टिंग और Github के समान कोड प्रबंधन ऐप है। एटलसियन, इसके पीछे की कंपनी JIRA वाणिज्यिक समस्या ट्रैकिंग सॉफ़्टवेयर में बैकबोन का उपयोग करती है, उनके अन्य मुख्य उत्पाद भी.

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

यह अनुमेय प्रकृति कई डेवलपर्स द्वारा प्यार की विशेषता है, लेकिन एटलसियन टीम द्वारा नहीं, इसलिए उन्होंने बैकबोन नामक अपना स्वयं का बैकबोन एक्सटेंशन विकसित किया है। पुस्तकालय में मिश्रण और स्व-प्रलेखित विशेषताओं और घटनाओं को जोड़ता है.

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

7. साउंडक्लाउड

SoundCloud एक लोकप्रिय ऑडियो डिस्ट्रीब्यूशन प्लेटफ़ॉर्म है जहाँ आप अपना ऑडियो रिकॉर्ड कर सकते हैं, अपलोड कर सकते हैं और साझा कर सकते हैं या मुफ्त में संगीत सुन सकते हैं.

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

स्केलिंग एक ऑडियो स्ट्रीमिंग ऐप के लिए एक मुख्य चिंता का विषय है, और साउंडक्लाउड यह स्वीकार करता है कि यह “कार्यान्वयन से अधिक संगठन के साथ करना है” जो सुव्यवस्थित लेकिन हल्के बैकबोन को उनके लिए एक आदर्श विकल्प बनाता है.

साउंडक्लाउड ने बैकेंड व्यू के लिए हैंडलबार्स अर्थमेटिक टेम्प्लेटिंग सिस्टम का इस्तेमाल किया है.

8. AirBnB

AirBnB एक बहुत ही सफल सामुदायिक बाज़ार है जहाँ आप दुनिया भर के लगभग 200 देशों में विभिन्न प्रकार के आवास ढूंढ और बुक कर सकते हैं

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

वे बाद में उनके सर्वर-साइड बैकबोन लाइब्रेरी, रेंडर, ओपन सोर्स बनाया और उनके जीथूब पेज पर उपलब्ध है। Rendr Node.js में लिखा गया है और यह के दर्शन का अनुसरण करता है “न्यूनतम संरचना लागू करना, डेवलपर को उनके आवेदन के लिए सबसे उपयुक्त तरीके से पुस्तकालय का उपयोग करने की अनुमति देता है” सिर्फ बैकबोन की तरह

यदि आप AirBnB के तकनीकी स्टैक में अधिक रुचि रखते हैं, तो उनके ब्लॉग पोस्ट के बारे में रेल बैकएंड से होली ग्रेल तक की उनकी यात्रा के बारे में पढ़ें दोनों क्लाइंट- और सर्वर-साइड पर बैकबोन का एक साथ उपयोग.

9. हुलु

Hulu एक वीडियो स्ट्रीमिंग ऐप है जो आपको यूएस में स्थित होने पर मुफ्त में टीवी शो और फिल्में देखने में सक्षम बनाता है.

फिल्म प्रेमियों के लिए सहज और तेज उपयोगकर्ता अनुभव का निर्माण करने के लिए Hulu ने Backbone.js का उपयोग किया। इंटरफ़ेस आपको नेविगेट करने के साथ कोमल संक्रमण वाले ऐप के माध्यम से जल्दी से स्थानांतरित करने की अनुमति देता है। रीड की हड्डी उपयोगकर्ताओं के लिए बैंडविड्थ बचाता है स्क्रिप्ट और एम्बेडेड वीडियो के रूप में पुनः लोड न करें पुरे समय.

Hulu बैकएंड पर एक रेल इंजन चलाता है, और यदि आपको मनोरंजक लेकिन जानकारीपूर्ण वार्ता पसंद है, तो आप इसके बारे में पढ़ सकते हैं डेवलपर टीम jQuery से कैसे उलझ गई अंत में बदलने के लिए निर्णय लेने से पहले अधिक संगठित बैकबोन फ्रेमवर्क.

Backbone.js ने हुलु को अनुमति दी वृद्धिशील रूप से उनके प्रतिपादन को सर्वर-साइड से क्लाइंट-साइड में परिवर्तित किया जाता है बजाय अपने मौजूदा रेल बैकएंड के एक जोखिम भरा फिर से लिखना.

10. पूरी तरह से

Countly एक वास्तविक समय का मोबाइल एनालिटिक्स ऐप है जो आपको ब्राउज़र विंडो से अपने iPhone, Android या Windows Phone ऐप के प्रदर्शन को ट्रैक करने में सक्षम बनाता है.

प्लेटफ़ॉर्म को विकसित करने के लिए उपयोग किए जाने वाले खुले स्रोत सॉफ़्टवेयर की उल्लेखनीय सूची पर एक नज़र डालें, जिसमें हाल के वर्षों के सुपरस्टार शामिल हैं: सर्वर पक्ष के लिए Nginx, MongoDB, Node.js और पाठ्यक्रम के लिए Backbone.js.

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

संपादक की टिप्पणी: यह Hongkiat.com के लिए अन्ना मोनस द्वारा लिखा गया है। अन्ना एक वेब डेवलपर और कोड लेखक हैं, जो विज्ञान, कृत्रिम बुद्धिमत्ता और विघटनकारी प्रौद्योगिकियों के लिए रुचि रखते हैं.