इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

आधुनिक टूल की मदद से, वेबऐप्लिकेशन को स्कैफ़ोल्ड करना

Addy Osmani

परिचय

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

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

Yo, Grunt, और Bower से मिलें

Yeoman, टोपी पहने हुए एक व्यक्ति है. उसके पास आपकी प्रॉडक्टिविटी बढ़ाने के लिए तीन टूल हैं:

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

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

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

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

हम कुछ कस्टम 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 Apps Spreadsheets API का इस्तेमाल करेंगे. इससे, Google Docs का इस्तेमाल करके बनाई गई किसी भी स्प्रेडशीट का कॉन्टेंट आसानी से पढ़ा जा सकता है.

आइए, इसे सेट अप करते हैं:

अपने ब्राउज़र में, यह Google Docs स्प्रेडशीट खोलें. इन चरणों को पूरा करने के लिए, Chrome का सुझाव दिया जाता है. इसमें इन फ़ील्ड में पोस्ट का सैंपल डेटा शामिल होता है:
- आईडी
- शीर्षक
- लेखक
- सामग्री
- तारीख
- कीवर्ड
- लेखक का ईमेल पता
- स्लग (आपकी पोस्ट के स्लग यूआरएल के लिए)
स्प्रेडशीट की अपनी कॉपी बनाने के लिए, फ़ाइल मेन्यू में जाएं और कॉपी बनाएं को चुनें. आपके पास कॉन्टेंट में कभी भी बदलाव करने, पोस्ट जोड़ने या हटाने का विकल्प होता है.
फिर से फ़ाइल मेन्यू पर जाएं और वेब पर पब्लिश करें को चुनें.
पब्लिश करना शुरू करें पर क्लिक करें
पब्लिश किए गए डेटा का लिंक पाएं सेक्शन में, आखिरी टेक्स्ट बॉक्स में दिए गए यूआरएल का की हिस्सा कॉपी करें. यह इस तरह दिखता है: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
your-key-goes-here वाले यूआरएल में key चिपकाएं: 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 एट्रिब्यूट का इस्तेमाल कर रहे हैं. हम selected एट्रिब्यूट को किसी रूट से पॉप्युलेट करेंगे.

<!-- Post content -->

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

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

</template>

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

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

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

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

वेब कॉम्पोनेंट के आस-पास मौजूद एलिमेंट का नेटवर्क, हाल ही में बढ़ रहा है. इसकी वजह यह है कि 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 के समस्या ट्रैकर पर पोस्ट करने के लिए, यहां जाएं. हमें यह जानकर खुशी होगी कि क्या आपको जनरेटर में कुछ और बेहतर करना है. सिर्फ़ आपके इस्तेमाल और सुझावों से ही, हम इसे बेहतर बना सकते हैं :)