البوليمر هو بوابة نحو المستقبل المذهل لمكوّنات الويب. نريد أن نسهِّل عليك استخدام العناصر المخصّصة وإنشاؤها. على مدار العام الماضي، عمل الفريق بجد على مجموعة من رموز polyfill للتوافق مع المواصفات المتطورة. علاوة على ذلك، أنشأنا مكتبة تحليلية ملائمة لتسهيل إنشاء مكوّنات الويب. وأخيرًا، نصمّم مجموعة من عناصر واجهة المستخدم والأداة لإعادة استخدامها في تطبيقاتك. في مؤتمر Chrome Dev Summit لعام 2013، استعرضت مختلف أجزاء البوليمر والفلسفة التي يستند إليها "كل شيء عبارة عن عنصر". المانترا.
العروض التقديمية من Google: http://html5-demos.appspot.com/static/cds2013/index.html
"كل شيء عبارة عن عنصر" (من <select> إلى العناصر المخصّصة)
العروض التقديمية من Google: http://html5-demos.appspot.com/static/cds2013/index.html#6
كان إنشاء صفحات الويب في التسعينيات أمرًا مقيّدًا، ولكنه كان قويًا. لم يكن لدينا سوى عدد قليل من العناصر تحت تصرفنا. وكان الجزء الفعّال؟...كل ما كان واضحًا. كان من السهل جدًا إنشاء صفحة وإضافة عناصر تحكّم في النموذج وإنشاء "تطبيق" بدون كتابة نصوص برمجية بلغة JavaScript
استخدِم عنصر <select> المتواضع. هناك الكثير من الوظائف المضمنة في العنصر، وذلك ببساطة من خلال الإعلان عنها:
- قابلة للتخصيص من خلال سمات HTML
- يعرض العنصر الثانوي (مثل
<option>) باستخدام واجهة مستخدم تلقائية، ولكنه قابل للضبط من خلال السمات. - مفيد في سياقات أخرى مثل
<form> - تتضمّن واجهة برمجة التطبيقات DOM API: المواقع والطرق
- يتم إطلاق الأحداث عند حدوث أحداث مثيرة للاهتمام.
**توفر مكونات الويب الأدوات اللازمة للعودة إلى ذروة تطوير الويب. وهو يتيح لنا إنشاء عناصر جديدة تشبه <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="{{isPhone}}"></…وهذا هو بالضبط النهج الذي ستتبعه في البوليمر. بدلاً من إنشاء تطبيقات ويب متجانسة مستندة إلى JavaScript، لنُنشئ عناصر قابلة لإعادة الاستخدام. بمرور الوقت، يزداد حجم التطبيق بأكمله من خلال تشكيل عناصر أصغر معًا. حسنًا، ويمكن أن يكون التطبيق بأكمله عنصرًا:
<my-app></my-app>
إنشاء مكوّنات ويب باستخدام صلصة البوليمر الخاصة
العروض التقديمية من Google: 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() {...} - أحداث المؤشر / إيماءات المؤشر تلقائيًا
تتمثل مغزى القصة في أن كتابة عناصر البوليمر تدور حول كونها تصريحية. كلما قلت التعليمات البرمجية التي يجب عليك كتابتها، كان ذلك أفضل ;)
مكوّنات الويب: مستقبل تطوير الويب
العروض التقديمية من Google: http://html5-demos.appspot.com/static/cds2013/index.html#26
سأشعر بالعار إذا لم أعطي صيحة للمعايير الكامنة وراء مكونات الويب. ففي نهاية الأمر، يعتمد البوليمر على واجهات برمجة التطبيقات الأساسية والمتطورة هذه.
نحن على وشك بدء مرحلة مثيرة للغاية في مجال تطوير البرامج على الويب. على عكس الميزات الجديدة الأخرى التي تتم إضافتها إلى النظام الأساسي للويب، فإن واجهات برمجة التطبيقات التي تتألف منها مكونات الويب ليست جذابة أو موجَّهة للمستخدمين. يقتصر دورها على إنتاجية مطوّري البرامج. وتعد كل واجهة من واجهات برمجة التطبيقات الرئيسية الأربع مفيدة في حد ذاتها، إلا أننا نحقق معًا ميزات سحرية معًا.
- Shadow DOM - تغليف النمط وDOM
- العناصر المخصصة - تحديد عناصر HTML جديدة. امنحهم واجهة برمجة تطبيقات تحتوي على المواقع والطرق.
- عمليات استيراد HTML هي نموذج التوزيع لحزمة CSS وJS وHTML.
- النماذج: نماذج DOM مناسبة لتحديد أجزاء أساسية من الترميز سيتم ختمها لاحقًا
إذا كنت ترغب في معرفة المزيد من المعلومات عن أساسيات واجهات برمجة التطبيقات، اطّلع على ebidel.github.com/webcomponents.