مكوّنات الويب: المكوّن السرّي الذي يساعد في تعزيز أداء الويب

مكوّنات الويب في مؤتمر I/O لعام 2019

Arthur Evans
X GitHub

تاريخ النشر: 18 حزيران (يونيو) 2019

في مؤتمر Google I/O لعام 2019، تحدّث "كيفن شاف" من مشروع Polymer و"كاريدي باتينو" من Salesforce عن حالة مكوّنات الويب.

إذا كنت قد استخدمت الويب اليوم، فمن المحتمل أنك استخدمت مكونات الويب. وفقًا لإحصاءاتنا، يتراوح عدد عمليات تحميل الصفحات التي تستخدم مكوّن ويب واحدًا أو أكثر بين %5 و%8 من إجمالي عمليات التحميل اليوم. وهذا يجعل مكوّنات الويب من أنجح ميزات منصة الويب الجديدة التي تم طرحها في السنوات الخمس الماضية.

رسم بياني يوضّح أنّ %8 من المواقع الإلكترونية تستخدم عناصر مخصّصة من الإصدار 1. يتجاوز هذا الرقم أعلى نسبة استخدام للعناصر المخصّصة في الإصدار 0، والتي بلغت %5.

يمكنك العثور على مكوّنات الويب على المواقع الإلكترونية التي تستخدمها على الأرجح كل يوم، مثل YouTube وGitHub. ويتم استخدامها أيضًا في العديد من المواقع الإخبارية ومواقع النشر التي تم إنشاؤها باستخدام AMP، علمًا بأنّ مكوّنات AMP هي أيضًا مكوّنات ويب. وتعتمد العديد من المؤسسات أيضًا عناصر الويب.

ما هي مكوّنات الويب؟

إذًا، ما هي مكوّنات الويب؟ توفّر مواصفات مكوّنات الويب مجموعة من واجهات برمجة التطبيقات ذات المستوى المنخفض التي تتيح لك توسيع مجموعة علامات HTML المضمّنة في المتصفّح. توفّر مكوّنات الويب ما يلي:

  • طريقة شائعة لإنشاء مكوّن (باستخدام واجهات برمجة تطبيقات DOM العادية)
  • طريقة شائعة لتلقّي البيانات وإرسالها (باستخدام السمات/الأحداث)

بخلاف هذه الواجهة العادية، لا تذكر المعايير أي شيء عن كيفية تنفيذ المكوّن فعليًا:

  • محرّك العرض الذي يستخدمه لإنشاء نموذج DOM
  • كيفية تحديث نفسه بناءً على التغييرات في خصائصه أو سماته.

بعبارة أخرى، تخبر مكوّنات الويب المتصفّح متى وأين يتم إنشاء مكوّن، ولكن ليس كيفية إنشائه.

يمكن للمؤلفين اختيار أنماط عرض وظيفية مثل React لإنشاء مكوّنات الويب الخاصة بهم، أو يمكنهم استخدام نماذج توضيحية مثل تلك التي قد تجدها في Angular أو Vue. بصفتك مؤلفًا، لديك الحرية الكاملة في اختيار التكنولوجيا التي تستخدمها داخل المكوّن، مع الحفاظ على إمكانية التشغيل التفاعلي.

ما هي مزايا مكوّنات الويب؟

يتمثل الاختلاف الرئيسي بين مكوّنات الويب وأنظمة المكوّنات الخاصة في إمكانية التشغيل التفاعلي. بسبب واجهتها العادية، يمكنك استخدام مكوّنات الويب في أي مكان تستخدم فيه عنصرًا مضمّنًا مثل <input> أو <video>.

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

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

من يستخدم مكوّنات الويب؟

لهذه الأسباب كلها، تحقّق مكوّنات الويب نجاحًا كبيرًا في مجموعة متنوعة من حالات الاستخدام المختلفة. وقد لاقت ثلاث حالات استخدام رواجًا كبيرًا، وهي: المواقع الإلكترونية التي تقدّم محتوى، وأنظمة التصميم، وتطبيقات المؤسسات.

مواقع المحتوى

تُعدّ مكوّنات الويب التكنولوجيا المثالية للتحسين المتدرّج للمحتوى، لأنّه يمكن إخراجها كملفات HTML عادية من خلال عدد لا يحصى من أنظمة إدارة المحتوى.

تُعدّ صفحات AMP مثالاً رائعًا على مدى سرعة وسهولة دمج مكوّنات الويب في البنية الأساسية لقطاع النشر من أجل عرض المحتوى.

أنظمة التصميم

تتزايد أعداد الشركات التي توحّد طريقة تقديم نفسها باستخدام نظام تصميم، وهو مجموعة من المكوّنات والإرشادات التي تحدّد المظهر والأسلوب الشائعَين لمواقع المؤسسة وتطبيقاتها. تُعدّ مكوّنات الويب مناسبة جدًا هنا أيضًا.

الصفحة الرئيسية للتصميم المتعدد الأبعاد، https://material.io

غالبًا ما يضطر المصممون إلى التعامل مع العديد من الفِرق التي تنشئ إصداراتها الخاصة من مكوّنات نظام التصميم فوق React وAngular وجميع إطارات العمل الأخرى، بدلاً من استخدام مجموعة واحدة من المكوّنات الأساسية.

مكوّنات الويب هي الحلّ، فهي نظام مكوّنات يتيح كتابة الرمز مرة واحدة وتشغيله في أي مكان، مع منح فِرق التطبيقات حرية استخدام إطار العمل الذي يختارونه

تطبّق شركات مثل ING وEA وGoogle لغة التصميم الخاصة بها في مكوّنات الويب.

Enterprise: مكوّنات الويب في Salesforce

تحقّق مكوّنات الويب أيضًا تقدّمًا ملحوظًا داخل المؤسسات باعتبارها تكنولوجيا آمنة ومستقبلية يمكن توحيدها. أوضح "كاريدي باتينو"، مهندس منصة واجهة المستخدم في Salesforce، سبب إنشاء منصة واجهة المستخدم باستخدام مكوّنات الويب.

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

حدّدت Salesforce مجموعة من الاحتياجات لعملاء منصتها:

  • الحلول العادية بدلاً من الحلول الخاصة، ما يسهّل العثور على مطوّرين ذوي خبرة ويسرّع عملية تدريب المطوّرين الجدد
  • نموذج مكوّنات شائع، ما يعني أنّ تخصيص أي تطبيق Salesforce يعمل بالطريقة نفسها.

وحدّدوا أيضًا بعض الأمور التي لا يريدها العملاء:

  • التغييرات التي قد تؤدي إلى عطل في المكوّنات والتطبيقات بعبارة أخرى، كان التوافق مع الأنظمة القديمة أمرًا ضروريًا.
  • التقيّد بالتكنولوجيا القديمة وعدم القدرة على التطوّر
  • التقيّد بنظام رقمي مغلق

وقد لبّى استخدام مكوّنات الويب كأساس لمنصة واجهة المستخدم الجديدة كل هذه الاحتياجات، وكانت النتيجة هي Lightning Web Components الجديدة.

بدء استخدام مكوّنات الويب

هناك العديد من الطرق الرائعة لبدء استخدام مكوّنات الويب.

إذا كنت بصدد إنشاء تطبيق ويب، ننصحك باستخدام بعض مكوّنات الويب العادية العديدة المتاحة. وفي ما يلي بعض الأمثلة في هذا الخصوص:

  • تبيع Google نظام التصميم المتعدد الأبعاد الخاص بها كمكوّنات ويب: مكوّنات الويب المتعددة الأبعاد.
  • Wired Elements هي مجموعة رائعة من مكوّنات الويب التي تتميز بمظهر مرسوم يدويًا.
  • تتوفّر مكوّنات ويب رائعة مخصّصة لأغراض معيّنة، مثل <model-viewer>، والتي يمكنك إضافتها إلى أي تطبيق لإدراج محتوى ثلاثي الأبعاد.

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

للبدء في إنشاء مكوّناتك الخاصة، يمكنك الاطّلاع على LitElement، وهو صنف أساسي لمكوّنات الويب طوّرته Google ويوفّر تجربة عرض وظيفية رائعة مشابهة لـ React.

أدوات ومكتبات أخرى يمكن استخدامها:

  • ‫Stencil هو إطار عمل يركّز على مكوّنات الويب. ويتضمّن العديد من ميزات إطار العمل الشائعة، مثل JSX وTypeScript
  • توفّر Angular Elements طريقة لتضمين مكوّنات Angular كمكوّنات ويب.
  • يوفّر مغلّف مكوّنات الويب في Vue.js طريقة لتجميع مكوّنات Vue كمكوّنات ويب.

مزيد من الموارد:

  • يوفّر موقع open-wc.org معلومات رائعة للبدء، بالإضافة إلى نصائح وإعدادات تلقائية لأدوات الإنشاء وأدوات المطوّرين.
  • يوفّر موقع أساسيات الويب معلومات تمهيدية حول واجهات برمجة التطبيقات الأساسية لمكوّنات الويب، وأفضل الممارسات لتصميم مكوّنات الويب.
  • توفّر شبكة مطوّري Mozilla‏ (MDN) مستندات مرجعية لواجهات برمجة التطبيقات الخاصة بمكوّنات الويب، بالإضافة إلى بعض البرامج التعليمية.