Polymer یکی از دروازه‌های ورود به آینده شگفت‌انگیز «عناصر وب» است. می‌خواهیم مصرف و ساخت عناصر سفارشی را آسان کنیم. در سال گذشته، تیم سخت در تلاش بوده است تا مجموعه‌ای از شبیه‌سازهای مرورگر را برای مشخصات درحال تکامل ایجاد کند. علاوه‌براین، کتابخانه sugaring مناسبی ایجاد کرده‌ایم تا ساختن مؤلفه‌های وب را آسان‌تر کنیم. درنهایت، درحال ساخت مجموعه‌ای از عناصر میانای کاربری و کاربردی هستیم تا بتوانید در برنامه‌هایتان از آن‌ها استفاده مجدد کنید. در «اجلاس توسعه‌دهندگان Chrome» در سال ۲۰۱۳، من به بخش‌های مختلف Polymer و فلسفه پشت شعار «همه چیز یک عنصر است» پرداختم.
اسلایدها: http://html5-demos.appspot.com/static/cds2013/index.html
«همه چیز یک عنصر است» (از <select> تا عناصر سفارشی)
اسلایدها: http://html5-demos.appspot.com/static/cds2013/index.html#6
ساختن صفحات وب در دهه ۱۹۹۰ محدودکننده اما قدرتمند بود. فقط چند عنصر دراختیار داشتیم. بخش قدرتمند؟...همه چیز اعلانی بود. ایجاد صفحه، افزودن کنترل‌های فرم، و ایجاد «برنامه» بدون نوشتن انبوهی از جاوا اسکریپت به‌طور قابل‌توجهی ساده بود.
عنصر ساده <select> را درنظر بگیرید. عملکردهای زیادی در این عنصر تعبیه شده است، فقط با اعلام آن:
- قابل‌سفارشی‌سازی ازطریق مشخصه‌های HTML
- فرزندان (مثلاً
<option>) را با واسط کاربر پیش‌فرض ارائه می‌کند، اما ازطریق مشخصه‌ها قابل‌پیکربندی است. - مفید در زمینه‌های دیگر مانند
<form> - دارای DOM API است: ویژگی‌ها و روش‌ها
- وقتی اتفاقات جالبی می‌افتد، رویدادها را فعال می‌کند
«عناصر وب» ابزارهایی را برای بازگشت به این دوران اوج توسعه وب ارائه می‌دهند. جایی که بتوانیم عناصر جدیدی ایجاد کنیم، یادآور <select>، اما طراحی‌شده برای موارد استفاده سال ۲۰۱۴. برای مثال، اگر AJAX امروز اختراع می‌شد، احتمالاً یک برچسب HTML بود (مثال):
<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 اتخاذ می‌کنیم. به‌جای ساختن برنامه‌های وب یکپارچه مبتنی بر جاوا اسکریپت، بیایید عناصر قابل‌استفاده مجدد ایجاد کنیم. با گذشت زمان، کل برنامه از ترکیب عناصر کوچک‌تر با یکدیگر رشد می‌کند. حتی کل برنامه می‌تواند یک عنصر باشد:
<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 براساس این میاناهای برنامه‌سازی کاربردی پایه‌ای درحال تکامل است.
ما در آستانه دوران بسیار هیجان‌انگیزی در توسعه وب هستیم. برخلاف سایر ویژگی‌های جدیدی که به پلاتفرم وب اضافه می‌شوند، میاناهای برنامه‌سازی کاربردی که مؤلفه‌های وب را تشکیل می‌دهند، درخشان یا کاربرپسند نیستند. این داده‌ها صرفاً برای بهره‌وری توسعه‌دهنده است. هرکدام از این چهار میانای برنامه‌سازی کاربردی اصلی به‌تنهایی مفید هستند، اما وقتی باهم استفاده شوند، اتفاقات جادویی رخ می‌دهد!
- Shadow DOM - کپسوله‌سازی سبک و DOM
- عناصر سفارشی - عناصر HTML جدید را تعریف کنید. یک API با ویژگی‌ها و روش‌ها به آن‌ها بدهید.
- واردات HTML مدل توزیع برای بسته‌ای از CSS، JS، و HTML است.
- الگوها - الگوهای DOM مناسب برای تعریف بخش‌های غیرفعال نشانه‌گذاری که بعداً استفاده می‌شوند
اگر می‌خواهید درباره اصول میاناهای برنامه‌سازی کاربردی بیشتر بدانید، به webcomponents.org مراجعه کنید.