Polymer, वेब कॉम्पोनेंट के बेहतरीन भविष्य का एक गेटवे है. हम कस्टम एलिमेंट को इस्तेमाल करना और बनाना आसान बनाना चाहते हैं. पिछले एक साल से, हमारी टीम लगातार नई सुविधाओं के लिए, पॉलीफ़िल के सेट पर काम कर रही है. इसके अलावा, हमने वेब कॉम्पोनेंट बनाने की प्रोसेस को आसान बनाने के लिए, एक सुविधाजनक लाइब्रेरी बनाई है. आखिर में, हम आपके ऐप्लिकेशन में फिर से इस्तेमाल करने के लिए, यूज़र इंटरफ़ेस (यूआई) और यूटिलिटी एलिमेंट का एक सेट बना रहे हैं. साल 2013 के Chrome Dev Summit में, मैंने Polymer के अलग-अलग हिस्सों और "हर चीज़ एक एलिमेंट है" के सिद्धांत के बारे में बताया था.
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html
"हर चीज़ एक एलिमेंट है" (<select> से कस्टम एलिमेंट तक)
स्लाइड: 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 के खास सोस की मदद से वेब कॉम्पोनेंट बनाना
स्लाइड: 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
इसका मतलब है कि Polymer एलिमेंट लिखने के लिए, एलिमेंट के बारे में साफ़ तौर पर बताना ज़रूरी है. जितना कम कोड लिखना पड़े उतना ही बेहतर ;)
वेब कॉम्पोनेंट: वेब डेवलपमेंट का भविष्य
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html#26
अगर मैंने वेब कॉम्पोनेंट के पीछे के स्टैंडर्ड के बारे में नहीं बताया, तो मुझे अफ़सोस होगा. आखिरकार, Polymer इन बुनियादी एपीआई पर आधारित है.
वेब डेवलपमेंट के लिए, यह एक बहुत ही रोमांचक समय है. वेब प्लैटफ़ॉर्म में जोड़ी जा रही अन्य नई सुविधाओं के मुकाबले, वेब कॉम्पोनेंट बनाने वाले एपीआई, न तो शानदार हैं और न ही उपयोगकर्ता के लिए हैं. ये सिर्फ़ डेवलपर की प्रोडक्टिविटी के लिए हैं. चारों मुख्य एपीआई अपने-आप काम के हैं, लेकिन साथ में इस्तेमाल करने पर, जादू जैसी चीज़ें होती हैं!
- शैडो डीओएम - स्टाइल और डीओएम को कवर करना
- कस्टम एलिमेंट - नए एचटीएमएल एलिमेंट तय करें. उन्हें प्रॉपर्टी और तरीकों वाला एपीआई दें.
- एचटीएमएल इंपोर्ट, सीएसएस, JS, और एचटीएमएल के पैकेज के लिए डिस्ट्रिब्यूशन मॉडल है.
- टेंप्लेट - मार्कअप के उन हिस्सों को तय करने के लिए सही DOM टेंप्लेट, जिन्हें बाद में हटा दिया जाना है
अगर आपको एपीआई के बुनियादी सिद्धांतों के बारे में ज़्यादा जानना है, तो webcomponents.org पर जाएं.