Polymer, वेब कॉम्पोनेंट के शानदार भविष्य का एक गेटवे है. हम कस्टम एलिमेंट को इस्तेमाल करना और बनाना आसान बनाना चाहते हैं. पिछले साल से, हमारी टीम लगातार बदल रहे स्पेसिफ़िकेशन के लिए, पॉलीफ़िल के सेट पर कड़ी मेहनत कर रही है. इसके अलावा, हमने एक सुविधाजनक सुगरिंग लाइब्रेरी बनाई है, ताकि वेब कॉम्पोनेंट बनाना आसान हो सके. आखिर में, हम यूज़र इंटरफ़ेस (यूआई) और यूटिलिटी एलिमेंट का एक सेट तैयार कर रहे हैं, ताकि उन्हें आपके ऐप्लिकेशन में फिर से इस्तेमाल किया जा सके. साल 2013 के Chrome Dev Summit में, मैंने Polymer के अलग-अलग हिस्सों और "हर चीज़ एक एलिमेंट है" के पीछे की सोच के बारे में बताया.
Slides: http://html5-demos.appspot.com/static/cds2013/index.html
"हर चीज़ एक एलिमेंट है" (<select> से लेकर कस्टम एलिमेंट तक)
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#6
साल 1990 के दशक में वेब पेज बनाना मुश्किल था, लेकिन यह एक दमदार तरीका था. हमारे पास सिर्फ़ कुछ ही एलिमेंट थे. सबसे अच्छी बात यह थी कि...सब कुछ डिक्लेरेटिव था. JavaScript का ज़्यादा इस्तेमाल किए बिना, पेज बनाना, फ़ॉर्म कंट्रोल जोड़ना, और "ऐप्लिकेशन" बनाना काफ़ी आसान था.
<select> एलिमेंट का उदाहरण लें. इस एलिमेंट में कई फ़ंक्शन पहले से मौजूद होते हैं. इसके लिए, बस इसे डिक्लेयर करना होता है:
- एचटीएमएल एट्रिब्यूट की मदद से, पसंद के मुताबिक बनाया जा सकता है
- यह डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के साथ चाइल्ड एलिमेंट (जैसे,
<option>) को रेंडर करता है. हालांकि, एट्रिब्यूट की मदद से इसे कॉन्फ़िगर किया जा सकता है. <form>जैसे अन्य कॉन्टेक्स्ट में काम आता है- इसमें डीओएम एपीआई होता है: प्रॉपर्टी और तरीके
- दिलचस्प चीज़ें होने पर इवेंट ट्रिगर करता है
वेब कॉम्पोनेंट, वेब डेवलपमेंट के इस सुनहरे दौर में वापस जाने के लिए टूल उपलब्ध कराते हैं. एक ऐसा प्लैटफ़ॉर्म जहां हम नए एलिमेंट बना सकें, जो <select> की याद दिलाएं, लेकिन उन्हें 2014 के इस्तेमाल के उदाहरणों के लिए डिज़ाइन किया गया हो. उदाहरण के लिए, अगर AJAX का आविष्कार आज हुआ होता, तो शायद यह एक एचटीएमएल टैग (उदाहरण) होता:
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
या queryMatches एट्रिब्यूट से डेटा-बाइंड किए गए रिस्पॉन्सिव एलिमेंट:
<polymer-media-query query="max-width:640px" queryMatches="">
Polymer में हम यही तरीका अपना रहे हैं. JavaScript पर आधारित मोनोलिथिक वेब ऐप्लिकेशन बनाने के बजाय, फिर से इस्तेमाल किए जा सकने वाले एलिमेंट बनाएं. समय के साथ, छोटे-छोटे एलिमेंट को एक साथ जोड़कर पूरा ऐप्लिकेशन बनाया जाता है. यहां तक कि पूरा ऐप्लिकेशन भी एक एलिमेंट हो सकता है:
<my-app></my-app>
Polymer के खास फ़ीचर की मदद से वेब कॉम्पोनेंट बनाना
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer में वेब कॉम्पोनेंट पर आधारित ऐप्लिकेशन बनाने के लिए, कई सुविधाएं मौजूद हैं:
- डिक्लेरेटिव एलिमेंट रजिस्ट्रेशन:
<polymer-element> - डिक्लेरेटिव इनहेरिटेंस:
<polymer-element extends="..."> - डिक्लेरेटिव टू-वे डेटा-बाइंडिंग:
<input id="input" value=""> - डिक्लेरेटिव इवेंट हैंडलर:
<button on-click="" - पब्लिश की गई प्रॉपर्टी:
xFoo.bar = 5<-><x-foo bar="5"> - प्रॉपर्टी का ऑब्ज़र्वेशन:
barChanged: function() {...} - PointerEvents / PointerGestures by default
इस कहानी से यह सीख मिलती है कि पॉलीमर एलिमेंट लिखने का मतलब, डिक्लेरेटिव होना है. जितना कम कोड लिखना पड़े उतना बेहतर ;)
वेब कॉम्पोनेंट: वेब डेवलपमेंट का भविष्य
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#26
अगर मैं वेब कॉम्पोनेंट के पीछे के स्टैंडर्ड के बारे में न बताऊं, तो यह मेरी गलती होगी. आखिरकार, Polymer इन बुनियादी एपीआई पर आधारित है.
हम वेब डेवलपमेंट के एक बहुत ही रोमांचक दौर में हैं. वेब प्लैटफ़ॉर्म में जोड़ी जा रही अन्य नई सुविधाओं के उलट, वेब कॉम्पोनेंट बनाने वाले एपीआई, चमकदार या उपयोगकर्ता के लिए उपलब्ध नहीं होते. ये सिर्फ़ डेवलपर की प्रोडक्टिविटी के लिए हैं. चारों मुख्य एपीआई अपने-आप में उपयोगी हैं. हालांकि, एक साथ इस्तेमाल करने पर ये और भी बेहतर तरीके से काम करते हैं!
- शैडो डीओएम - स्टाइल और डीओएम एनकैप्सुलेशन
- कस्टम एलिमेंट - नए एचटीएमएल एलिमेंट तय करें. उन्हें प्रॉपर्टी और तरीकों वाला एपीआई दें.
- एचटीएमएल इंपोर्ट, सीएसएस, JS, और एचटीएमएल के पैकेज के लिए डिस्ट्रिब्यूशन मॉडल है.
- टेंप्लेट - मार्कअप के इनर्ट चंक को तय करने के लिए सही DOM टेंप्लेटिंग, ताकि बाद में उन्हें स्टैंप किया जा सके
अगर आपको एपीआई की बुनियादी बातों के बारे में ज़्यादा जानना है, तो webcomponents.org पर जाएं.