प्रगतिशील संवर्धन बनाम एकल पृष्ठ ऐप्स

Question

मैं अभी बोस्टन में एक इवेंट शिवाय नामक सम्मेलन से वापस आया ।

वक्ताओं के बीच वास्तव में लोकप्रिय विषय प्रगतिशील वृद्धि का विचार था - एक साइट की सामग्री को HTML में जाना चाहिए, और व्यवहार को बढ़ाने के लिए केवल जावास्क्रिप्ट का उपयोग किया जाना चाहिए।

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

जेरेमी कीथ ने इस बारे में विशेष रूप से व्यावहारिक बात की।

लेकिन Backbone और Angular जैसे सिंगल पेज वेब ऐप्स का क्या? इन चौखटों के पीछे का पूरा डिज़ाइन डेवलपर को HTML से बाहर जाने वाली सामग्री की ओर, और JSON API जैसी किसी चीज़ में धकेलता है।

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

Comments

उनके पास दो अलग-अलग उपयोग के मामले हैं। हां, जब सर्वर हेवी लिफ्टिंग कर रहा हो तो ओवरलैप होता है।

— BobDalgleish

मुझे लगता है कि यह कहना उचित है कि सिंगल-पेज एप्लिकेशन के लिए ब्राउज़र की आवश्यकताएं डिजाइन द्वारा "साधारण" वेब एप्लिकेशन के लिए अधिक कठोर हैं।

— रॉबर्ट हार्वे

आपको जेरेमी कीथ को आपको वास्तविक दुनिया का उदाहरण देने के लिए कहना चाहिए, जहां प्रगतिशील वृद्धि वास्तव में कुल इंटरनेट उपयोगकर्ताओं को 1-10% खुश करने के लिए लायक है और अन्य 90% उपयोगकर्ता के डेटा के बारे में पूछते हैं, क्या वे वास्तव में प्रगतिशील वृद्धि की परवाह करते हैं या यदि वे खुश हैं अगर वे IE 5.0 या जावास्क्रिप्ट के बिना वेबसाइट पर जा सकते हैं

— किरी

यदि JS / images / etc को अक्षम करने वाले लोगों का प्रकार आपके मूल लक्ष्य जनसांख्यिकीय में नहीं है, तो प्रगतिशील वृद्धि को आगे बढ़ाने के लिए कोई वैध व्यावसायिक कारण नहीं है।

— ग्राहम

'कम बैंडविड्थ वाले नेटवर्क पर उपकरण' के लिए समर्थन वास्तव में और एसपीए के लिए तर्क है, इसके खिलाफ नहीं! एसपीए में आप केवल एक बड़ा अनुरोध करते हैं, जहां जेएस के बिना आपके पास हर बार होता है!

— दिमित्री जैतसेव

Answer 1

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

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

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

Comments

I don't see why developers should bend over backwards for those visitors। यदि आपका अनुबंध निर्दिष्ट करता है कि आपको अपनी वेबसाइट का एक सुलभ संस्करण प्रदान करने की आवश्यकता है, तो एसपीए का उपयोग करना अधिक कठिन हो सकता है। इसके अलावा SEO के बारे में क्या?

— साइमन बर्गोट

@ साइमन: आप एक एसपीए को भी सुलभ बना सकते हैं (उदाहरण के लिए देखें stackoverflow.com/questions/15318661/… )। इसी तरह SEO के लिए (यदि SEO मायने रखता है, जो ऐप पर निर्भर करेगा)।

— '12:24 पर sleske

आपकी कुछ उपमाएँ एक भूसे वाले व्यक्ति की हैं। जावास्क्रिप्ट को अक्षम करना एक सुरक्षा उद्देश्य है; यह तर्क देना कठिन होगा कि हेडलाइट को एक देखभाल में जोड़ने से यह कम सुरक्षित हो जाता है।

— रॉबर्ट हार्वे

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

— कॉलिन एलन

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

— डिस्सिडेंट रेज

Answer 2

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

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

सच्चे वेब अनुप्रयोगों के लिए, यानी कि वास्तव में एक एसपीए होना चाहिए क्योंकि वे मानक अनुरोध / प्रतिक्रिया पैटर्न में फिट नहीं होते हैं; प्रगतिशील संवर्द्धन सच्चे अनुप्रयोगों के लिए बहुत अधिक कठिन है क्योंकि वे वास्तव में केवल एक ब्राउज़र का उपयोग कर रहे हैं तकनीकी रूप से अनुप्रयोग को लिखने के लिए एक प्रौद्योगिकी मंच के रूप में। स्क्रिप्टिंग भाषा एक सच्चे वेब अनुप्रयोग का एक अनिवार्य हिस्सा है, न कि केवल एक जिसे संवर्द्धन के लिए वैकल्पिक रूप से बोल्ट किया जा सकता है। कुछ प्रगतिशील संवर्द्धन तकनीक अभी भी काम कर सकती हैं (उदाहरण के लिए फ्लैश वीडियो / ऑडियो की जगह <video>/ <audio>टैग के साथ ) लेकिन सच्चे वेब अनुप्रयोगों के लिए आधार रेखा के रूप में जावास्क्रिप्ट की आवश्यकता होगी।

Comments

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

— sinelaw

@ सिनेलॉ: अधिकांश व्यावसायिक अनुप्रयोग आम तौर पर एसपीए नहीं होने चाहिए। कुछ अपवाद हैं, जैसे स्प्रेडशीट, वर्ड प्रोसेसिंग, लेकिन वे विषम हैं। संकेतक जिन्हें आपको एसपीए की आवश्यकता होती है: यदि आपको सर्वर से क्लाइंट तक डेटा पुश करने की आवश्यकता है, न केवल एक या दो सूचनाओं के लिए, बल्कि एप्लिकेशन के महत्वपूर्ण तत्व के रूप में, जैसे गेम, स्टॉक ट्रैकिंग, चैट ऐप; यदि आपके एप्लिकेशन में "पेज" की समझदार अवधारणा नहीं है या "पेज" की अवधारणा एप्लिकेशन में पूरी तरह से विपरीत है, जैसे कार्यालय अनुप्रयोग। व्यावसायिक अनुप्रयोग जो ज्यादातर रूपों पर काम करते हैं, वे गैर-एसपीए के रूप में बेहतर रहते हैं।

— रेयान

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

— sinelaw 13

@ सिनेलॉ: एक एसपीए का निर्माण एक बहु-पृष्ठ साइटों को विकसित करने की तुलना में लगभग कभी सस्ता नहीं है; खासकर अगर आप पुराने ब्राउज़रों को वैसे भी खानपान नहीं दे रहे हैं।

— रेयान

यदि आपकी टीम में एसपीए विशेषज्ञ हैं जो सर्वर-केंद्रित परियोजनाओं में थोड़ी पृष्ठभूमि वाले हैं, तो यह सस्ता होगा।

— sinelaw

Answer 3

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

आप एक बॉट सेट कर सकते हैं जो आपको एप्लिकेशन को क्रॉल करेगा और एक स्थिर संस्करण बचाएगा। इस तकनीक का उपयोग जावास्क्रिप्ट के बिना ब्राउज़र में HTML की सेवा के लिए किया जा सकता है (अंधे लोगों या खोज इंजन बॉट द्वारा उपयोग किया जाता है)। यह एक निवेश है, इसलिए यह वास्तव में आपकी आवश्यकताओं के लिए आता है।

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

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

Answer 4

मुझे लगता है कि यह निर्भर करता है कि आप प्रोग्रेसिव एनहांसमेंट के साथ कितनी दूर जाना चाहते हैं - यह नियमों के हार्ड-एंड-फास्ट सेट के बजाय एक डिज़ाइन प्रतिमान है।

यदि आप एसपीए फ्रेमवर्क का उपयोग कर रहे हैं, तो मुझे लगता है कि जावास्क्रिप्ट की अनुमति दी गई है। हालाँकि, आपके द्वारा अपने पेज को बढ़ाने के लिए लिखी गई जावास्क्रिप्ट, जो भी HTML फ्रेमवर्क बना सकती है, उससे निपटने के लिए पर्याप्त स्मार्ट होनी चाहिए।

आप अन्य पीई तकनीकों से भी लाभ उठा सकते हैं जैसे हालिया ब्राउज़र रिलीज़ के लिए नवीनतम CSS सुविधाओं का लाभ लेना, या HTML5 से HTML4 की गिरावट।

Comments

प्रगतिशील वृद्धि का हिस्सा यह है कि जावास्क्रिप्ट के बिना बुनियादी सामग्री उपलब्ध होनी चाहिए। मुझे यकीन नहीं है कि जावास्क्रिप्ट के बिना एक एसपीए कैसे लिखा जाए।

— एलन शटको

@AlanShutko शायद iframes के साथ। एकाधिक पृष्ठ, लेकिन तकनीकी रूप से URL बदल नहीं रहा है ...;)

— इज़काता

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

— फिलोमिकस

प्रगतिशील संवर्धन Css3 का उपयोग करने के रूप में सरल हो सकता है जब यह गोल कोनों के लिए उपलब्ध है। मूल विचार का जावास्क्रिप्ट से कोई लेना-देना नहीं है।

— डैनियल लिटिल

Answer 5

प्रगतिशील वृद्धि और एक सिंगल पेज ऐप सह-अस्तित्व में हो सकता है। इस तरह से ऐप्स बनाने के लिए मैंने जो दो सबसे सम्मोहक तर्क दिए हैं, वे हैं:

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

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

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

लेखन के समय, React.js और Ember (आगामी FastBoot के साथ) वे दो हैं जिनके बारे में मुझे पता है या एक प्रथम श्रेणी के नागरिक को प्रदान करने की कोशिश कर रहे हैं; सर्वर-साइड प्रदान किया गया पृष्ठ अभी भी एक काम कर रहा एसपीए है जब इसे क्लाइंट ब्राउज़र पर पार्स किया जाता है।

Answer 6

मेरा विचार है कि कम किया गया पृष्ठ लोड संभवतः सर्वरों और नेटवर्क के लिए काफी अच्छा है। मुझे और अधिक एसपीए को सही तरीके से इस्तेमाल करना अच्छा लगेगा।

मैं यह देखने के लिए बंद हूं कि इसके लिए दो चीजों की आवश्यकता है:

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

तथा

2) सर्वर को सही प्रारूप की सेवा करके / foo / bar / json और foo / bar जैसे मार्गों के लिए उत्तरदायी होना चाहिए; वास्तविक रूप से यदि आप पहले पृष्ठ को प्राप्त करने के लिए लेआउट और भाग में सब कुछ लपेट रहे हैं, तो आपको दूसरे और बाद के पृष्ठों के लिए लेआउट और भाग के माध्यम से सब कुछ प्राप्त करने में सक्षम होना चाहिए।

यहाँ काम का एक अच्छा सा है; माना जाता है, लेकिन अगर आपने पूर्ण स्टैक पर नियंत्रण पा लिया है तो यह दो तकनीकों को संतुलित करता है।