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

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

Addy Osmani
Addy Osmani
X GitHub

शुरुआती जानकारी

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

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

Yeoman

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

योमन एक हैट पहने हुए दिख रहे हैं. उनके पास अपनी उत्पादकता को बढ़ाने के लिए तीन टूल हैं:

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

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

नोड पैकेज्ड मॉड्यूल (एनपीएम) से जनरेटर इंस्टॉल किए जा सकते हैं. फ़िलहाल, 220 से ज़्यादा जनरेटर उपलब्ध हैं. इनमें से कई जनरेटर, ओपन सोर्स समुदाय ने लिखे हैं. लोकप्रिय जनरेटर में जनरेटर-एंगुलर, जनरेटर-बैकबोन, और जनरेटर-एंबर शामिल हैं.

यियोमन का होम पेज

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

$ npm install -g yo

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

योमन इंस्टॉलेशन

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

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

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

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

इसके बाद, पॉलीमर का जनरेटर इंस्टॉल करें:

$ npm install generator-polymer -g

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

हमारे नए इंस्टॉल किए गए जनरेटर में कुछ खास बिट हैं, जिनका ऐक्सेस आपके पास होगा:

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

आइए, Polymer ऐप्लिकेशन बनाएं

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

Polymer ऐप्लिकेशन

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

$ yo polymer
Polymer ऐप्लिकेशन बनाना

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

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

ग्रंट सर्वर

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

अब ब्लॉग पोस्ट को दिखाने के लिए, नया पॉलीमर एलिमेंट बनाते हैं.

$ yo polymer:element post
पोस्ट एलिमेंट बनाएं

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

$ 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-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>

इसमें ये शामिल हैं:

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

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

चलिए, इसे सेट अप करते हैं:

  1. अपने ब्राउज़र में (इन चरणों के लिए, Chrome का सुझाव दिया जाता है) यह Google Docs स्प्रेडशीट खोलें. इसमें, नीचे दिए गए फ़ील्ड के नीचे पोस्ट का डेटा मौजूद होता है:

    • आईडी
    • टाइटल
    • Author
    • कॉन्टेंट
    • तारीख
    • कीवर्ड
    • ई-मेल (लेखक का)
    • स्लग (आपकी पोस्ट के स्लग यूआरएल के लिए)

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

  3. फ़ाइल मेन्यू पर एक बार फिर से जाएं और वेब पर पब्लिश करें को चुनें.

  4. पब्लिश करना शुरू करें पर क्लिक करें

  5. पब्लिश किए गए डेटा का लिंक पाएं में जाकर, आखिरी टेक्स्ट बॉक्स में जाकर, दिए गए यूआरएल का कुंजी वाला हिस्सा कॉपी करें. यह इस तरह दिखता है: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0

  6. कुंजी को यहां दिए गए यूआरएल में चिपकाएं, जहां 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

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

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

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

अब आपके पास पोस्ट के नए एलिमेंट में बदलाव करने का विकल्प है. इससे स्प्रेडशीट के डेटा में मार्कअप के कुछ हिस्से bind किए जा सकते हैं. ऐसा करने के लिए, हमने 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 का इस्तेमाल करके डिपेंडेंसी जोड़ना

इसके बाद, आइए अपने एलिमेंट में बदलाव करके, post.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 एट्रिब्यूट का इस्तेमाल किया जा रहा है वह हमारे पोस्ट के कलेक्शन में मौजूद हर एलिमेंट के लिए, [[ kinds ]] के साथ इंस्टेंस बनाता है और उसे बनाए रखता है. ऐसा तब होता है, जब पोस्ट दिया जाता है.

Polymer ऐप्लिकेशन

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

अच्छी बात यह है कि हमारे पास पॉलीमर एलिमेंट मौजूद है, जो ज़्यादा एलिमेंट वाले पैकेज का हिस्सा है. इसे हासिल करने में हमें मदद मिल सकती है. एलिमेंट को /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>
Polymer ऐप्लिकेशन

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

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

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

कस्टम एलिमेंट का होम पेज

गुरुत्वाकर्षण एलिमेंट सोर्स को अपनी /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>

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

पसंद के मुताबिक एलिमेंट वाला Polymer ऐप्लिकेशन

सुंदर!

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

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

Yaoman वर्कफ़्लो में 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 देखा जा सकता है.

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

वेब कॉम्पोनेंट अब भी विकास की स्थिति में हैं और इनके आस-पास टूल तैयार किए जा रहे हैं.

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

जब भी हमारे पास इन सवालों के बेहतर जवाब होंगे, तो हम आपको इसकी जानकारी देंगे. हालांकि, आगे भी बहुत कुछ करना बाकी है.

बोवर की मदद से पॉलीमर स्टैंडअलोन इंस्टॉल करना

अगर आपको पॉलीमर का एक लाइट स्टार्ट चाहिए, तो इसे सीधे Bower पर इंस्टॉल करें. इसके लिए, यह तरीका अपनाएं:

bower install polymer

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

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

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