مكونات الويب ستغير كل ما تعتقد أنك تعرفه عن إنشاء الويب. لأول مرة، سيكون على الويب واجهات برمجة تطبيقات منخفضة المستوى، ما يسمح لنا بإنشاء علامات HTML الخاصة بنا، وأيضًا تضمين المنطق وCSS. لا حاجة إلى حساء الأنماط العامة أو الرموز النموذجية. إنّه عالم جديد شجاع وفيه عنصر واحد.
في حديثي من فريق DotJS، أتحدّث عن ما يجب أن تقدّمه مكوّنات الويب وكيفية إنشائها باستخدام الأدوات الحديثة. سأوضح لك Yeoman، وهو سير عمل الأدوات التي تسهِّل إنشاء تطبيقات الويب باستخدام بوليمر، وهي مكتبة من الرموز polyfill والسكر لتطوير التطبيقات باستخدام مكونات الويب في المتصفحات الحديثة حاليًا.
إنشاء عناصر مخصصة وتثبيت عناصر أنشأها آخرون
ستتعرف في هذه المحادثة على ما يلي:
- لمحة عن المواصفات الأربع المختلفة لمكوّنات الويب: العناصر المخصّصة والنماذج وShadow DOM وعمليات استيراد HTML.
- كيفية تحديد العناصر المخصصة الخاصة بك وتثبيت العناصر التي أنشأها آخرون باستخدام Bower
- قضاء وقت أقل في كتابة JavaScript ووقت أكثر في إنشاء الصفحات
- استخدام أدوات الواجهة الأمامية الحديثة (Yeoman) لتعزيز أداء التطبيقات باستخدام البوليمر وباستخدام أداة إنشاء البوليمر.
- كيفية إجراء تغييرات فائقة على البوليمر في إنشاء مكوّنات الويب
على سبيل المثال، لتثبيت رموز polyfill لمكوّن الويب من البوليمر والمكتبة نفسها، يمكنك تشغيل هذا السطر الوحيد:
bower install --save Polymer/platform Polymer/polymer
يؤدي هذا الإجراء إلى إضافة مجلد bower_components وإضافة الحزم أعلاه. يضيفها --save إلى ملف Bower.json الخاص بتطبيقك.
في وقت لاحق، إذا أردت تثبيت عنصر أكورديون البوليمر، يمكنك تشغيل:
bower install --save Polymer/polymer-ui-accordion
ثم استيرادها إلى تطبيقك:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
لتوفير الوقت، يمكن استخدام تطبيق البوليمر الجديد الذي يضم جميع التبعيات التي تحتاجها والرمز النموذجي وأدوات تحسين التطبيق من خلال تطبيق Yuman من خلال هذه الحزمة الأخرى:
yo polymer
جولة تفصيلية إضافية
وسجّلت أيضًا جولة تفصيلية إضافية مدتها 30 دقيقة حول تطبيق البوليمر الموسيقي الذي أعرضه في حديثي.
يتناول الفيديو الإضافي التالي:
- ماذا تعني عبارة "كل شيء عنصر"
- كيفية استخدام Bower لتثبيت رموز polyfill وعناصر النظام الأساسي من البوليمر
- سلِح تطبيق Jukebox باستخدام مولدات Yuman ومولدات فرعية
- التعرّف على ميزات المنصّة استنادًا إلى نص نموذجي
- كيفية نقل تطبيق Angular من الناحية الوظيفية إلى Polymer.
ونستفيد أيضًا من المولدات الفرعية من عُمان لتعزيز عناصر البوليمر الجديدة، وذلك في سبيل إنشاء النص النموذجي لعنصر foo الذي نشغّله:
yo polymer:element foo
وهو ما سيطلب منا معرفة ما إذا كنا نرغب في استيراد العنصر تلقائيًا، وما إذا كانت الدالة الإنشائية مطلوبة وبعض التفضيلات الأخرى.
أحدث مصادر التطبيق المعروضة في كلتا المحادثتين متاحة الآن على GitHub. لقد أعدت بنائها أكثر قليلاً حتى أصبح أكثر تنظيمًا وأسهل في القراءة.
معاينة التطبيق:
محتوى إضافي للقراءة
باختصار، Polymer هي مكتبة JavaScript تمكّن مكونات الويب الآن في متصفحات الويب الحديثة بينما ننتظر تنفيذها محليًا. يمكن أن تساعدك الأدوات الحديثة في تحسين سير العمل عند استخدامها، وقد تستمتع بتجربة Yuman و Bower عند تطوير علاماتك الخاصة.
في ما يلي بعض المقالات الأخرى التي تستحق الاطّلاع على هذا الموضوع: