एकल पृष्ठ जावास्क्रिप्ट वेब अनुप्रयोग की वास्तुकला?


99

क्लाइंट-साइड पर एक जटिल सिंगल-पेज जेएस वेब एप्लिकेशन को कैसे संरचित किया जाना चाहिए? विशेष रूप से मैं इसके मॉडल ऑब्जेक्ट्स, UI घटकों, किसी भी नियंत्रकों और सर्वर दृढ़ता से निपटने वाली वस्तुओं के संदर्भ में एप्लिकेशन को साफ-सुथरा बनाने के तरीके के बारे में उत्सुक हूं।

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

-

( इस सवाल के परिणामस्वरूप अजाक्स का उपयोग करने के दो सुझाव मिले, जो स्पष्ट रूप से सबसे तुच्छ एक-पृष्ठ ऐप के अलावा किसी अन्य चीज़ के लिए आवश्यक है।)


आप कोशिश कर सकते हैं AngularJS या backboneJS
रोमेन

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

जवाबों:


35

PureMVC / JS का MVC आर्किटेक्चर सबसे सुरुचिपूर्ण IMO है। मैंने इससे बहुत कुछ सीखा। मुझे निकोलस ज़कस द्वारा स्केलेबल जावास्क्रिप्ट एप्लीकेशन आर्किटेक्चर भी मिला, जो क्लाइंट साइड आर्किटेक्चर विकल्पों पर शोध करने में सहायक है।

दो अन्य टिप्स

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

13

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

http://boilerplatejs.org/

यह सामान्य जावास्क्रिप्ट विकास चिंताओं को संबोधित करता है जैसे:

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

आदि।


10

जिस तरह से मैं एप्लिकेशन बनाता हूं:

  • एक्सटीजेएस फ्रेमवर्क, सिंगल पेज ऐप, एक अलग जेएस फाइल में परिभाषित प्रत्येक घटक, ऑन-डिमांड लोड किया गया
  • हर घटक अपने स्वयं के समर्पित वेब सेवा (कभी-कभी एक से अधिक) से संपर्क करता है, डेटा को एक्सटीजेएस स्टोर या विशेष-उद्देश्य डेटा संरचनाओं में लाता है
  • प्रतिपादन मानक एक्सटीजेएस घटकों का उपयोग करता है, इसलिए मैं स्टोरों को ग्रिड से बाँध सकता हूं, रिकॉर्ड से फ़ॉर्म लोड कर सकता हूं, ...

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

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


10
Question - What makes an application complex ? 

उत्तर - प्रश्न में ही complex जटिल ’शब्द का प्रयोग। इसलिए, एक सामान्य प्रवृत्ति शुरुआत से ही एक जटिल समाधान की तलाश में होगी।

Question - What does the word complex means ?

उत्तर - जो कुछ भी अज्ञात या आंशिक रूप से समझा जाता है। उदाहरण: गुरुत्वाकर्षण का सिद्धांत आज भी मेरे लिए है लेकिन सर आइजैक न्यूटन के लिए नहीं है जिन्होंने 1655 में इसकी खोज की थी।

Question - What tools can I use to deal with complexity ?

उत्तर - समझ और सरलता।

Question - But I understand my application . Its still complex ?

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

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

उत्तर - क्योंकि,

-> एसपीए कुछ प्रकार की कोर तकनीक नहीं है जिसे नया आविष्कार किया गया है, जिसके लिए हमें व्हील को कई चीजों के लिए सुदृढ़ करना होगा जो हम एप्लिकेशन विकास में कर रहे हैं।

-> इसकी एक अवधारणा बेहतर प्रदर्शन, उपलब्धता, मापनीयता और वेब अनुप्रयोगों की स्थिरता के लिए आवश्यक है।

-> इसकी एक नई पहचान की गई डिज़ाइन पैटर्न है, इसलिए एसपीए की समझ एक डिज़ाइन पैटर्न के रूप में एक एसपीए की वास्तुकला के बारे में सूचित निर्णय लेने में लंबा रास्ता तय करती है।

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

Question - What about the use of Frameworks ?

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

Question - Can you suggest one of the many approaches to SPA architecture ?

उत्तर - अपने आवेदन की प्रकृति के आधार पर अपने स्वयं के ढांचे के बारे में सोचें। अनुप्रयोग घटकों को वर्गीकृत करें। एक मौजूदा ढाँचे की तलाश करें जो आपके व्युत्पन्न ढाँचे के करीब है, अगर आप इसे ढूंढते हैं तो इसका उपयोग करें, अगर आपको यह नहीं मिलता है तो मेरा सुझाव है कि अपने स्वयं के साथ आगे बढ़ें। फ्रेमवर्क बनाना एक प्रयास है, लेकिन लंबे समय में बेहतर परिणाम मिलते हैं। मेरे एसपीए ढांचे में कुछ बुनियादी घटक होंगे:

  • डेटा स्रोत: मॉडल / मॉडल के संग्रह

  • डेटा प्रस्तुत करने के लिए चिह्नित करें: टेम्पलेट

  • आवेदन के साथ बातचीत: घटनाक्रम

  • स्टेट कैप्चरिंग और नेविगेशन: रूटिंग

  • उपयोगिताएँ, विगेट्स और प्लग-इन: लाइब्रेरी

मुझे पता है अगर यह किसी भी तरह से मदद की और अपने एसपीए वास्तुकला के साथ अच्छे भाग्य !!


1
यह कुछ महान परिप्रेक्ष्य जोड़ता है (यह आमतौर पर दुर्लभ है)। धन्यवाद!
कोडी



1

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

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

और मैं आपके जावास्क्रिप्ट / html में MVC पैटर्न को लागू करने की सलाह दूंगा और शायद जावास्क्रिप्ट के लिए आपके अधिकांश ऑब्जेक्ट मॉडल को json के रूप में किया जा सकता है जिसे आप वास्तव में ajax के माध्यम से सर्वर से लौटाते हैं और javascirpt html को रेंडर करने के लिए json का उपयोग करता है।

मैं पुस्तक अजाक्स को कार्रवाई में पढ़ने की सलाह दूंगा क्योंकि यह आपके द्वारा जानना आवश्यक अधिकांश सामान को कवर करता है।


jQuery के प्रोटोटाइप का उपयोग करके एक नाम स्थान पर (किसी भी JS की तरह) लिखा जा सकता है। मुझे यकीन नहीं है कि यह एक ढांचे के पीछे वारंट को वारंट करने के लिए एक बड़ी या अस्पष्ट पर्याप्त सुविधा है - मैं सीखना चाहता हूं कि जेएस वास्तव में क्या कर रहा है। stackoverflow.com/questions/881515/…
SimpleGy

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

तो मेरी बात अब भी कायम है अगर नॉकआउट या बैकबोन में शामिल नहीं है, दस्तावेज़ ट्रैवर्सिंग, ईवेंट हैंडलिंग, आदि तो बहुत कुछ नहीं है। YUI3 ऐप फ्रेमवर्क करता है और इसका उपयोग करने पर JQuery की कोई आवश्यकता नहीं है।
ईगलस्टेम

1
jquery अपने सभी तरीकों को jQuery चर और $ चर में संग्रहीत करता है। यदि आप नो संघर्ष विकल्प का उपयोग करते हैं तो केवल वैश्विक नामस्थान में jQuery का नाम बनाया जाता है। jQuery एक ढांचा नहीं है, बस एक पुस्तकालय है, यह आपको यह नहीं बताता है कि चीजों को कैसे करना है, बस कुछ सामान्य सामान करने के लिए कुछ शॉर्टकट दें। JQuery की तुलना Dojo / YUI आदि से करना गलत है।
हॉफमैन

1
यदि आपका कथन गलत है तो आपका मूल्यांकन।
जॉन लेहमन



0

बाहर की जाँच करें http://bennadel.com/projects/cormvc-jquery-framework.htm बेन बहुत तेज है और यदि आप अपने ब्लॉग पर चारों ओर खुदाई करते हैं तो उसके पास कुछ अच्छे पोस्ट हैं कि कैसे CorMVC को एक साथ रखा जाता है और क्यों।


0

वैकल्पिक: ItsNat पर एक नज़र डालें

जावास्क्रिप्ट में सोचें लेकिन जावा में समान DOM API के साथ सर्वर में समान कोड, सर्वर में कस्टम क्लाइंट / ब्रिज के बिना आपके एप्लिकेशन को प्रबंधित करना आसान है क्योंकि UI और डेटा एक साथ हैं।



0

NikaFramework आपको सिंगल-पेज एप्लिकेशन बनाने की अनुमति देता है। साथ ही आपको HTML , CSS ( SASS ), जावास्क्रिप्ट को अलग-अलग फाइलों मेंलिखनेऔर अंत में केवल एक आउटपुट फाइल में बंडल करने कीअनुमति देता है।


0

मैं येओमान का पता लगाने की सिफारिश करूंगा । यह आपको अपनी नई परियोजना के लिए मौजूदा "सर्वोत्तम अभ्यास" का उपयोग करने की अनुमति देता है।

उदाहरण के लिए:

यदि आप Angular.js का उपयोग करने का निर्णय लेते हैं, तो एक योमन जनरेटर है , जो आपको रूटिंग, विचारों, सेवाओं आदि के लिए एक संरचना प्रदान करता है, साथ ही आपको परीक्षण करने, अपना कोड निर्दिष्ट करने, आदि की अनुमति देता है।

यदि आप बैकबोन का उपयोग करने का निर्णय लेते हैं, तो इस जनरेटर की जांच करें

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