Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

Yaoman और Polymer के साथ वेब ऐप्लिकेशन बनाना

आधुनिक टूल की मदद से अपने वेब ऐप्लिकेशन बनाएं

Addy Osmani

परिचय

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

खुशकिस्मती से, मॉडर्न फ़्रंट-एंड टूलिंग की मदद से, इनमें से ज़्यादातर काम अपने-आप हो सकते हैं. इससे आपको एक बेहतरीन ऐप्लिकेशन बनाने पर फ़ोकस करने का मौका मिलता है. इस लेख में, Yeoman का इस्तेमाल करने का तरीका बताया गया है. यह वेब ऐप्लिकेशन के लिए टूल का एक वर्कफ़्लो है. इससे Polymer का इस्तेमाल करके, ऐप्लिकेशन बनाने की प्रोसेस को आसान बनाया जा सकता है. Polymer, polyfill और शुगर की एक लाइब्रेरी है. इसका इस्तेमाल, वेब कॉम्पोनेंट का इस्तेमाल करके ऐप्लिकेशन बनाने के लिए किया जाता है.

यो, ग्रंट, और बावर से मिलें

योमन एक ऐसा आदमी है जिसने हैट पहनी हुई है. उसके पास आपकी प्रॉडक्टिविटी को बेहतर बनाने के लिए तीन टूल हैं:

yo एक स्कैफ़ोल्डिंग टूल है, जो फ़्रेमवर्क के हिसाब से स्कैफ़ोल्ड का नेटवर्क उपलब्ध कराता है. इन्हें जनरेटर कहा जाता है. इनका इस्तेमाल, पहले बताए गए कुछ मुश्किल टास्क को पूरा करने के लिए किया जा सकता है.
grunt का इस्तेमाल, आपके प्रोजेक्ट को बनाने, उसकी झलक देखने, और उसकी जांच करने के लिए किया जाता है. इसके लिए, Yeoman टीम और grunt-contrib के चुने गए टास्क की मदद ली जाती है.
bower का इस्तेमाल, डिपेंडेंसी मैनेजमेंट के लिए किया जाता है. इससे आपको अपनी स्क्रिप्ट को मैन्युअल तरीके से डाउनलोड और मैनेज करने की ज़रूरत नहीं पड़ती.

सिर्फ़ एक या दो कमांड की मदद से, Yeoman आपके ऐप्लिकेशन (या मॉडल जैसे अलग-अलग हिस्सों) के लिए छोटे-मोटे बदलाव वाले कोड लिख सकता है. साथ ही, आपके Sass को कंपाइल कर सकता है, आपके सीएसएस, JS, एचटीएमएल, और इमेज को छोटा और आपस में जोड़ सकता है. इसके अलावा, आपकी मौजूदा डायरेक्ट्री में एक आसान वेब सर्वर को चालू कर सकता है. यह आपके यूनिट टेस्ट वगैरह भी चला सकता है.

Node Packaged Modules (npm) से जनरेटर इंस्टॉल किए जा सकते हैं. फ़िलहाल, 220 से ज़्यादा जनरेटर उपलब्ध हैं. इनमें से कई जनरेटर, ओपन-सोर्स कम्यूनिटी ने बनाए हैं. लोकप्रिय जनरेटर में generator-angular, generator-backbone, और generator-ember शामिल हैं.

Node.js का नया वर्शन इंस्टॉल करने के बाद, अपने टर्मिनल पर जाएं और यह कमांड चलाएं:

$ npm install -g yo

हो गया! अब आपके पास Yo, Grunt, और Bower हैं. इन्हें सीधे कमांड-लाइन से चलाया जा सकता है. yo को चलाने पर मिलने वाला आउटपुट यहां दिया गया है:

पॉलीमर जनरेटर

जैसा कि मैंने पहले बताया था, Polymer, पॉलीफ़िल और शुगर की एक लाइब्रेरी है. इसकी मदद से, मॉडर्न ब्राउज़र में वेब कॉम्पोनेंट का इस्तेमाल किया जा सकता है. इस प्रोजेक्ट की मदद से, डेवलपर आने वाले समय के प्लैटफ़ॉर्म का इस्तेमाल करके ऐप्लिकेशन बना सकते हैं. साथ ही, W3C को उन जगहों के बारे में बता सकते हैं जहां इन-फ़्लाइट स्पेसिफ़िकेशन को और बेहतर बनाया जा सकता है.

generator-polymer एक नया जनरेटर है. इसकी मदद से, Yeoman का इस्तेमाल करके Polymer ऐप्लिकेशन बनाए जा सकते हैं. इससे कमांड लाइन के ज़रिए, Polymer (कस्टम) एलिमेंट को आसानी से बनाया और पसंद के मुताबिक ढाला जा सकता है. साथ ही, उन्हें एचटीएमएल इंपोर्ट का इस्तेमाल करके इंपोर्ट किया जा सकता है. यह आपके लिए छोटे-मोटे बदलाव वाले कोड लिखकर, आपका समय बचाता है.

इसके बाद, Polymer का जनरेटर इंस्टॉल करने के लिए, यह कमांड चलाएं:

$ npm install generator-polymer -g

हो गया. अब आपके ऐप्लिकेशन में वेब कॉम्पोनेंट की सुपर-पावर हैं!

हाल ही में इंस्टॉल किए गए हमारे जनरेटर में कुछ खास सुविधाएं हैं, जिन्हें ऐक्सेस किया जा सकता है:

polymer:element का इस्तेमाल, नए पॉलीमर एलिमेंट बनाने के लिए किया जाता है. उदाहरण के लिए: yo polymer:element carousel
polymer:app का इस्तेमाल, आपकी शुरुआती index.html फ़ाइल को स्कैफ़ोल्ड करने के लिए किया जाता है. यह एक Gruntfile.js है, जिसमें आपके प्रोजेक्ट के लिए बिल्ड-टाइम कॉन्फ़िगरेशन के साथ-साथ Grunt टास्क और प्रोजेक्ट के लिए सुझाया गया फ़ोल्डर स्ट्रक्चर शामिल होता है. इससे आपको अपने प्रोजेक्ट की स्टाइल के लिए, Sass Bootstrap का इस्तेमाल करने का विकल्प भी मिलेगा.

चलिए, एक Polymer ऐप्लिकेशन बनाते हैं

हम कुछ कस्टम पॉलीमर एलिमेंट और अपने नए जनरेटर का इस्तेमाल करके, एक आसान ब्लॉग बनाएंगे.

शुरू करने के लिए, टर्मिनल पर जाएं, एक नई डायरेक्ट्री बनाएं, और mkdir my-new-project && cd $_ का इस्तेमाल करके उसमें cd करें. अब Polymer ऐप्लिकेशन को शुरू करने के लिए, यह कमांड चलाएं:

$ yo polymer

इससे Bower से Polymer का नया वर्शन मिलता है. साथ ही, आपके वर्कफ़्लो के लिए index.html, डायरेक्ट्री स्ट्रक्चर, और Grunt टास्क को स्कैफ़ोल्ड किया जाता है. जब तक ऐप्लिकेशन तैयार हो रहा है, तब तक क्यों न आप कॉफ़ी पी लें?

इसके बाद, हम grunt server चलाकर यह देख सकते हैं कि ऐप्लिकेशन कैसा दिखता है:

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

इसके बाद, ब्लॉग पोस्ट को दिखाने के लिए एक नया Polymer एलिमेंट बनाएं.

$ yo polymer:element post

Yeoman हमसे कुछ सवाल पूछता है. जैसे, क्या हमें index.html में पोस्ट एलिमेंट को शामिल करने के लिए, कंस्ट्रक्टर को शामिल करना है या एचटीएमएल इंपोर्ट का इस्तेमाल करना है. फ़िलहाल, पहले दो विकल्पों के लिए 'नहीं' चुनें और तीसरे विकल्प को खाली छोड़ दें.

ध्यान दें: अगर हम दूसरे सवाल का जवाब 'हां' में देते हैं, तो जनरेटर post.html को इंपोर्ट करता है और उसे index.html में शामिल करता है. यह <post-element> का भी एलान करता है, ताकि पेज लोड होने पर एलिमेंट रेंडर हो.

$ yo polymer:element post

[?] Would you like to include constructor=''? No

[?] Import to your index.html using HTML imports? No

[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)

    create app/elements/post.html

इससे /elements डायरेक्ट्री में, post.html नाम का एक नया Polymer एलिमेंट बन जाता है:

<polymer-element name="post-element"  attributes="">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

    <span>I'm <b>post-element</b>. This is my Shadow DOM.</span>

    </template>

    <script>

    Polymer('post-element', {

        //applyAuthorStyles: true,

        //resetStyleInheritance: true,

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

इसमें ये चीज़ें शामिल हैं:

आपके कस्टम एलिमेंट के लिए छोटे-मोटे बदलाव वाले कोड, जिनकी मदद से अपने पेज में कस्टम डीओएम एलिमेंट टाइप का इस्तेमाल किया जा सकता है.जैसे, <post-element>
‘नेटिव’ क्लाइंट-साइड टेंप्लेट के लिए टेंप्लेट टैग और आपके एलिमेंट की स्टाइल को एनकैप्सुलेट करने के लिए, सैंपल स्कोप वाली स्टाइल
एलिमेंट रजिस्ट्रेशन बॉयलरप्लेट और लाइफ़साइकल इवेंट.

डेटा के असली सोर्स के साथ काम करना

हमारे ब्लॉग को नई पोस्ट लिखने और पढ़ने के लिए एक जगह की ज़रूरत होगी. असल डेटा सेवा के साथ काम करने का तरीका दिखाने के लिए, हम Google ऐप्लिकेशन स्प्रेडशीट API का इस्तेमाल करेंगे. इससे हम Google Docs का इस्तेमाल करके बनाई गई किसी भी स्प्रेडशीट के कॉन्टेंट को आसानी से पढ़ सकते हैं.

इसे सेट अप करने के लिए:

अपने ब्राउज़र में, यह Google Docs स्प्रेडशीट खोलें. इन चरणों के लिए, Chrome का इस्तेमाल करने का सुझाव दिया जाता है. इसमें इन फ़ील्ड के तहत, पोस्ट का सैंपल डेटा शामिल होता है:
- आईडी
- शीर्षक
- लेखक
- सामग्री
- तारीख
- कीवर्ड
- ईमेल (लेखक का)
- स्लग (आपकी पोस्ट के स्लग यूआरएल के लिए)
फ़ाइल मेन्यू पर जाएं और स्प्रेडशीट की कॉपी बनाने के लिए, कॉपी बनाएं को चुनें. आपके पास कॉन्टेंट में बदलाव करने, पोस्ट जोड़ने या हटाने का विकल्प होता है.
फ़ाइल मेन्यू पर फिर से जाएं और वेब पर पब्लिश करें को चुनें.
पब्लिश करना शुरू करें पर क्लिक करें
पब्लिश किए गए डेटा का लिंक पाएं में जाकर, आखिरी टेक्स्ट बॉक्स से, दिए गए यूआरएल का कुंजी वाला हिस्सा कॉपी करें. यह कुछ ऐसा दिखता है: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
कुंजी को इस यूआरएल में चिपकाएं, जहां your-key-goes-here लिखा है: https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=. ऊपर दी गई कुंजी का इस्तेमाल करने वाला उदाहरण कुछ ऐसा दिख सकता है https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script.
अपने ब्लॉग के कॉन्टेंट का JSON वर्शन देखने के लिए, यूआरएल को अपने ब्राउज़र में चिपकाएं और उस पर जाएं. यूआरएल को नोट करें. इसके बाद, इस डेटा के फ़ॉर्मैट की समीक्षा करें. आपको इस डेटा को स्क्रीन पर दिखाने के लिए, इसे बार-बार इस्तेमाल करना होगा.

आपके ब्राउज़र में JSON आउटपुट थोड़ा मुश्किल लग सकता है, लेकिन चिंता न करें!. हमें सिर्फ़ आपकी पोस्ट के डेटा में दिलचस्पी है.

Google Spreadsheets API, आपके ब्लॉग की स्प्रेडशीट के हर फ़ील्ड को खास प्रीफ़िक्स post.gsx$ के साथ आउटपुट करता है. उदाहरण के लिए: post.gsx$title.$t, post.gsx$author.$t, post.gsx$content.$t वगैरह. जब हम अपने JSON आउटपुट में हर “लाइन” को दोहराते हैं, तो हम हर पोस्ट के लिए काम की वैल्यू वापस पाने के लिए इन फ़ील्ड का रेफ़रंस देंगे.

अब आपके पास नए स्कैफ़ोल्ड किए गए पोस्ट एलिमेंट में बदलाव करने का विकल्प है. इससे मार्कअप के हिस्सों को स्प्रेडशीट में मौजूद डेटा से जोड़ा जा सकता है. इसके लिए, हम post एट्रिब्यूट का इस्तेमाल करेंगे. यह एट्रिब्यूट, पोस्ट के टाइटल, लेखक, कॉन्टेंट, और पहले बनाए गए अन्य फ़ील्ड को पढ़ेगा. selected एट्रिब्यूट का इस्तेमाल, किसी पोस्ट को सिर्फ़ तब दिखाने के लिए किया जाता है, जब कोई उपयोगकर्ता उसके लिए सही स्लग पर जाता है. हम इस एट्रिब्यूट को बाद में पॉप्युलेट करेंगे.

<polymer-element name="post-element" attributes="post selected">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

        <div class="col-lg-4">

            <template if="[[post.gsx$slug.$t === selected]]">

            <h2>
                <a href="#[[post.gsx$slug.$t]]">
                [[post.gsx$title.$t  ]]
                </a>
            </h2>

            <p>By [[post.gsx$author.$t]]</p>

            <p>[[post.gsx$content.$t]]</p>

            <p>Published on: [[post.gsx$date.$t]]</p>

            <small>Keywords: [[post.gsx$keywords.$t]]</small>

            </template>

        </div>

    </template>

    <script>

    Polymer('post-element', {

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

इसके बाद, yo polymer:element blog चलाकर एक ब्लॉग एलिमेंट बनाएं. इसमें पोस्ट का कलेक्शन और आपके ब्लॉग का लेआउट, दोनों शामिल हों.

$ yo polymer:element blog

[?] Would you like to include constructor=''? No

[?] Import to your index.html using HTML imports? Yes

[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html

    create app/elements/blog.html

इस बार हम एचटीएमएल इंपोर्ट का इस्तेमाल करके, ब्लॉग को index.html में इंपोर्ट करते हैं, क्योंकि हम चाहते हैं कि यह पेज पर दिखे. खास तौर पर तीसरे प्रॉम्प्ट के लिए, हम post.html को उस एलिमेंट के तौर पर तय करते हैं जिसे हमें शामिल करना है.

पहले की तरह, एक नई एलिमेंट फ़ाइल (blog.html) बनाई जाती है और /elements में जोड़ी जाती है. इस बार post.html को इंपोर्ट किया जाता है और टेंप्लेट टैग में <post-element> को शामिल किया जाता है:

<link rel="import" href="post.html">

<polymer-element name="blog-element"  attributes="">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

    <span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>

        <post-element></post-element>

    </template>

    <script>

    Polymer('blog-element', {

        //applyAuthorStyles: true,

        //resetStyleInheritance: true,

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

हमने ब्लॉग एलिमेंट को एचटीएमएल इंपोर्ट (एचटीएमएल दस्तावेज़ों को अन्य एचटीएमएल दस्तावेज़ों में शामिल करने और फिर से इस्तेमाल करने का तरीका) का इस्तेमाल करके, अपने इंडेक्स में इंपोर्ट करने के लिए कहा था. इसलिए, हम यह भी पुष्टि कर सकते हैं कि इसे दस्तावेज़ <head> में सही तरीके से जोड़ा गया है:

<!doctype html>
    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="styles/main.css">

        <!-- build:js scripts/vendor/modernizr.js -->

        <script src="bower_components/modernizr/modernizr.js"></script>

        <!-- endbuild -->

        <!-- Place your HTML imports here -->

        <link rel="import" href="elements/blog.html">

    </head>

    <body>

        <div class="container">

            <div class="hero-unit" style="width:90%">

                <blog-element></blog-element>

            </div>

        </div>

        <script>
        document.addEventListener('WebComponentsReady', function() {
            // Perform some behaviour
        });
        </script>

        <!-- build:js scripts/vendor.js -->

        <script src="bower_components/polymer/polymer.min.js"></script>

        <!-- endbuild -->

</body>

</html>

शानदार.

Bower का इस्तेमाल करके डिपेंडेंसी जोड़ना

इसके बाद, posts.json को पढ़ने के लिए, Polymer JSONP यूटिलिटी एलिमेंट का इस्तेमाल करके, अपने एलिमेंट में बदलाव करें. अडैप्टर पाने के लिए, रिपॉज़िटरी को git क्लोन करें या bower install polymer-elements चलाकर Bower की मदद से polymer-elements इंस्टॉल करें.

यूटिलिटी मिलने के बाद, आपको इसे अपने blog.html एचटीएमएल एलिमेंट में इंपोर्ट के तौर पर शामिल करना होगा. इसके लिए, यह कोड इस्तेमाल करें:

<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">

इसके बाद, इसके लिए टैग शामिल करें और पहले की ब्लॉग पोस्ट की स्प्रेडशीट में url डालें. साथ ही, आखिर में &callback= जोड़ें:

<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>

इसकी मदद से, अब हम स्प्रेडशीट को पढ़ने के बाद, उसमें बार-बार बदलाव करने के लिए टेंप्लेट जोड़ सकते हैं. पहले आउटपुट में विषय सूची होती है. इसमें पोस्ट का लिंक किया गया टाइटल होता है, जो उसके स्लग पर ले जाता है.

<!-- Table of contents -->

<ul>

    <template repeat="[[post in posts.feed.entry]]">

    <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>

    </template>

</ul>

दूसरा, हर एंट्री के लिए post-element का एक इंस्टेंस रेंडर करता है. साथ ही, पोस्ट के कॉन्टेंट को उसके हिसाब से पास करता है. ध्यान दें कि हम एक post एट्रिब्यूट पास कर रहे हैं, जो स्प्रेडशीट की एक लाइन के लिए पोस्ट के कॉन्टेंट को दिखाता है. साथ ही, हम एक selected एट्रिब्यूट पास कर रहे हैं, जिसे हम रूट से पॉप्युलेट करेंगे.

<!-- Post content -->

<template repeat="[[post in posts.feed.entry]]">

    <post-element post="[[post]]" selected="[[route]]"></post-element>

</template>

हमारे टेंप्लेट में इस्तेमाल किया गया repeat एट्रिब्यूट, हमारी पोस्ट के कलेक्शन के हर एलिमेंट के लिए [[ bindings ]] के साथ एक इंस्टेंस बनाता है और उसे बनाए रखता है. ऐसा तब होता है, जब यह एट्रिब्यूट दिया गया हो.

अब मौजूदा [[route]] को पॉप्युलेट करने के लिए, हम Flatiron director नाम की लाइब्रेरी का इस्तेमाल करेंगे. यह लाइब्रेरी, यूआरएल हैश में बदलाव होने पर [[route]] से जुड़ जाती है.

अच्छी बात यह है कि इसके लिए, Polymer एलिमेंट (more-elements पैकेज का हिस्सा) का इस्तेमाल किया जा सकता है. /elements डायरेक्ट्री में कॉपी करने के बाद, हम इसे <flatiron-director route="[[route]]" autoHash></flatiron-director> के साथ रेफ़रंस के तौर पर इस्तेमाल कर सकते हैं. साथ ही, route को उस प्रॉपर्टी के तौर पर तय कर सकते हैं जिससे हमें बाइंड करना है. इसके अलावा, इसे हैश में होने वाले किसी भी बदलाव (autoHash) की वैल्यू को अपने-आप पढ़ने के लिए कह सकते हैं.

सभी चीज़ों को एक साथ रखने पर, हमें यह मिलता है:

    <link rel="import" href="post.html">

    <link rel="import" href="polymer-jsonp/polymer-jsonp.html">

    <link rel="import" href="flatiron-director/flatiron-director.html">

    <polymer-element name="blog-element"  attributes="">

      <template>

        <style>
          @host { :scope {display: block;} }
        </style>

        <div class="row">

          <h1><a href="/#">My Polymer Blog</a></h1>

          <flatiron-director route="[[route]]" autoHash></flatiron-director>

          <h2>Posts</h2>

          <!-- Table of contents -->

          <ul>

            <template repeat="[[post in posts.feed.entry]]">

              <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>

            </template>

          </ul>

          <!-- Post content -->

          <template repeat="[[post in posts.feed.entry]]">

            <post-element post="[[post]]" selected="[[route]]"></post-element>

          </template>

        </div>

        <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>

      </template>

      <script>

        Polymer('blog-element', {

          created: function() {},

          enteredView: function() { },

          leftView: function() { },

          attributeChanged: function(attrName, oldVal, newVal) { }

        });

      </script>

    </polymer-element>

वाह! अब हमारे पास एक आसान ब्लॉग है, जो JSON से डेटा पढ़ रहा है. साथ ही, Yeoman की मदद से बनाए गए दो Polymer एलिमेंट का इस्तेमाल कर रहा है.

तीसरे पक्ष के एलिमेंट के साथ काम करना

वेब कॉम्पोनेंट के आस-पास एलिमेंट का नेटवर्क हाल ही में बढ़ा है. इसमें customelements.io जैसी कॉम्पोनेंट गैलरी साइटें दिखने लगी हैं. कम्यूनिटी के बनाए गए एलिमेंट को देखते हुए, मुझे Gravatar प्रोफ़ाइलें फ़ेच करने वाला एक एलिमेंट मिला. हम इसे अपनी ब्लॉग साइट पर भी जोड़ सकते हैं.

Gravatar एलिमेंट के सोर्स को अपनी /elements डायरेक्ट्री में कॉपी करें. इसके बाद, post.html में एचटीएमएल इंपोर्ट की मदद से इसे शामिल करें. फिर, को अपने टेंप्लेट में जोड़ें. इसके लिए, हमारी स्प्रेडशीट के ईमेल फ़ील्ड को उपयोगकर्ता नाम के सोर्स के तौर पर पास करें. बूम!

<link rel="import" href="gravatar-element/src/gravatar.html">

<polymer-element name="post-element" attributes="post selected">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

        <div class="col-lg-4">

            <template if="[[post.gsx$slug.$t === selected]]">

            <h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>

            <p>By [[post.gsx$author.$t]]</p>

            <gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>

            <p>[[post.gsx$content.$t]]</p>

            <p>[[post.gsx$date.$t]]</p>

            <small>Keywords: [[post.gsx$keywords.$t]]</small>

            </template>

        </div>

    </template>

    <script>

    Polymer('post-element', {

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

आइए, देखते हैं कि इससे हमें क्या मिलता है:

शानदार!

हमने बहुत कम समय में, कई वेब कॉम्पोनेंट से बना एक आसान ऐप्लिकेशन बनाया है. इसके लिए, हमें छोटे-मोटे बदलाव वाले कोड लिखने, डिपेंडेंसी को मैन्युअल तरीके से डाउनलोड करने या लोकल सर्वर या बिल्ड वर्कफ़्लो को सेट अप करने की ज़रूरत नहीं पड़ी.

आपके ऐप्लिकेशन को ऑप्टिमाइज़ किया जा रहा है

Yeoman वर्कफ़्लो में एक और ओपन-सोर्स प्रोजेक्ट शामिल है, जिसे Grunt कहा जाता है. यह एक टास्क रनर है, जो आपके ऐप्लिकेशन का ऑप्टिमाइज़ किया गया वर्शन बनाने के लिए, बिल्ड से जुड़े कई टास्क (Gruntfile में तय किए गए) चला सकता है. grunt को अपने-आप चलाने पर, default टास्क एक्ज़ीक्यूट होगा. इसे जनरेटर ने लिंटिंग, टेस्टिंग, और बिल्डिंग के लिए सेट अप किया है:

grunt.registerTask('default', [

    'jshint',

    'test',

    'build'

]);

ऊपर दिया गया jshint टास्क, आपकी .jshintrc फ़ाइल की जांच करेगा, ताकि आपकी प्राथमिकताओं के बारे में पता चल सके. इसके बाद, यह आपके प्रोजेक्ट की सभी JavaScript फ़ाइलों पर लागू होगा. JSHint के साथ उपलब्ध विकल्पों की पूरी जानकारी पाने के लिए, दस्तावेज़ देखें.

test टास्क कुछ इस तरह दिखता है. यह हमारे सुझाए गए टेस्ट फ़्रेमवर्क, Mocha के लिए आपका ऐप्लिकेशन बना सकता है और उसे उपलब्ध करा सकता है. यह आपके लिए टेस्ट भी चलाएगा:

grunt.registerTask('test', [

    'clean:server',

    'createDefaultTemplate',

    'jst',

    'compass',

    'connect:test',

    'mocha'

]);

इस मामले में हमारा ऐप्लिकेशन काफ़ी आसान है. इसलिए, हम टेस्ट लिखने का काम आप पर छोड़ देंगे. हमें कुछ और चीज़ों को भी अपनी बिल्ड प्रोसेस में शामिल करना होगा. इसलिए, आइए देखते हैं कि हमारे Gruntfile.js में तय किया गया grunt build टास्क क्या करेगा:

grunt.registerTask('build', [

    'clean:dist',    // Clears out your .tmp/ and dist/ folders

    'compass:dist',  // Compiles your Sassiness

    'useminPrepare', // Looks for <!-- special blocks --> in your HTML

    'imagemin',      // Optimizes your images!

    'htmlmin',       // Minifies your HTML files

    'concat',        // Task used to concatenate your JS and CSS

    'cssmin',        // Minifies your CSS files

    'uglify',        // Task used to minify your JS

    'copy',          // Copies files from .tmp/ and app/ into dist/

    'usemin'         // Updates the references in your HTML with the new files

]);

grunt build चलाएं. इसके बाद, आपके ऐप्लिकेशन का प्रोडक्शन के लिए तैयार वर्शन बन जाएगा. यह वर्शन, शिप करने के लिए तैयार होगा. इसे आज़माकर देखें.

हो गया!

अगर आपको कोई समस्या आती है, तो https://github.com/addyosmani/polymer-blog पर जाकर, polymer-blog का पहले से बना वर्शन देखें.

हमारे पास और क्या है?

वेब कॉम्पोनेंट अब भी डेवलप हो रहे हैं. इसलिए, इनसे जुड़े टूल भी डेवलप हो रहे हैं.

फ़िलहाल, हम यह देख रहे हैं कि एचटीएमएल इंपोर्ट को जोड़ने के लिए, Vulcanize (Polymer प्रोजेक्ट का एक टूल) जैसे प्रोजेक्ट का इस्तेमाल करके, लोड होने की परफ़ॉर्मेंस को कैसे बेहतर बनाया जा सकता है. साथ ही, हम यह भी देख रहे हैं कि कॉम्पोनेंट का नेटवर्क, Bower जैसे पैकेज मैनेजर के साथ कैसे काम कर सकता है.

जब हमारे पास इन सवालों के बेहतर जवाब होंगे, तब हम आपको बताएंगे. हालांकि, आने वाले समय में आपको कई दिलचस्प चीज़ें देखने को मिलेंगी.

Bower की मदद से, Polymer को स्टैंडअलोन के तौर पर इंस्टॉल करना

अगर आपको Polymer का इस्तेमाल करने के लिए, ज़्यादा सुविधाओं की ज़रूरत नहीं है, तो इसे Bower से सीधे इंस्टॉल किया जा सकता है. इसके लिए, यह कमांड चलाएं:

bower install polymer

इससे यह आपकी bower_components डायरेक्ट्री में जुड़ जाएगा. इसके बाद, इसे अपने ऐप्लिकेशन इंडेक्स में मैन्युअल तरीके से रेफ़र किया जा सकता है और आने वाले समय में इसका फ़ायदा उठाया जा सकता है.

आपकी क्या राय है?

अब आपको Yeoman के साथ वेब कॉम्पोनेंट का इस्तेमाल करके, Polymer ऐप्लिकेशन को स्कैफ़ोल्ड करने का तरीका पता चल गया है. अगर आपको जनरेटर के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो कृपया हमें टिप्पणियों में बताएं. इसके अलावा, गड़बड़ी की शिकायत करें या Yeoman के Issue Tracker पर पोस्ट करें. हमें यह जानकर खुशी होगी कि क्या आपको जनरेटर में कोई और सुधार चाहिए. आपके इस्तेमाल और सुझावों से ही हम इसे बेहतर बना सकते हैं :)