Polymer هي إحدى البوابات التي تؤدي إلى مستقبل Web Components الرائع. نريد أن نسهّل استخدام العناصر المخصّصة وإنشائها. خلال العام الماضي، عمل الفريق جاهدًا على مجموعة من الإضافات التي توفّر وظائف لمواصفات متطورة. بالإضافة إلى ذلك، أنشأنا مكتبة مناسبة لتسهيل إنشاء مكونات الويب. أخيرًا، نعمل على إنشاء مجموعة من عناصر واجهة المستخدم والأدوات لإعادة استخدامها في تطبيقاتك. في قمة مطوّري Chrome لعام 2013، اطّلعت على الأجزاء المختلفة من Polymer والفلسفة التي تستند إليها العبارة "كل شيء هو عنصر".
العروض التقديمية: http://html5-demos.appspot.com/static/cds2013/index.html
"كلّ شيء هو عنصر" (من <select> إلى العناصر المخصّصة)
العروض التقديمية: http://html5-demos.appspot.com/static/cds2013/index.html#6
كان إنشاء صفحات الويب في التسعينيات محدودًا، ولكنه كان فعالًا. لم يكن لدينا سوى بعض العناصر. ما هو الجزء الأكثر فعالية؟...كل شيء كان تعريفيًا. كان من السهل بشكل ملحوظ إنشاء صفحة وإضافة عناصر التحكّم في النماذج وإنشاء "تطبيق" بدون كتابة الكثير من 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 تعتمد على الوصف. كلما قلّت التعليمات البرمجية التي عليك كتابتها، كان ذلك أفضل.
Web Components: مستقبل تطوير الويب
العروض التقديمية: http://html5-demos.appspot.com/static/cds2013/index.html#26
نودّ الإشارة إلى المعايير التي تستند إليها Web Components. بعد كل شيء، يستند Polymer إلى واجهات برمجة التطبيقات الأساسية المتطوّرة هذه.
نحن على وشك دخول مرحلة مثيرة للغاية في مجال تطوير الويب. على عكس الميزات الجديدة الأخرى التي تتم إضافتها إلى منصة الويب، فإنّ واجهات برمجة التطبيقات التي تشكّل مكونات الويب ليست رائعة أو موجّهة للمستخدمين. وهي مخصّصة فقط لزيادة إنتاجية المطوّرين. إنّ كلّ واجهة من واجهات برمجة التطبيقات الأربعة الرئيسية مفيدة بحدّ ذاتها، ولكنّها تحقّق نتائج رائعة عند استخدامها معًا.
- Shadow DOM: تغليف الأنماط وDOM
- العناصر المخصّصة: لتحديد عناصر HTML جديدة. امنحهم واجهة برمجة تطبيقات تتضمّن السمات والطُرق.
- HTML Imports هو نموذج التوزيع لحزمة من CSS وJS وHTML.
- النماذج: نماذج DOM المناسبة لتحديد أجزاء غير نشطة من الترميز المطلوب إزالتها لاحقًا
للاطّلاع على مزيد من المعلومات عن أساسيات واجهات برمجة التطبيقات، يُرجى الانتقال إلى webcomponents.org.