Mail.Ru for Business, भाग 2: यह कैसे काम करता है

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

Cutscene के तहत - पृष्ठ को पुनः लोड किए बिना एकल-पृष्ठ, त्रुटि संग्रह, अस्थायी और एक URL से दूसरे पर स्विच करने के बारे में।





एकल-पृष्ठ

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



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

कुछ तकनीकों, इसके विपरीत, पहली बार लागू किया गया था, और मुझे बहुत खुशी है कि मैं विकास की प्रक्रिया में कुछ नया लाने में सक्षम था :)

Multiavtorizatsiya

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



सीएसएस एनीमेशन

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

अधिकांश एनीमेशन का काम CSS का उपयोग करके किया जाता है।

.panel { … top: -110px; transition: top 0.5s 0; } /*  */ .panel__show { top: 0; } 

एक स्क्रिप्ट के साथ हम इसे केवल उन क्षणों में चलाते हैं जिनकी हमें आवश्यकता होती है।

 var $panel = $('#id1') , $wrap= $('#id2') , offsetTop = $wrap.offset().top + $wrap.outerHeight() ; $(window).scroll(function() { var show = this.scrollTop() > offsetTop; $panel.toggleClass('panel__show', show); }.throttle(200, $(window))); 

लेकिन हमने आगे जाने और उन उपयोगकर्ताओं के लिए भी एनीमेशन बनाने का फैसला किया जो उन ब्राउज़र का उपयोग करते हैं जो इन अद्भुत सीएसएस बन्स का समर्थन नहीं करते हैं। उनके लिए, हम jQuery का उपयोग करके एनिमेशन बनाते हैं। यह निर्धारित करने के लिए कि ब्राउज़र सीएसएस सुंदरता का समर्थन करता है या नहीं, हम मानक CSS.supports ब्राउज़र फ़ंक्शन का उपयोग करते हैं:

 var cssTransitions = CSS.supports("transition", "all 1s 1s") || CSS.supports("-webkit-transition", "all 1s 1s") //… etc ; ... if( cssTransitions ) { //  css } else { //  jQuery } 

CSS.supports मानकीकृत Modernizr की तरह कुछ है, केवल मूल और एक विशिष्ट कार्य करने के लिए - एक विशिष्ट CSS संपत्ति के लिए समर्थन की जाँच करना। मूल समर्थन ब्राउज़र क्रोम 28+, फ़ायरफ़ॉक्स 22+, ओपेरा 12.1+ में है। अन्य ब्राउज़रों के लिए, हम अपने मेल के डेवलपर्स में से एक द्वारा लिखित पॉलीफ़ाइल का उपयोग करते हैं। यह पॉलीफाइल लगभग किसी भी मेल.रु प्रोजेक्ट पर डिफ़ॉल्ट रूप से उपलब्ध है और कुछ विशिष्ट स्थितियों में इसका सफलतापूर्वक उपयोग किया जाता है।

उत्सव

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

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


इतिहास एपीआई

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

यह सब कैसे काम करता है? एपीआई हमें टाइप हिस्ट्री के एक ऑब्जेक्ट तक पहुंच प्रदान करता है, जिसमें प्रत्येक टैब है और ऑब्जेक्ट मॉडल में window.history पर स्थित है। जावास्क्रिप्ट का उपयोग करते हुए, हम .pushState (राज्य, शीर्षक, url) विधियों का उपयोग करके पृष्ठों को पता बार में हेरफेर कर सकते हैं जो ब्राउज़र इतिहास में एक नया url जोड़ते हैं और .replaceState (राज्य, शीर्षक, url) जो वर्तमान url को बदलते हैं। कहानी में एक नया आइटम जोड़े बिना।

इतिहास ऑब्जेक्ट की राज्य संपत्ति हमेशा वर्तमान यूआरएल के वर्तमान "राज्य" का संकेत देगी। उदाहरण के लिए, अगर हमने पुशस्टेट ({डेटा: “test1”}, “”, “url1”) और पुशस्टेट ({डेटा: “test2”}, “”, “url2”) किया - i.e. ब्राउज़र इतिहास में आइटम जोड़ने के साथ पृष्ठों के माध्यम से दो "बदलाव" किए गए और पेज "url2" पर समाप्त हो गया, और उपयोगकर्ता ने ब्राउज़र में "बैक" पर क्लिक किया और पेज "url1" पर समाप्त हो गया, फिर इतिहास का मान .state.data संपत्ति "test1" होगा - हमें क्या चाहिए।

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

 //  URL var path = history.location.pathname; // history.location – from polyfill if( /*    */ ) { var state = { notAuth: true , urlBack: (path != "/") ? path : "" }; //     //         history.pushState( state, null, "/"); } 

फिर, प्राधिकरण के बाद, हम समझते हैं कि उपयोगकर्ता कहाँ जाना चाहता था, और इसे गंतव्य पर फेंकना चाहिए।

SingleJile बनाम आवश्यकता

एक महान singe- पेज आवेदन हमेशा जे एस मॉड्यूल का एक बहुत कुछ है। कुछ मॉड्यूल एक सामान्य कार्यक्षमता हैं जिनकी लगभग हमेशा आवश्यकता होती है, कुछ मॉड्यूल की आवश्यकता केवल अलग-अलग पृष्ठों पर होती है। काफी जटिल कार्यक्षमता विकसित करते समय, js फ़ाइलों की संख्या बहुत जल्दी बढ़ती है। इस मामले में, डेवलपर को लगातार निर्भरता के बारे में और जेएस-फाइलों को जोड़ने की प्रक्रिया के बारे में सोचने की जरूरत है। आदेश में गलती करने या वांछित फ़ाइल कनेक्ट करने के लिए भूल जाने के बाद, आप सबसे अप्रत्याशित जगह पर एक त्रुटि प्राप्त कर सकते हैं। एएमडी एपीआई सिर्फ इस समस्या को हल करता है। डेवलपर को केवल निर्भरता की सूची निर्दिष्ट करने और एक विशेष तरीके से मॉड्यूल घोषित करने की आवश्यकता है, और आवश्यकता है JJS सही क्रम में इन मॉड्यूल को लोड करने का ध्यान रखेगा ।

लेकिन हर बार जब वह हमारे एप्लिकेशन में लॉग इन करता है तो कई फाइलों के डाउनलोड के लिए उपयोगकर्ता को मजबूर करना गलत होगा। इसलिए, हम केवल आवश्यकता के विकास मंच पर हीJJS का उपयोग करते हैं, और लड़ाई में एक "बिल्ड" है - एक जेएस फ़ाइल जिसमें एप्लिकेशन के काम करने के लिए आवश्यक सभी मॉड्यूल शामिल हैं। असेंबली r.js लाइब्रेरी द्वारा किया जाता है, जो कि आवश्यकताएँ परियोजना का हिस्सा है।

यह स्पष्ट है कि ज्यादातर मामलों में मॉड्यूल के पूरे सेट की आवश्यकता नहीं है और ऐसा लग सकता है कि उनमें से कुछ व्यर्थ में जुड़े हुए हैं, जिससे ब्राउज़र को प्रेषित डेटा की मात्रा बढ़ जाती है। लेकिन यह केवल पहली नज़र में है। वास्तव में दिए गए js-files के सर्वर पर gzip-संपीड़न व्यावहारिक रूप से इस समस्या को समाप्त करता है। इसके अलावा, हम http- अनुरोधों पर बचत करते हैं। नतीजतन, एक बड़ी जेएस फाइल कई छोटे लोगों की तुलना में तेजी से लोड होगी, यहां तक ​​कि इस तथ्य को ध्यान में रखते हुए कि छोटी फाइलें "लेज़ीली" लोड की जाएंगी - अर्थात। केवल आवश्यकतानुसार। इस मुद्दे की विस्तृत समीक्षा के लिए, मैं इस लेख को पढ़ने और जावास्क्रिप्ट को शुरू करने या इस विषय पर अपने-अपने शोध को शुरू करने का सुझाव देता हूं।

प्रोजेक्ट असेंबली

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

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

त्रुटि संग्रह

वेब डेवलपर के लिए क्लाइंट की ओर से त्रुटियों के बारे में जानना उपयोगी है। उन्हें कहीं इकट्ठा करना, उन्हें संग्रहित करना और फिर उन्हें ठीक करना और भी अच्छा होगा। हम इसके लिए तीसरे पक्ष के संतरी मंच का उपयोग करते हैं।

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

संतरी त्रुटियों का वर्णन करने वाले पत्र भेज सकते हैं। इस मामले में, आप डर नहीं सकते कि मामूली मुद्दों की एक ही रिपोर्ट बॉक्स को रोक देगी: संदेश पैरामीटर जो डेवलपर को परेशान करने के योग्य हैं उन्हें आसानी से कॉन्फ़िगर किया जा सकता है।

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

संतरी विशेष रूप से विदेशी कीड़े को पकड़ने के लिए अपरिहार्य है जिसे हम पुन: पेश नहीं कर सकते हैं। सहमत हूं, आपकी आंखों के सामने कोड की एक पंक्ति और त्रुटि का विवरण (घटना की आवृत्ति और ब्राउज़र सहित), यह समझने में बहुत अधिक सुविधाजनक है कि क्या गलत हुआ।

हालाँकि, त्रुटि और लाइन संख्या का एक सरल विवरण पर्याप्त नहीं हो सकता है। त्रुटियों को पुन: उत्पन्न करने के लिए कुछ विदेशी या मुश्किल के लिए, इस त्रुटि का विश्लेषण करने के लिए अधिक जानकारी की आवश्यकता है। उदाहरण के लिए, "$ परिभाषित नहीं है" त्रुटि के लिए, आपको यह समझने की आवश्यकता है कि क्या jQuery ने हमारे साथ लोड किया है? ब्राउज़र त्रुटियों को इकट्ठा करने के लिए, हम Raven.js लाइब्रेरी का उपयोग करते हैं, जिसमें एक अनैच्छिक सुविधा होती है - सर्वर पर प्रत्येक त्रुटि भेजे जाने से पहले डेटा कॉलबैक हैंडलर को कॉल करने के लिए:

 var ravenSetTimeout = typeof setTimeout === 'function' && setTimeout; var options = { dataCallback: function(obj){ var userData; if( typeof obj === "object" ) { userData = obj["sentry.interfaces.User"]; if( !userData ) { userData = obj["sentry.interfaces.User"] = {}; } userData.inFrame = window.parent !== window; userData.jQueryVersion = typeof jQuery === 'function' && jQuery.fn.jquery; userData.setTimeoutBody = typeof setTimeout === 'function' && (setTimeout + "").contains("[native code]") ? "[native]" : ravenSetTimeout ? setTimeout === ravenSetTimeout ? "[raven]" : "[other]" : "[none]" ; } return obj; } }; Raven.config("…", options).install(); 

इस उदाहरण में, हम जाँचते हैं कि क्या हम iframe में चल रहे हैं, jQuery संस्करण (यदि यह सभी पर लोड है) और setTimeout कोड (क्योंकि इसे बदला जा सकता है)। हम त्रुटियों के सही निदान के लिए थोड़ी अधिक सांख्यिकीय जानकारी एकत्र करते हैं। Sentry.interfaces.User संपत्ति का मान सेंटरी इंटरफ़ेस में एक विशेष फ़ील्ड में प्रदर्शित किया जाएगा।

चर्चा

यह है कि कैसे व्यापार के लिए हमारे मेल काम करता है। मुझे उम्मीद है कि यह उपयोगकर्ताओं को सुंदरता, सुविधा और कार्यक्षमता के साथ प्रसन्न करेगा। आप यहां बिजनेस के लिए Mail.Ru के बारे में अधिक पढ़ सकते हैं। आपको याद दिला दूं कि यह सेवा अब बीटा में है और हमें फीडबैक@ biz.mail.ru या इस पोस्ट की टिप्पणियों में आपकी प्रतिक्रिया और सुझाव प्राप्त करने में खुशी होगी।

हम हैबर उपयोगकर्ताओं को कोई सहायता प्रदान करने की कृपा कर रहे हैं जो हमारी नई सेवा को आजमाना चाहते हैं।

ओल्गा अलेक्सेवा
ईगोर हलीमेंको (टर्मि)
मेल फ्रंटेंड डेवलपमेंट टीम