खोज परिणाम पृष्ठ प्रयोग

खोज परिणाम पृष्ठ सबसे लोकप्रिय यैंडेक्स पृष्ठों में से एक है। इसे दिन में लगभग 130 मिलियन बार डाउनलोड किया जाता है। 25KB के औसत पृष्ठ आकार के साथ यह हमें प्रति दिन 3TB यातायात देता है।

स्पष्ट सादगी के बावजूद, इस पृष्ठ के पीछे बड़ी संख्या में लोगों का विशाल कार्य और बहुत सारी परिष्कृत प्रौद्योगिकियां हैं।

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



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

खाका विकास
पहले मॉकअप दिखाई देने से पहले ही हमें विकास के दृष्टिकोण पर फैसला करना था। दो विकल्प थे: एक स्थैतिक पृष्ठ को बाहर करना और फिर इसे टेम्पलेट्स में काटना, या वास्तविक डेटा पर तुरंत विकसित करना और वास्तविक टेम्पलेट लिखना।

सामान्य मामले में, विशेष रूप से यदि एक टीम लेआउट और टेम्पलेट विकास में शामिल है, तो एक दूसरा दृष्टिकोण बेहतर है। यह सुनिश्चित करता है कि परियोजना किसी भी समय रिलीज (या कम से कम परीक्षण के लिए) के लिए तैयार है। यही है, विकास की शुरुआत में, एक "कच्चा", लेकिन पहले से ही परियोजना का कामकाज प्रोटोटाइप उत्पन्न होता है, जो "स्पर्श" हो सकता है। नतीजतन, यह वह विकल्प है जिसे हमने चुना है।

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

जावास्क्रिप्ट हर जगह है
हुड के तहत, खोज परिणाम पृष्ठ के नए संस्करण में जावास्क्रिप्ट टेम्पलेट हैं। वे पर्ल TT2 भाषा के लिए टेम्पलेट इंजन की तुलना में तेजी से काम करते हैं जो हमने पहले इस्तेमाल किया था, और उन्हें लिखना अधिक सुविधाजनक और सरल है। अब, मानकीकरण के दो स्तर जेएस, क्लाइंट स्क्रिप्ट, उपयोगिताओं और बिल्ड प्रौद्योगिकियों, और एक डेमन कलेक्टर में लिखे गए हैं।

वर्तमान में, YUICompressor का उपयोग JS और CSS कोड को संपीड़ित करने के लिए किया जाता है, जिसके लिए सर्वर पर Java की आवश्यकता होती है, इसलिए भविष्य में हम UglifyJS और CSSO JS obfuscators पर स्विच करना चाहते हैं - वे तेजी से काम करते हैं और कम संसाधन गहन होते हैं।

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

AJAX, इतिहास एपीआई
काफी समय पहले, यह एक पूर्ण रिबूट के बिना पृष्ठ पर डेटा को अपडेट करने के लिए AJAX तकनीक का उपयोग करने के लिए "फैशनेबल" बन गया। इस तकनीक के फायदे काफी स्पष्ट हैं: आपको डेटा को अपडेट करने, स्क्रिप्ट को आरम्भ करने के लिए हर बार पूरे पृष्ठ (मार्कअप, स्टाइल, स्क्रिप्ट, चित्र) को लोड करने की आवश्यकता नहीं है। यह उपयोगकर्ता को नया डेटा देने की प्रक्रिया को बहुत तेज करता है। धीमी चैनलों पर डाउनलोड गति में अंतर कट्टरपंथी है।

हालांकि, AJAX के सभी फायदों को पूरी तरह से समझने के बाद, हम Yandex.Search में इस दृष्टिकोण को लागू करने की जल्दी में नहीं थे। हम अपने उपयोगकर्ताओं को न केवल प्रौद्योगिकी, बल्कि एक पुन: डिज़ाइन किए गए इंटरफ़ेस के साथ एक पूर्ण उत्पाद पेश करना चाहते थे। इसलिए, खोज परिणाम पृष्ठ के एक नए संस्करण को AJAX और इतिहास API के व्यापक उपयोग की आवश्यकता होगी।

(हमने 2 जून 2012 को वाई सुब्बतनिक में मिन्स्क में हमारे कार्यान्वयन के बारे में विस्तार से बात की )

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

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

तैनाती
हमारी लगभग सभी परियोजनाएं अपनी स्थिर फ़ाइलों को एक स्थिर क्लस्टर - yandex.st पर संग्रहीत करती हैं। ये कई दर्जनों कारें हैं जो विभिन्न शहरों और देशों में स्थित हैं जो बहुत जल्दी डेटा देने में सक्षम हैं।
स्टैटिक क्लस्टर का उपयोग करने के कई कारण हैं:
- भेजने से पहले फ़ाइलों को उत्पन्न करने की आवश्यकता नहीं है - सब कुछ तैयार है और डिस्क पर स्थित है;
- तैयार फ़ाइलों को स्थानांतरित करने के लिए, एक हल्का वेब सर्वर पर्याप्त है;
- उच्च मशीन उत्पादकता की आवश्यकता नहीं है;
- स्टैटिक्स हमेशा के लिए कैश्ड हो जाते हैं, और पैकेज संस्करण को बदलकर या हैश राशि को बदलकर अमान्य कर दिया जाता है;
- सर्विस कुकीज़ को yandex.st डोमेन पर नहीं भेजा जाता है, इससे ट्रैफ़िक की मात्रा कम हो जाती है;
- "के माध्यम से" फाइलें (उदाहरण के लिए, jquery.min.js या Yandex लोगो के लिए कई सेवाओं पर प्रयुक्त) को सेवा से सेवा पर स्विच करने पर हर बार डाउनलोड करने की आवश्यकता नहीं है।

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

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

खोज परिणाम पृष्ठ को अपडेट करना जारी रहेगा: दोनों yandex.com पर और यांडेक्स के अन्य संस्करणों पर - तुर्की से रूसी तक। हमारे पास बहुत सारे प्रयोगों की योजना है, जिसमें इंटरफेस भी शामिल है।

मिखाइल ट्रोशेव ,
खोज इंटरफ़ेस विकास टीम लीडर