Polymer هو مدخل واحد إلى المستقبل المذهل لمكونات الويب. نريد أن نجعل من السهل استهلاك وإنشاء العناصر المخصصة. على مدار العام الماضي، عمل الفريق بجد على مجموعة من رموز 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: الخصائص والطرق
- تنشيط الأحداث عند حدوث أشياء مثيرة للاهتمام
توفر مكونات الويب الأدوات للعودة إلى ذروة تطوير الويب. أحد العناصر التي يمكننا من خلالها إنشاء عناصر جديدة، على غرار <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="">
هذا هو النهج الذي نتبعه في مجال البوليمر. فبدلاً من إنشاء تطبيقات ويب متجانسة مستندة إلى JavaScript، دعنا ننشئ عناصر يمكن إعادة استخدامها. بمرور الوقت، ينمو تطبيق كامل من إنشاء عناصر أصغر معًا. ولكن يمكن أن يكون التطبيق بأكمله عنصرًا أساسيًا:
<my-app></my-app>
بناء مكونات الويب باستخدام صلصة البوليمر الخاصة
العروض التقديمية من Google: 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 / إيماءات المؤشرات بشكلٍ تلقائي
مغزى القصة هو أن كتابة عناصر البوليمر تدور حول أسلوب تعريفي. كلما قلت التعليمات البرمجية التي يتعين عليك كتابتها، كان ذلك أفضل ؛)
مكونات الويب: مستقبل تطوير الويب
العروض التقديمية من Google: http://html5-demos.appspot.com/static/cds2013/index.html#26
سأصاب بالخطأ إذا لم أخبرني بالمعايير الخاصة بمكونات الويب. فرغم كل شيء، يعتمد البوليمر على واجهات برمجة التطبيقات الأساسية المتطورة هذه.
نحن على وشك مرحلة شيّقة للغاية في مجال تطوير البرامج على الويب. وعلى عكس الميزات الجديدة الأخرى التي تتم إضافتها إلى النظام الأساسي للويب، لا تكون واجهات برمجة التطبيقات التي تتألف منها مكونات الويب لامعة أو مواجهة للمستخدم. الهدف الوحيد من هذه الأهداف هو إنتاجية مطوّري البرامج. كل واحدة من واجهات برمجة التطبيقات الأربع الرئيسية مفيدة في حد ذاتها، ولكن معًا، تحدث أشياء سحرية!
- Shadow DOM: تغليف النمط وDOM
- العناصر المخصصة - تحديد عناصر HTML الجديدة. امنحهم واجهة برمجة تطبيقات تحتوي على الخصائص والطرق.
- عمليات استيراد HTML هي نموذج توزيع لحزمة CSS وJS وHTML.
- النماذج - نماذج DOM المناسبة لتحديد أجزاء الترميز inert التي سيتم ختمها لاحقًا
إذا كنت تريد معرفة المزيد حول أساسيات واجهات برمجة التطبيقات، فراجع webcomponents.org.