ऑनलाइन स्टोर मिलो 2.0 - आरआईए

अपने ऑनलाइन स्टोर में आगंतुकों की गति, उपयोगिता और उपयोगकर्ता अनुभव को कैसे बढ़ाएं?
- इसे RIA बनाओ! (रिच इंटरनेट एप्लीकेशन)




एक अन्य परियोजना पर काम करते समय - एक सीआरएम ग्राहक के लिए एक वेब मॉड्यूल, मैं डेटा को जल्दी से खोज और फ़िल्टर करने का एक तरीका ढूंढ रहा था (जिसमें वृद्धि प्रति वर्ष 500 से अधिक होने की उम्मीद नहीं थी)। मैंने डेटाबेस में 10,000 डेमो किए और उनके साथ काम किया। पहली चीज जो हमने की थी, वह AJAX खोज थी - जल्दी से, यह पृष्ठ फ़्रेम को पुनः लोड नहीं करता है - सामान्य तौर पर, एक उपयुक्त विकल्प।

हालांकि, मेरे लिए एक और विचार आया - डेटा को एक जस सरणी के रूप में क्यों नहीं लोड किया गया?
नतीजतन, 10k रिकॉर्ड का वजन लगभग 1mb हो गया, और प्रेषित डेटा - 80kb (gzip 9 nginx)। कैश खोज की गति 10ms से कम है। और एक और विशाल प्लस - json फ़ाइलें ब्राउज़र द्वारा कैश की जाती हैं । यानी जब पृष्ठ को फिर से लोड किया जाता है, तो डेटा को तुरंत कैश से पढ़ा जाता है, केवल एक अगर संशोधित-संशोधित अनुरोध सर्वर पर भेजा जाता है और एक 304 प्रतिक्रिया प्राप्त करता है।

स्वाभाविक रूप से, सवाल उठता है: जब एक रिकॉर्ड बदल रहा है - सभी 10k रिकॉर्ड फिर से लोड करें?
समाधान तुच्छ है: डेटा को कई फाइलों में विभाजित किया जाता है - शायद ही कभी बदलते हुए।

डेमो में, मैंने एक उदाहरण के रूप में लैपटॉप का उपयोग करके इस अलगाव की कोशिश की (नीचे डेमो के बारे में) (500+ प्रविष्टियां):
... data = [
"notebooks1.json" // 18 - -
"notebooks2.json" // 4 - , ,
"notebooks3.json" // 2 -
"notebooks4.json" // 2 -
]

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

उसी समय, मैं सिटीलिंक ऑनलाइन स्टोर में नए घटकों की तलाश कर रहा था (एक सहकर्मी नहीं! बस एक अच्छा ऑनलाइन स्टोर - मैंने "डेटा दाता" :) के रूप में काम किया - महान डिजाइन और प्रयोज्य। लेकिन यह तथ्य कि छांटने या फ़िल्टर लगाने के दौरान पृष्ठ को लगातार लोड किया गया था, निराशाजनक था।

मैंने ग्राहक पक्ष और ऑनलाइन स्टोर पर डेटा (कार्यक्षमता) डाउनलोड करने और प्रसंस्करण के साथ अवधारणा को लागू करने का प्रयास करने का निर्णय लिया।
स्वाभाविक रूप से, आपको सभी डेटा को पहले से लोड करने की आवश्यकता नहीं है :) लेकिन, जैसा कि आप अनुभागों में जाते हैं - पूरी तरह से - जैसा कि वास्तव में डेमो में लागू किया गया है।

क्या आप इसे देख सकते हैं:
1. मूल ऑनलाइन स्टोर पर जाएं , छंटाई, फिल्टर आदि के साथ खेलें। - डेटा के प्रदर्शन की प्रतिक्रिया से गति को याद रखें।
2. ऑनलाइन स्टोर (आरआईए) के डेमो में गति की तुलना करें (कार्यक्षमता को विशेष रूप से जावास्क्रिप्ट + jquery का उपयोग करके ग्राहक की तरफ से लागू किया जाता है। नेग्नेक्स केवल स्थिर देता है। कोई php, Apache, mysql, आदि)।

विशेष रूप से, ब्राउज़र में काम की गति "बहुत तेज" से "सामान्य": क्रोम, ओपेरा 10.5+, एफएफ 3+, आईई 8/7।

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

यदि आपके पास एक छोटा / मध्यम ऑनलाइन स्टोर है, तो आप क्लाइंट-साइड RIA कार्यक्षमता को जोड़ने का बहुत अच्छा प्रयास कर सकते हैं।

हां, यह काम का एक अतिरिक्त हिस्सा है, व्यावहारिक रूप से क्लाइंट साइड पर सर्वर साइड डायनेमिक्स की कार्यक्षमता को डब करना है।

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

नोट: पश्चिम में, ऑनलाइन व्यापार के कई मास्टोडॉन और न केवल आईफोन और आईपैड के लिए अपनी सेवाओं के संस्करण बनाते हैं - बल्कि इन प्लेटफार्मों के लिए विकास के लिए बहुत पैसे की आवश्यकता होती है ( 15-50k से 500k + $ $ तक )। क्या आपको लगता है कि फैशन सिर्फ एक समाधान है?

क्या यह इसके लायक है? मुझे यकीन है कि आपके प्रगतिशील आगंतुक जवाब देंगे - निश्चित रूप से!

यह डेमो दृष्टिकोण का सिर्फ एक प्रदर्शन है। सब कुछ एहसास नहीं है, लेकिन साकार है।

पुनश्च डेमो के लिए प्रदान किए गए सर्वर के लिए लाफयेट हब्रायुज़र के लिए विशेष धन्यवाद।