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