Yo Polymer – جولة دوارة في أدوات مكونات الويب

ستغيّر مكونات الويب كل ما تعرفه عن إنشاء المحتوى على الويب. وللمرة الأولى، ستتضمّن الويب واجهات برمجة تطبيقات من المستوى الأدنى تتيح لنا إنشاء علامات HTML الخاصة بنا، بالإضافة إلى تجميع المنطق وCSS. لم يعُد عليك التعامل مع رمز نص نموذجي أو ملف تعريف أنماط ملفات تعريف الارتباط العام. إنه عالم جديد حيث يكون كل شيء عنصرًا.

في محاضرتي من DotJS، أشرح ميزات Web Components وكيفية إنشائها باستخدام الأدوات الحديثة. سأعرض لك Yeoman، وهو سير عمل للأدوات لتبسيط إنشاء تطبيقات الويب باستخدام Polymer، وهي مكتبة من الإضافات وأدوات تطوير التطبيقات باستخدام Web Components في المتصفّحات الحديثة اليوم.

إنشاء عناصر مخصّصة وتثبيت عناصر أنشأها الآخرون

ستتعرّف في هذه المحادثة على ما يلي:

  • لمحة عن المواصفات الأربعة المختلفة التي تتألف منها Web Components: العناصر المخصّصة والنماذج وShadow DOM وعمليات استيراد HTML.
  • كيفية تحديد العناصر المخصّصة الخاصة بك وتثبيت العناصر التي أنشأها الآخرون باستخدام Bower
  • قضاء وقت أقل في كتابة JavaScript ووقت أطول في إنشاء الصفحات
  • استخدِم أدوات حديثة للواجهة الأمامية (Yeoman) لإنشاء إطار عمل لتطبيق باستخدام Polymer مع generator-polymer.
  • كيف غيّر Polymer super عملية إنشاء مكوّنات الويب

على سبيل المثال، لتثبيت مكونات Web Component polyfills من Polymer والمكتبة نفسها، يمكنك تنفيذ السطر الواحد التالي:

bower install --save Polymer/platform Polymer/polymer

يؤدي ذلك إلى إضافة مجلد bower_components وإضافة الحِزم أعلاه. --save تضيفها إلى ملف bower.json في تطبيقك.

في وقت لاحق، إذا أردت تثبيت عنصر ملف الأركان في Polymer، يمكنك تنفيذ ما يلي:

bower install --save Polymer/polymer-ui-accordion

ثم استورِدها إلى تطبيقك باتّباع الخطوات التالية:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

لتوفير الوقت، يمكنك استخدام Yeoman لإنشاء إطار عمل لتطبيق Polymer جديد يتضمّن جميع التبعيات التي تحتاجها والرموز البرمجية النموذجية والأدوات اللازمة لتحسين تطبيقك، وذلك باستخدام السطر التالي:

yo polymer

جولة إرشادية إضافية

سجّلتُ أيضًا جولة إرشادية إضافية مدتها 30 دقيقة حول تطبيق Polymer Jukebox الذي أعرضه في المحادثة.

المواضيع التي يتم تناولها في الفيديو الإضافي:

  • معنى العبارة "كلّ شيء هو عنصر"
  • كيفية استخدام Bower لتثبيت عناصر وعناصر Platform polyfills في Polymer
  • إنشاء إطار عمل لتطبيق Jukebox باستخدام أداة إنشاء Yeoman وأدوات الإنشاء الفرعية
  • فهم ميزات المنصة التي تمّ إعدادها من خلال نموذج
  • كيفية نقل تطبيق Angular إلى Polymer من الناحية الوظيفية

نستخدم أيضًا منشئي الوحدات الفرعية في Yeoman لإنشاء إطار عمل لعناصر Polymer الجديدة. على سبيل المثال، لإنشاء النموذج الأساسي لعنصر foo، ننفّذ ما يلي:

yo polymer:element foo

سيطلب منا تحديد ما إذا أردنا استيراد العنصر تلقائيًا، وما إذا كان المُنشئ مطلوبًا، وبعض الإعدادات المفضّلة الأخرى.

يمكنك الآن الاطّلاع على أحدث مصادر التطبيق المعروض في كلتا المحادثتَين على GitHub. لقد أعدت تنظيمها قليلاً لتكون أكثر تنظيمًا وأسهل في القراءة.

معاينة التطبيق:

معاينة تطبيق Yo Polymer

مراجع إضافية

باختصار، Polymer هي مكتبة JavaScript تتيح استخدام Web Components الآن في متصفّحات الويب الحديثة في انتظار تنفيذها بشكل أصلي. يمكن أن تساعد الأدوات الحديثة في تحسين سير عملك باستخدامها، وقد تستمتع بتجربة Yeoman وBower عند تطوير علاماتك الخاصة.

في ما يلي بعض المقالات الأخرى التي تستحق الاطّلاع عليها حول هذا الموضوع: