वेब कॉम्पोनेंट की मदद से, वेब को बनाने के बारे में आपको जो भी जानकारी होगी उसे बदल देंगे. वेब में पहली बार, लो लेवल के एपीआई होंगे. इनसे हम न सिर्फ़ अपने एचटीएमएल टैग बना पाएंगे, बल्कि लॉजिक और सीएसएस को भी शामिल कर पाएंगे. और कोई ग्लोबल स्टाइलशीट सूप या बॉयलरप्लेट कोड नहीं है! यह एक शानदार नई दुनिया है, जहां हर चीज़ का एक हिस्सा मौजूद है.
DotJS की बातचीत में, मैंने वेब कॉम्पोनेंट की सुविधाओं के बारे में बताया है. साथ ही, बताया है कि मॉडर्न टूल का इस्तेमाल करके इन्हें बनाने का तरीका क्या है. मैं आपको Yeoman के बारे में बताऊँगी. यह टूल का वर्कफ़्लो है. इसकी मदद से, पॉलीमर का इस्तेमाल करके आसानी से वेब ऐप्लिकेशन बनाए जा सकते हैं. यह मॉडर्न ब्राउज़र में वेब कॉम्पोनेंट का इस्तेमाल करके डेवलप किए जा रहे ऐप्लिकेशन में, पॉलीफ़िल और शुगर की लाइब्रेरी है.
पसंद के मुताबिक एलिमेंट बनाना और दूसरों के बनाए गए एलिमेंट इंस्टॉल करना
इस बातचीत में आपको पता चलेगा कि:
- वेब कॉम्पोनेंट को बनाने वाले चार अलग-अलग फ़ीचर के बारे में जानकारी: कस्टम एलिमेंट, टेंप्लेट, शैडो DOM और एचटीएमएल इंपोर्ट.
- अपने कस्टम एलिमेंट तय करने और Bower का इस्तेमाल करके बनाए गए एलिमेंट इंस्टॉल करने का तरीका
- JavaScript लिखने में कम समय लगता है और पेज बनाने में ज़्यादा समय लगता है
- जनरेटर-पॉलीमर के साथ पॉलीमर का इस्तेमाल करके किसी ऐप्लिकेशन को स्टेज करने के लिए, आधुनिक फ़्रंट-एंड टूल (Yeoman) का इस्तेमाल करें
- Polymer वेब कॉम्पोनेंट बनाने के तरीके में किस तरह से बड़ा बदलाव कर रहा है.
उदाहरण के लिए, पॉलीमर के वेब कॉम्पोनेंट के पॉलीफ़िल और लाइब्रेरी को इंस्टॉल करने के लिए, इस एक लाइनर को चलाया जा सकता है:
bower install --save Polymer/platform Polymer/polymer
इससे bower_components फ़ोल्डर जुड़ जाता है और ऊपर दिए गए पैकेज जुड़ जाते हैं. --save ने उन्हें आपके ऐप्लिकेशन की bower.json फ़ाइल में जोड़ दिया.
इसके बाद, अगर आपको पॉलीमर का अकॉर्डियन एलिमेंट इंस्टॉल करना हो, तो:
bower install --save Polymer/polymer-ui-accordion
और फिर इसे अपने ऐप्लिकेशन में आयात करें:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
समय बचाने के लिए, एक नए Polymer ऐप्लिकेशन को अलग-अलग तरह से तैयार किया जा सकता है. इसमें, अपनी ज़रूरत की सभी डिपेंडेंसी, बॉयलरप्लेट कोड, और ऐप्लिकेशन को ऑप्टिमाइज़ करने के लिए टूल शामिल हैं. इन सभी कामों के लिए, Yaoman के साथ एक लाइनर का इस्तेमाल किया जा सकता है:
yo polymer
सिलसिलेवार तरीके से दिए गए बोनस के बारे में जानकारी
मैंने Polymer Jukebox ऐप्लिकेशन के बारे में सिलसिलेवार तरीके से 30 मिनट का निर्देश भी रिकॉर्ड किया है, जो मैंने इस बातचीत में दिखाया है.
बोनस वीडियो में शामिल किया गया है:
- “हर चीज़ एक तत्व है” मंत्र का क्या मतलब है
- Polymer के प्लैटफ़ॉर्म के पॉलीफ़िल और एलिमेंट को इंस्टॉल करने के लिए, Bower इस्तेमाल करने का तरीका
- Yaoman के जनरेटर और सब-जनरेटर की मदद से, अपने Jukebox ऐप्लिकेशन को मरम्मत के लिए उपलब्ध कराना
- बॉयलरप्लेट की मदद से, प्लैटफ़ॉर्म की सुविधाओं को समझना
- मैंने Angular ऐप्लिकेशन पर Polymer से सुविधाओं को कैसे पोर्ट किया है.
हम अपने नए पॉलिमर एलिमेंट को और बेहतर बनाने के लिए, यमन सब-जनरेटर का भी इस्तेमाल करते हैं. जैसे, हम जिस एलिमेंट foo को चलाते हैं उसके लिए बॉयलरप्लेट बनाने के लिए:
yo polymer:element foo
इससे हमें यह पता चलेगा कि क्या हम चाहते हैं कि एलिमेंट अपने-आप इंपोर्ट हो जाए, कंस्ट्रक्टर की ज़रूरत हो या कुछ और प्राथमिकताओं के लिए.
दोनों बातचीत में दिखाए गए ऐप्लिकेशन के लिए, नए सोर्स अब GitHub पर उपलब्ध हैं. मैंने इसे और बेहतर बनाया है, ताकि चीज़ें व्यवस्थित तरीके से और आसानी से पढ़ी जा सकें.
ऐप्लिकेशन की झलक:
इसके बारे में और पढ़ें
संक्षेप में, Polymer एक JavaScript लाइब्रेरी है, जो अब वेब कॉम्पोनेंट को मॉडर्न वेब ब्राउज़र में चालू कर देती है. ऐसा इसलिए है, क्योंकि हम इंतज़ार करते हैं कि वेब कॉम्पोनेंट मूल रूप से लागू किए जाएं. आधुनिक टूलिंग का इस्तेमाल करके, अपने वर्कफ़्लो को बेहतर बनाने में मदद मिल सकती है. साथ ही, अपने टैग बनाते समय शायद आपको यम और बॉवर को आज़माना पसंद आए.
इस विषय पर कुछ और लेख पढ़ना ज़रूरी है: