Polymer बेहतरीन भविष्य के वेब कॉम्पोनेंट का एक रास्ता है. हम कस्टम एलिमेंट बनाने और इस्तेमाल करने की प्रोसेस को आसान बनाना चाहते हैं. पिछले साल से हमारी टीम, नई जानकारी के लिए पॉलीफ़िल के एक सेट पर लगातार काम कर रही है. इस बात को ध्यान में रखते हुए, हमने शुगरिंग वाली एक सुविधाजनक लाइब्रेरी तैयार की है, ताकि वेब कॉम्पोनेंट आसानी से बनाए जा सकें. आखिर में, हम यूआई और यूटिलिटी एलिमेंट का एक सेट तैयार कर रहे हैं, ताकि आप अपने ऐप्लिकेशन में उन्हें फिर से इस्तेमाल कर सकें. साल 2013 के Chrome डेवलपर सम्मेलन में, मैंने पॉलिमर के अलग-अलग हिस्सों और हमारे "एवरीथिंग इज़ ऐलिमेंट" के पीछे की सोच को गहराई से समझा. मंत्र.
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html
"हर चीज़ एक एलिमेंट है" (<select> से कस्टम एलिमेंट में)
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html#6
90 के दशक में वेब पेज बनाना सीमित, लेकिन सशक्त था. हमारे पास कुछ ही एलिमेंट थे. सबसे अहम हिस्सा?...सब कुछ एलान वाला था. पेज बनाना, फ़ॉर्म कंट्रोल जोड़ना, और "ऐप्लिकेशन" बनाना बेहद आसान था बिना 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="{{isPhone}}"></…हम पॉलीमर के लिए यही तरीका अपना रहे हैं. मोनोलिथिक JavaScript पर आधारित वेब ऐप्लिकेशन बनाने के बजाय, दोबारा इस्तेमाल किए जा सकने वाले एलिमेंट बनाएं. समय के साथ, छोटे-छोटे एलिमेंट मिलकर पूरे ऐप्लिकेशन पर ज़्यादा असर पड़ता है. हैक और पूरा ऐप्लिकेशन एक ऐसा एलिमेंट हो सकता है:
<my-app></my-app>
पॉलिमर के खास सॉस से वेब कॉम्पोनेंट बनाना
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html#37
पॉलिमर में वेब कॉम्पोनेंट पर आधारित ऐप्लिकेशन बनाने के लिए कई सुविधाएं उपलब्ध हैं:
- एलान वाले एलिमेंट रजिस्ट्रेशन:
<polymer-element> - डिक्लेरेटिव इनहेरिटेंस:
<polymer-element extends="..."> - एलान वाला टू-वे डेटा-बाइंडिंग:
<input id="input" value="{{foo}}"> - एलान वाले इवेंट हैंडलर:
<button on-click="{{handleClick}}"> - पब्लिश की गई प्रॉपर्टी:
xFoo.bar = 5<-><x-foo bar="5"> - प्रॉपर्टी ऑब्ज़र्वेशन:
barChanged: function() {...} - डिफ़ॉल्ट रूप से, पॉइंटर इवेंट / पॉइंटर जेस्चर
कहानी की नैतिकता यह है कि पॉलीमर एलिमेंट लिखना सिर्फ़ डिक्लेरेटिव टोन में होना चाहिए. आपको जितना कम कोड लिखना पड़े उतना ही बेहतर ;)
वेब कॉम्पोनेंट: वेब डेवलपमेंट का भविष्य
स्लाइड: http://html5-demos.appspot.com/static/cds2013/index.html#26
अगर मैंने वेब कॉम्पोनेंट के स्टैंडर्ड के बारे में नहीं बताया, तो मुझे याद नहीं रहेगा. आखिरकार, Polymer मुख्य रूप से बढ़ते हुए इन बुनियादी एपीआई पर ही आधारित है.
हम वेब डेवलपमेंट के क्षेत्र में बहुत ही रोमांचक काम करने वाले हैं. वेब प्लैटफ़ॉर्म में जोड़ी जा रही दूसरी नई सुविधाओं से अलग, वेब कॉम्पोनेंट बनाने वाले एपीआई शानदार या इस्तेमाल करने वाले नहीं होते हैं. इन्हें पूरी तरह से डेवलपर की उत्पादकता के लिए बनाया गया है. चार मुख्य एपीआई में से हर एक अपने-आप में काम का होता है, लेकिन एक साथ कई जादुई चीज़ें हो जाती हैं!
- शैडो डीओएम - स्टाइल और डीओएम इनकैप्सुलेशन
- कस्टम एलिमेंट - नए एचटीएमएल एलिमेंट तय करें. प्रॉपर्टी और तरीकों की मदद से उन्हें एपीआई उपलब्ध कराएं.
- एचटीएमएल इंपोर्ट, सीएसएस, JS, और एचटीएमएल के पैकेज के लिए डिस्ट्रिब्यूशन मॉडल है.
- टेंप्लेट - मार्कअप के इनर्ट हिस्से तय करने के लिए सही डीओएम टेंप्लेट, जिसे बाद में स्टैंप आउट किया जाना है
अगर आपको एपीआई की बुनियादी बातों के बारे में ज़्यादा जानना है, तो ebidel.github.com/webcomponents पर जाएं.