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