फ्रंट एंड आइलैंड अंदर से

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

मैं आपको बताता हूँ कि कैसे हमने फ्रंट-एंड डेवलपमेंट प्रक्रिया को व्यवस्थित किया ताकि कार्य को हल करने के साधनों के बारे में सोचे बिना कार्य को हल करना संभव हो सके।

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

टीम का काम

बस नंबर

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

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

एक उच्च बस संख्या आसानी से प्राप्त की जाती है यदि सभी डेवलपर्स एक ही शैली में कोड लिखते हैं और जानते हैं कि परियोजना के उन हिस्सों में क्या होता है जो वे नहीं करते हैं।

दिशानिर्देश

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

हमारी परियोजना में उपयोग किए जाने वाले सबसे महत्वपूर्ण नियमों में से एक है jsDoc ( http://code.google.com/p/jsdoc-toolkit/ , https://developers.google.com/closure/compiler/docs) का उपयोग करके कोड का अनिवार्य दस्तावेज / js-for-compiler )। JsDoc का उपयोग करने से बहुत लाभ मिलता है। सबसे पहले, कोड की पठनीयता बढ़ जाती है। दूसरे, कई आईडीई में jsDoc का उपयोग करने वाले प्रोजेक्ट में नेविगेट करना अविश्वसनीय रूप से सुविधाजनक है। जो लोग vim जैसे सरल पाठ संपादकों का उपयोग करके अपने पैरों को शूट करना पसंद करते हैं , वे jsDoc-टूलकिट के साथ आने वाली कंसोल उपयोगिता का उपयोग करके HTML फ़ाइलों में प्रलेखन को संकलित कर सकते हैं। और अंत में, jsDoc को सही तरीके से लिखने के लिए, डेवलपर को अपने सिर में सब कुछ डालना होगा, और यह कभी भी चोट नहीं पहुंचाएगा।

कोड की समीक्षा

बस संख्या बढ़ाने के लिए दूसरी शर्त - परियोजना के अन्य हिस्सों के कोड विवरण के बारे में डेवलपर्स का ज्ञान - एक कोड समीक्षा प्रणाली का उपयोग करके प्राप्त किया जाता है, जिसे ओस्ट्रोवोक में डब्ल्यूटीएफ (किसी भी डेवलपर की पहली प्रतिक्रिया जो उसके कोड को नहीं देखता है) कहा जाता है।

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

विकास सुविधाएँ

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

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

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

जावास्क्रिप्ट

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

प्रत्येक पृष्ठ के लिए, हमारे पास एक अलग जावास्क्रिप्ट वर्ग है जिसमें कुछ नेस्टेड मॉड्यूल हैं, जो बदले में, अनंत तक भी खंडित हो सकते हैं।

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

दृष्टिकोण को समझाने के लिए, मैं एक क्रूड कोड का उदाहरण दूंगा। कल्पना करें कि हमारे पास सदस्यता के लिए एक ईमेल प्रविष्टि फ़ॉर्म वाला एक पृष्ठ है।

हम इस कोड को इस तरह व्यवस्थित करते हैं:

//base.js /** * @fileoverview Sperical code in vacuum for Habrahabr.ru * @author Igor Alexeenko (habrahabr.ru/users/iamo0) */ /** Project namespace */ var ota = {}; /** * Inheritance interface. Uses temporary constructor. * @param {Function} childCtor * @param {Function} parentCtor */ ota.inherit = function(childCtor, parentCtor) { var temporaryCtor = function() {}; temporaryCtor.prototype = parentCtor.prototype; childCtor.prototype = new temporaryCtor; childCtor.prototype.constructor = childCtor; // Link to parent's prototype. childCtor._super = parentCtor.prototype; }; /** * Base module. It's not necessary, to implement full base class in simple * example, so let it just be an empty class, inherited from Object. * @constructor * @extends {Object} */ ota.BaseModule = function() {}; ota.inherit(ota.BaseModule, Object); 

 //page.js /** * @fileoverview Page controller. * @author Igor Alexeenko (o0@ostrovok.ru) */ /** * @constructor * @extends {ota.BaseModule} */ ota.Page = function() { this._form = new ota.EmailForm; }; ota.inherit(ota.Page, ota.BaseModule); 

 //searchform.js /** * @fileoverview Email form. * @author Igor Alexeenko (alexeenko.igor@gmail.com) */ /** * @constructor * @extends {ota.BaseModule} */ ota.EmailForm = function() { this._formElement = document.querySelector('.' + ota.EmailForm.CLASS_NAME); this._formElement.addEventListener( 'submit', ota.EmailForm.getEventHandler(this, this._onSubmit) ); }; ota.inherit(ota.EmailForm, ota.BaseModule); /** * Class name, which uses for match DOM-element. * @const * @type {string} */ ota.EmailForm.CLASS_NAME = 'form-element'; /** * Error message, which displays if user, entered wrong email address. * @const * @type {string} */ ota.EmailForm.EMAIL_ERROR_MESSAGE = ( ', ,    .' ); /** * @const * @type {RegExp} */ ota.EmailForm.EMAIL_REGEXP = ( /^[a-zA-Z0-9-_.+]{1,}@[a-zA-Z0-9-_.]{2,}\.[a-zA-Z]{2,}$/ ); /** * Static method. Returns event handler with certain context. * @param {Object} context * @param {Function} handler * @return {Function} */ ota.EmailForm.getEventHandler = function(context, handler) { return function(event) { handler.call(context, event); }; }; /** * Form submit handler. Alerts an error if email field is empty or its value * is invalid. Otherwise, submits the form. * @param {Event} event * @private */ ota.EmailForm.prototype._onSubmit = function(event) { event.preventDefault(); var formIsValid = this.validateForm(); var emailField = this._formElement.elements[0]; if (!formIsValid) { alert(ota.EmailForm.EMAIL_ERROR_MESSAGE); emailField.focus(); return; } this._formElement.submit(); }; /** * Form validator. Returns true if email field value is valid. * @return {boolean} */ ota.EmailForm.prototype.validateForm = function() { var emailField = this._formElement.elements[0]; var emailValue = emailField.value; return (emailValue !== '' && ota.EmailForm.EMAIL_REGEXP.test(emailValue)); }; 

अब, यह काम करने के लिए, मेरे लिए HTML पेज में निम्नलिखित कोड डालना निश्चित रूप से पर्याप्त है, पहले सभी आवश्यक फाइलों को जोड़ने के लिए:

 <script> new ota.Page; </script> 

इस उदाहरण में, मैंने जानबूझकर किसी भी पुस्तकालयों का उपयोग हमारे दृष्टिकोण का सार दिखाने के लिए नहीं किया था और न ही उपयोग किए गए उपकरणों के लिए बातचीत को कम करने के लिए किया था।

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

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


मास्को (उच्चतम) के लिए अनुकूलित और नियमित खोज परिणाम।

मार्कअप और शैलियाँ

कोड का सावधान संगठन, निश्चित रूप से, न केवल जावास्क्रिप्ट पर लागू होता है, बल्कि टाइप करने के लिए भी: सर्वर और क्लाइंट टेम्प्लेट और सीएसएस। जावास्क्रिप्ट एप्लिकेशन के लिए लेआउट आवश्यकताएं समान हैं: मॉड्यूलरिटी, लचीलापन, कस्टमाइज़ेबिलिटी, दर्द रहित विरासत। हम भाग्यशाली हैं कि कोड को व्यवस्थित करने की एक काफी अच्छी तरह से स्थापित और सिद्ध प्रणाली है जो इन आवश्यकताओं के लिए उपयुक्त है। यह BEM ( http://ru.bem.info/method/ , http://clubs.ya.ru/bem/ ) है।

मार्कअप और शैलियों के लिए, हम BEM पद्धति का उपयोग करते हैं, हालांकि कुछ विशेषताओं के साथ। सबसे पहले, BEM हमारे जावास्क्रिप्ट सिस्टम के साथ अच्छी तरह से काम नहीं करता है, इसलिए हम अलग से js फ़ाइलों को संग्रहीत करते हैं और अपने स्वयं के क्रम में व्यवस्थित करते हैं, और दूसरी बात, हम सरल के बजाय SCSS ( http://sass-lang.com/ ) का उपयोग करते हैं। सीएसएस।

क्लाइंट टेम्प्लेट

इस तथ्य के कारण कि अधिकांश तर्क जावास्क्रिप्ट में कार्यान्वित किए जाते हैं, हम सक्रिय रूप से क्लाइंट टेम्प्लेट का उपयोग करते हैं। सबसे पहले, हमने अंडरस्कोर .js लाइब्रेरी ( http://underscorejs.org/ ) में निर्मित टेम्प्लेट इंजन का उपयोग किया, लेकिन जल्दी से महसूस किया कि यह असुविधाजनक था। सबसे पहले, मैं अलग-अलग फाइलों में टेम्प्लेट स्टोर करना चाहता था, और दूसरी बात, मैं चाहता था कि टेम्प्लेट जावास्क्रिप्ट में स्ट्रिंग वेरिएबल न हों, जिसमें टेक्स्ट एडिटर में मार्कअप लिखना जैसे एक्जीक्यूटिव होता है।

इसके अलावा, हमने सोचा कि इन टेम्पलेट्स को पहले से तैयार करना अच्छा होगा ताकि उपयोगकर्ता की मशीन के संसाधन जटिल स्ट्रिंग रूपांतरणों पर बर्बाद न हों।

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

 <!-- path/to/template.jst --> <ul> <% elements.forEach(element, function(el, index) { %> <li><%= element.name %></li> <% }) %> </ul> 

टेम्प्लेट के लिए एक अलग नामस्थान दर्ज किया गया है, और टेम्प्लेट पहचानकर्ता परियोजना के अंदर अपना रास्ता है।

 // some_file.js var template = templateNs['path/to/template.jst']; var list = [ { name: '' }, { name: '' }, { name: '' } ]; var renderedHtml = template.render({ elements: list }); document.body.innerHTML = renderedHtml; 

क्लाइंट टेम्प्लेट के साथ काम करना उन दोनों के लिए अविश्वसनीय रूप से सुविधाजनक हो गया है जो टाइपसेटिंग में लगे हुए हैं और उन लोगों के लिए जो जावास्क्रिप्ट लिखते हैं।

निर्भरता और परियोजना का निर्माण

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

परियोजना का निर्माण करने वाली सेवा को मध्यस्थ कहा जाता है, यह हमारे डेवलपर्स में से एक द्वारा लिखा गया था। यह सेवा विशेष टैग के उपयोग के आधार पर परियोजना के भीतर निर्भरता एकत्र करती है।

आइए उदाहरण पर वापस जाएं। मुख्य रूप से पृष्ठ के लिए पेज.जेएस फ़ाइल को शामिल करने के लिए, आधार.जेएस और सर्चफॉर्म.जेएस फाइलें, आपको पृष्ठ के अंदर निर्भरताएं दर्ज करने की आवश्यकता है। वे jsDoc में, @require टैग में पंजीकृत हैं। यह पता चला है कि आवश्यक फ़ाइलों को जोड़ने के लिए, यह पृष्ठ में दो टैग जोड़ने के लिए पर्याप्त है। जेएस फ़ाइल, कहीं भी, उदाहरण के लिए, @fileoverview ब्लॉक में:

 /** * @fileoverview Page controller * @author Igor Alexeenko (twitter.com/iamo0) * @require 'base.js' * @require 'searchform.js' */ 

वह सब है। अब डिबग मोड में, दो <स्क्रिप्ट> टैग पेज पर जोड़े जाएंगे, जिसमें आवश्यक फाइलें शामिल होंगी। और उत्पादन मोड में, मीडिया जनरेटर इन तीनों फ़ाइलों को एक में गोंद कर देगा और इसे मिनीफ़ायर के माध्यम से पास करेगा। बेशक, वह जानता है कि जटिल निर्भरता का ट्रैक कैसे रखा जाए और कई बार एक फाइल संलग्न नहीं करेगा।

इसके अलावा, यह मीडिया जनरेटर है जो jst-templates और SCSS को संकलित करता है, चित्रों को कैश करता है और परियोजना को इकट्ठा करने के सभी काले काम करता है। इसलिए, फ्रंट-एंड डेवलपर्स केवल हाथ में काम पर ध्यान केंद्रित कर सकते हैं।

हम क्या करने जा रहे हैं?

एक पुराना प्रोग्रामिंग मजाक है: किसी भी पर्याप्त रूप से जटिल सी या फोरट्रान कार्यक्रम में एक नया लिखित, अनिर्दिष्ट, छोटी गाड़ी है, और सामान्य लिस्प भाषा के आधे हिस्से का धीमा कार्यान्वयन है।

फ्रंट-एंड डेवलपर्स के लिए, इस मजाक को निम्न प्रकार से दोहराया जा सकता है: jQuery, Backbone या Knockout.js ( http://jquery.com/ , http://backbonejs.org/ या http: knockoutjs) में लिखा गया कोई भी जटिल प्रोजेक्ट । com / ) में Google क्लोजर टूल्स ( https://developers.google.com/closure/ ) के आधे से एक नया लिखित, छोटी और धीमी गति से कार्यान्वयन शामिल है।

दरअसल, मैंने यहां जो कुछ भी बात की है: प्रतिरूपकता, ओओपी दृष्टिकोण, मॉड्यूल के एक मूल सेट की उपस्थिति जिसमें से आप विरासत में प्राप्त कर सकते हैं, शैलियों के साथ काम कर रहे हैं, पहले से तैयार किए गए टेम्पलेट - Google बंद पारिस्थितिकी तंत्र में है। Google क्लोजर लाइब्रेरी जावास्क्रिप्ट लाइब्रेरी के अलावा, इस सिस्टम में Google क्लोजर कंपाइलर JS minifier भी शामिल है; सोया टेम्पलेट इंजन दोनों सर्वर और क्लाइंट टेम्पलेट्स में संकलन; और एक शैली भाषा Google क्लोजर कंपाइलर के साथ एकीकृत है और इसलिए सीएसएस कक्षाओं (बीईएम का उपयोग करने वाले किसी भी डेवलपर का नीला सपना) के नाम को भी छोटा करने की अनुमति देता है।

2005 से Google द्वारा अपने स्वयं के प्रोजेक्ट के लिए क्लोजर टूल्स विकसित किए गए हैं। सबसे पहले, लाइब्रेरी को जीमेल मेलर की जरूरतों के लिए लिखा गया था, और फिर अन्य सभी Google परियोजनाओं का उपयोग करके इसे फिर से लिखा गया था। क्लोजर लाइब्रेरी जावास्क्रिप्ट लाइब्रेरी का कोड आधार लगभग 8MB वजन का होता है और इसमें वह सब कुछ होता है जो आपको जटिल परियोजनाओं को विकसित करने के लिए आवश्यक होता है।

इस लाइब्रेरी में एक जटिल संरचना और एक उच्च प्रवेश सीमा है। एक प्रोग्रामर के लिए काफी मुश्किल होगा, जो क्लोजर पर स्विच करने के लिए बाजार पर उपलब्ध समाधान का उपयोग करने के लिए उपयोग किया जाता है, लेकिन इस लाइब्रेरी का उपयोग करने से परियोजना की गुणवत्ता में काफी सुधार हो सकता है।

इस दुनिया में सब कुछ पहले से ही कुछ प्रकार के पुश्किन द्वारा लिखा गया है: अधिकांश कार्य जो मध्यम / बड़ी परियोजनाओं के कई डेवलपर्स का सामना करते हैं, जब उन्हें खरोंच से विकसित करना उनकी इंजीनियरों की अनंत संख्या को लिखने की प्रक्रिया में पहले से ही Google इंजीनियरों द्वारा हल किया गया था।

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

बेशक, Google बंद करने के लिए संक्रमण के साथ, हमें विकास के लिए अपने दृष्टिकोण में कुछ बदलना था, उदाहरण के लिए, हमें इस पद्धति की कुछ कमियों और Google बंद परियोजना के लिए हमारे बुनियादी ढांचे के साथ इसकी कमजोर संगतता के कारण BEM को छोड़ना पड़ा, लेकिन निर्माण पर विचार परियोजना हम वही रहे हैं।