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

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

मैं यह भी नोट करना चाहूंगा कि त्वरित मोबाइल पृष्ठों के नाम के बावजूद, एएमपी का उपयोग किसी भी साइट, डेस्कटॉप और मोबाइल दोनों को बनाने के लिए किया जा सकता है। प्रोजेक्ट वेबसाइट - ampproject.org , डेस्कटॉप के लिए AMP क्या कर सकती है, इसका एक बेहतरीन उदाहरण है।

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

आप ऊपर GIF में समाप्त लैंडिंग पृष्ठ देख सकते हैं।

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

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

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

एएमपी

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

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

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

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

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

एएमपी की सीमाएं क्या हैं? सबसे महत्वपूर्ण सीमा यह है कि पृष्ठों में जावास्क्रिप्ट कोड मनमाना नहीं हो सकता है। डेटा बाइंडिंग के लिए आप सीमित जावास्क्रिप्ट का उपयोग कर सकते हैं। इसके अलावा, आप बाहरी जावास्क्रिप्ट और सीएसएस फ़ाइलों को कनेक्ट नहीं कर सकते। इसके अपवाद हैं: यह एएमपी पुस्तकालय है, साथ ही अनुमोदित घटकों की एक सूची है (आप एएमपी के विकास में भाग ले सकते हैं और अपने स्वयं के घटक बना सकते हैं)। सभी सीएसएस पृष्ठ पर ही होना चाहिए, और इसकी मात्रा 50 किलोबाइट तक सीमित है। इसके अलावा, आप HTML टैग्स के भाग का उपयोग नहीं कर सकते हैं, जैसे <img /> इसके बजाय, वे AMP पैकेज में शामिल वेब घटकों का उपयोग करते हैं। उदाहरण के लिए, <img /> के बजाय <amp-img /> घटक का उपयोग किया जाता है। यह आवश्यक है ताकि एएमपी संसाधन लोडिंग को नियंत्रित कर सके। प्रदर्शन की वजह से मामूली सीएसएस प्रतिबंध भी हैं (आप महत्वपूर्ण संशोधक और गैर-जीपीयू-त्वरित एनिमेशन का उपयोग नहीं कर सकते हैं)। वास्तव में यह सब है। एएमपी घटकों का एक समृद्ध सेट प्रदान करता है, जो आंशिक रूप से मनमाना जावास्क्रिप्ट कोड लिखने में असमर्थता को समाप्त करता है। घटकों के सेट में शामिल हैं, उदाहरण के लिए, amp-date-picker , amp-sidebar , amp-user-notification , amp-facebook-like , amp-access , जिसके साथ आप प्रमाणीकरण समर्थन को लागू कर सकते हैं, और कई, कई अन्य। और बहुत चरम मामलों में, जब कोई अन्य रास्ता नहीं होता है, तो आप गैर-एएमपी सामग्री के साथ आईफ्रेम का उपयोग कर सकते हैं।

एएमपी के साथ काम शुरू करने से पहले, मैं सुझाव देता हूं कि आप परियोजना की वेबसाइट - ampproject.org पर प्रलेखन का अध्ययन करें। इसके अलावा, ampbyexample.com को देखना उपयोगी है, जिसमें उत्कृष्ट उदाहरण हैं, जिनमें से अधिकांश वास्तविक परियोजनाओं में बदलाव के बिना व्यावहारिक रूप से उपयोग किए जा सकते हैं। यदि आपको तैयार किए गए टेम्प्लेट की आवश्यकता है, तो वे ampstart.com पर उपलब्ध हैं।

एएमपी लैंडिंग बनाना

चलो उत्पादों की एक सूची, फ़िल्टरिंग और खोज के साथ एक ऑनलाइन साइकिल स्टोर के लिए एक लैंडिंग पृष्ठ बनाएं। हमारे उत्पाद गतिशील रूप से लोड होंगे। प्रशिक्षण उद्देश्यों के लिए, हम तैयार किए गए टेम्पलेट्स का उपयोग नहीं करेंगे, लेकिन हम सब कुछ खरोंच से करेंगे। प्रोजेक्ट कोड GitHub: https://github.com/spugachev/amp-article पर पाया जा सकता है

रिपॉजिटरी में Node.js पर एक बैकएंड है, साथ ही सार्वजनिक फ़ोल्डर में स्थित एएमपी पृष्ठ भी हैं। प्रोजेक्ट शुरू करने के लिए, आपको रिपॉजिटरी को क्लोन करना होगा और प्रोजेक्ट फोल्डर में निम्नलिखित कमांड को निष्पादित करना होगा (Node.js इंस्टॉल होना चाहिए)।

>> npm install >> npm start

पेज टेम्पलेट

एक न्यूनतम AMP पेज बनाएँ। इसका कोड नीचे प्रस्तुत किया गया है। GitHub से डाउनलोड किए गए प्रोजेक्ट में, मुख्य पृष्ठ public / index.html जानबूझकर खाली छोड़ दिया गया है, और हम इसका उपयोग कोड लिखने के लिए करेंगे।

 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title> </title> <link rel="canonical" href="http://amp-bike-shop.com/index.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom> /*     */ </style> </head> <body> <h2>   AMP  !</h2> </body> </html>

उपरोक्त उदाहरण में आपकी आंख को पकड़ने वाली पहली चीज - HTML मार्कअप में एक स्पष्ट संकेत होता है कि यह एक एएमपी पृष्ठ है। यह या तो html टैग में एक लाइटनिंग सिंबल जोड़कर प्राप्त किया जाता है (दुर्भाग्य से Habr सिंबल एक लाइटनिंग सिंबल को काटता है), या वहां भी "amp" शब्द जोड़कर। इस तरह के संकेत के बिना, पृष्ठ को मान्य नहीं किया जाएगा और अनुक्रमण के दौरान Google कैश में नहीं जोड़ा जाएगा।

अगला, आपको एएमपी जावास्क्रिप्ट पुस्तकालय कनेक्ट करने की आवश्यकता है:

 <script async src="https://cdn.ampproject.org/v0.js"></script>

आपको पृष्ठ का कैनोनिकल पता भी बताना होगा। यदि पृष्ठ का गैर-एएमपी संस्करण है, तो इसका पता इंगित किया गया है। अन्यथा, एएमपी पृष्ठ का पता स्वयं इंगित किया गया है।

 <link rel="canonical" href="http://amp-bike-shop.com/index.html">

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

पृष्ठ के शीर्ष पर amp- छवि घटक का उपयोग करके छवि रखें। लेआउट = "उत्तरदायी" सेट करके, छवि को कंटेनर की पूरी चौड़ाई तक बढ़ाया जाएगा।

 <amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img>

इसके बाद, मैं CSS शैलियाँ नहीं दूंगा, और उन्हें GitHub पर प्रोजेक्ट रिपॉजिटरी में पाया जा सकता है। इसलिए ...

प्रोजेक्ट चलाएँ और ब्राउज़र में मुख्य पृष्ठ खोलें। यदि पैरामीटर # विकास = 1 पृष्ठ पते में जोड़ा जाता है, तो पृष्ठ स्वचालित रूप से मान्य हो जाएगा, और इसके बारे में जानकारी ब्राउज़र कंसोल पर प्रदर्शित की जाएगी। उसी उद्देश्य के लिए, आप AMP Validator नामक Chrome एक्सटेंशन का उपयोग कर सकते हैं।

उदाहरण के लिए, यदि इसके बजाय <amp-img /> एक नियमित <img /> टैग का उपयोग किया गया था, तो ऐसा पृष्ठ सत्यापन पारित नहीं करेगा, जो एक संबंधित संदेश द्वारा इंगित किया जाएगा।

डेटा लोड करना और प्रदर्शित करना

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

 GET /api/bikes [ { "id":1, "img":"img/01.jpg", "title":" ", "price":"28500", "available":false }, { "id":2, "img":"img/02.jpg", "title":" ", "price":"14750", "available":true }, { "id":3, "img":"img/03.jpg", "title":" ", "price":"31200", "available":true }, … ]

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

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

 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

पृष्ठ में सूची घटक जोड़ें:

 <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" items="."> <div placeholder>...</div> <div fallback>  .</div> <template type="amp-mustache"> <div class="card" style="height: 340px;"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}}<p> </p>{{/available}} {{^available}}<p>  </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list>

Src संपत्ति घटक के लिए सेट की गई है, जो यह निर्धारित करती है कि डेटा कहां से लिया जाएगा (हमारे मामले में, "// लोकलहोस्ट: 3000 / एपीआई / बाइक") पर GET अनुरोध निष्पादित किया जाएगा, साथ ही आइटम गुण, जो आपको JSON प्रतिक्रिया के अंदर सूची के लिए तत्वों की एक सरणी की खोज करने की अनुमति देता है। सर्वर से। चूंकि उत्तर अपने आप में एक सरणी है, इसलिए आइटम की संपत्ति का मूल्य उत्तर की जड़ को इंगित करता है।

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

उपरोक्त कोड जोड़ें, पृष्ठ को ताज़ा करें और पृष्ठ पर प्रदर्शित उत्पादों की सूची देखें। सरल मार्कअप और जावास्क्रिप्ट कोड लिखे बिना, हमने डेटा लोड किया और पृष्ठ पर डेटा (एक सूची और एक टेम्पलेट का उपयोग करके) प्रदर्शित किया।

डेटा फ़िल्टरिंग

प्रत्येक एएमपी पृष्ठ में एक राज्य होता है। इसे गुणों के पदानुक्रम के साथ एक वस्तु के रूप में माना जा सकता है। पृष्ठ स्थिति को AMP.setState फ़ंक्शन का उपयोग करके इवेंट हैंडलर में बदला जा सकता है।

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

 <label> <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })"/>    </label>

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

 <label [class]="onlyAvailable? 'active' : ''" >

विकास मोड (# विकास = 1) में, पृष्ठ की स्थिति को एएमपी.प्रिंटस्टेट () फ़ंक्शन का उपयोग करके ब्राउज़र कंसोल पर प्रदर्शित किया जा सकता है;

अब पेज स्टेट में उत्पादों की सूची जोड़ें। ऐसा करने के लिए, हम एक अलग amp- राज्य घटक का उपयोग करते हैं। घटक एम्पी-सूची के समान स्रोत से डेटा डाउनलोड करेगा, लेकिन यह पुनः लोड नहीं होगा, क्योंकि एएमपी डेटा के लोड को नियंत्रित करता है और अनावश्यक अनुरोधों से बचा जाता है। इसके अलावा, हम एक मैक्रो जोड़ते हैं, जो केवल चर के मान को बदलकर उपलब्ध होता है, उत्पादों की सूची को फ़िल्टर करेगा।

 <amp-state id="bikes" src="//localhost:3000/api/bikes"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro>

अब हम फ़िल्टर सूची को amp-सूची घटक के डेटा स्रोत के रूप में उपयोग करेंगे। ऐसा करने के लिए, हम फ़िल्टर किए गए बाइक मैक्रो के साथ घटक की src संपत्ति को जोड़ते हैं। और तत्वों की संख्या के साथ घटक की ऊंचाई की संपत्ति को भी कनेक्ट करें। यह आवश्यक है, क्योंकि amp-सूची घटक की ऊंचाई स्वचालित रूप से तत्वों की संख्या से समायोजित नहीं की जाएगी। इस उदाहरण में, संख्या 340 उत्पाद कार्ड की ऊंचाई है, और 16 ऊपर और नीचे इंडेंटेशन है।

 <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items=".">

कृपया ध्यान दें कि src = "// localhost: 3000 / api / bikes" संपत्ति सेट करके स्पष्ट डेटा लोड हो रहा है। आप इसे हटा नहीं सकते प्रदर्शन कारणों से AMP पृष्ठ लोड करते समय, डेटा बाइंडिंग स्वचालित रूप से निष्पादित नहीं होती है। उपयोगकर्ता क्रियाओं के बाद ही इसे निष्पादित किया जाएगा, जैसे कि चेकबॉक्स पर क्लिक करना।

परिणामी पृष्ठ खोलें और सत्यापित करें कि फ़िल्टरिंग ठीक से काम करती है।

खोज

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

 <input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" />

हमारी परियोजना में बैकएंड खोज का समर्थन करता है। उत्पादों को खोजने के लिए, आपको पहले से ज्ञात GET अनुरोध में "q" पैरामीटर जोड़ना होगा। हम सर्वर साइड के कार्यान्वयन पर ध्यान नहीं देंगे, लेकिन पेज की स्थिति बदलने पर सर्वर पर एक नया अनुरोध करने का तरीका देखें।

हम amp-राज्य घटक के src पैरामीटर के लिए डेटा बाइंडिंग करते हैं, जिसका उपयोग हम पहले से ही फ़िल्टरिंग के लिए प्रारंभिक डेटा प्राप्त करने के लिए करते थे। जब आप क्वेरी चर पृष्ठ स्थिति बदलते हैं, तो एक नई खोज क्वेरी निष्पादित की जाएगी।

 <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]="query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state>

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

 <body> <amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img> <div class="content"> <h2>   AMP  !</h2> <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]= "query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro> <input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" /> <label [class]="onlyAvailable? 'active' : ''" > <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })" />    </label> <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items="."> <div placeholder>...</div> <div fallback>  .</div> <template type="amp-mustache"> <div class="card"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}} <p> </p>{{/available}} {{^available}} <p>  </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list> </div> </body>

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

एएमपी टूलबॉक्स

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

आगे के कदम

एनालिटिक्स

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

डेटा एकत्र करने के लिए एएमपी दो मुख्य घटकों का समर्थन करता है: एक साधारण पिक्सेल और अधिक जटिल एनालिटिक्स समाधान के लिए amp- पिक्सेल की स्थापना के लिए amp- पिक्सेल। एम्पी-प्रयोग घटक आपको एएमपी पृष्ठों पर ए / बी परीक्षण करने की अनुमति भी देता है।

Amp-analytics का उपयोग करके , आप Google Analytics, Yandex Metrics और अन्य प्रदाताओं (उदाहरण के लिए, Baidu Analytics) से कनेक्ट कर सकते हैं।

एक पृष्ठ पर विश्लेषिकी जोड़ना बहुत सरल है। सबसे पहले आपको amp- एनालिटिक्स घटक के साथ उपयुक्त लाइब्रेरी कनेक्ट करने की आवश्यकता है।

 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

और फिर घटक को पृष्ठ पर रखें और सेटिंग्स को कॉन्फ़िगर करें। Google Analytics के लिए, यह इस तरह दिखेगा।

 <amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>

यांडेक्स मेट्रिक्स के लिए, कोड बहुत समान है।

 <amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" } } </script> </amp-analytics>

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

एम्पी-एनालिटिक्स घटक का उपयोग करते समय , एएमपी और गैर-एएमपी पृष्ठों पर उपयोगकर्ताओं को ट्रैक करने में समस्या होती है। मैं चाहता हूं कि यूजर आईडी हर जगह समान हो। एक उपयोगकर्ता के लिए जो Google के कैश से आपका पृष्ठ डाउनलोड करता है और फिर आपकी साइट पर सीधे लिंक पर क्लिक करता है, विश्लेषिकी के दृष्टिकोण से, उसी उपयोगकर्ता को माना जाता है। ऐसा करने के लिए, क्लाइंट आईडी API का उपयोग करें। Google Analytics मदद में आपको कौन सी सेटिंग करने की आवश्यकता है, इसके बारे में और जानें।

सेवा कार्यकर्ता और PWA (प्रगतिशील वेब ऐप)

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

सेवा कार्यकर्ता को स्थापित करने के लिए, amp- स्थापित- सर्विसवर्क घटक का उपयोग करें। यह अन्य सभी एएमपी घटकों की तरह ही जुड़ता है।

 <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

इसके उपयोग का एक उदाहरण नीचे प्रस्तुत किया गया है।

 <amp-install-serviceworker src="/sw.js" data-iframe-src="https://mydomain.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>

यदि कोई उपयोगकर्ता आपकी साइट पर सीधे जाता है, तो घटक src पैरामीटर द्वारा निर्दिष्ट सेवा कार्यकर्ता को स्थापित करेगा। लेकिन कैश से एएमपी पृष्ठ को लोड करने के मामले में, वह ऐसा करने में सक्षम नहीं होगा, क्योंकि अन्य डोमेन के लिए सेवा कार्यकर्ता स्थापित करना निषिद्ध है। इसलिए, आपको उस साइट पर एक पृष्ठ बनाने की आवश्यकता है जिस पर सेवा कार्यकर्ता स्थापना कोड स्थित होगा। कैश से लोड करने पर, amp-install-serviceworker एक iframe में पेज खोलेगा, और सर्विस वर्कर इंस्टॉल हो जाएगा।

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

निष्कर्ष

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

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

इसके अलावा, ईमेल के लिए एएमपी का एक संस्करण (ईमेल के लिए एएमपीएचटीएमएल) विकसित किया जा रहा है, जो आपको बीएमपी का उपयोग करके सुंदर इंटरैक्टिव ईमेल बनाने की अनुमति देगा।

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

एएमपी का उपयोग करके, आप संपूर्ण साइट के साथ-साथ व्यक्तिगत पेज, बैनर, कहानियां बना सकते हैं और एएमपी का उपयोग सामग्री डालने के लिए एक त्वरित और कॉम्पैक्ट प्रारूप के रूप में कर सकते हैं।

सर्गेई पुगाचेव, Google डेवलपर विशेषज्ञ
पुनश्च। लेख एएमपी पर एक व्यक्तिगत नज़र है और Google या लेखक के नियोक्ता के साथ मेल नहीं खा सकता है;)

हम तेजी से गतिशील साइट बनाने के लिए एक सामान्य-उद्देश्य पुस्तकालय के रूप में एएमपी का उपयोग करते हैं