Polymer هو أحد المداخل إلى المستقبل المذهل لمكوّنات الويب. نريد تسهيل استخدام العناصر المخصّصة وإنشائها. على مدار العام الماضي، عمل الفريق بجدّ على مجموعة من رموز polyfill للمواصفات المتطوّرة. بالإضافة إلى ذلك، أنشأنا مكتبة sugaring ملائمة لتسهيل إنشاء مكوّنات الويب. أخيرًا، نحن بصدد إنشاء مجموعة من عناصر واجهة المستخدم والأدوات المساعدة لإعادة استخدامها في تطبيقاتك. في مؤتمر Chrome Dev Summit لعام 2013، تعمّقت في الأجزاء المختلفة من Polymer والفلسفة وراء شعارنا "كل شيء هو عنصر".
الشرائح: http://html5-demos.appspot.com/static/cds2013/index.html
"كل شيء هو عنصر" (من <select> إلى العناصر المخصّصة)
الشرائح: http://html5-demos.appspot.com/static/cds2013/index.html#6
كان إنشاء صفحات الويب في التسعينيات محدودًا، ولكنه كان قويًا. لم يكن لدينا سوى عدد قليل من العناصر تحت تصرفنا. The powerful part?...everything was declarative. كان من السهل جدًا إنشاء صفحة وإضافة عناصر تحكّم في النماذج وإنشاء "تطبيق" بدون كتابة الكثير من رموز JavaScript.
لنأخذ عنصر <select> البسيط. هناك الكثير من الوظائف المضمّنة في العنصر، وذلك ببساطة من خلال تعريفه:
- يمكن تخصيصها من خلال سمات HTML
- يعرض العناصر الثانوية (مثل
<option>) بواجهة مستخدم تلقائية، ولكن يمكن ضبطه من خلال السمات. - مفيدة في سياقات أخرى مثل
<form> - يحتوي على واجهة برمجة تطبيقات DOM: السمات والطرق
- تطلق أحداثًا عند حدوث أشياء مثيرة للاهتمام
توفّر مكوّنات الويب الأدوات اللازمة للعودة إلى العصر الذهبي لتطوير الويب. أردنا إنشاء عناصر جديدة تذكّرنا بـ <select>، ولكنّها مصمّمة لحالات الاستخدام في عام 2014. على سبيل المثال، إذا تم ابتكار 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. بدلاً من إنشاء تطبيقات ويب أحادية مستندة إلى 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 على واجهات برمجة التطبيقات الأساسية المتطورة هذه.
نحن على أعتاب مرحلة مشوّقة جدًا في مجال تطوير الويب. على عكس الميزات الجديدة الأخرى التي تتم إضافتها إلى منصة الويب، فإنّ واجهات برمجة التطبيقات التي تشكّل مكوّنات الويب ليست جذابة أو موجّهة للمستخدمين. وهي مخصّصة فقط لإنتاجية المطوّرين. كل واجهة من واجهات برمجة التطبيقات الأربع الرئيسية مفيدة في حد ذاتها، ولكن معًا، تحدث أشياء سحرية!
- Shadow DOM: تغليف النمط وDOM
- العناصر المخصّصة: تتيح تحديد عناصر HTML جديدة. امنحهم واجهة برمجة تطبيقات تتضمّن سمات وطرقًا.
- عمليات استيراد HTML هي نموذج التوزيع لحزمة من CSS وJS وHTML.
- النماذج: نماذج DOM المناسبة لتحديد أجزاء غير نشطة من الترميز ليتم ختمها لاحقًا
إذا أردت معرفة المزيد عن أساسيات واجهات برمجة التطبيقات، يمكنك الاطّلاع على webcomponents.org.