مكونات الويب: المكون السري الذي يساعد على تعزيز الويب

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

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

ما مدى رواج مكوّنات الويب؟

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

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

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

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

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

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

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

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

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

ما هي فائدة مكوّنات الويب؟

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

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

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

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

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

المواقع الإلكترونية التي تعرض محتوى

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

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

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

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

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

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

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

Enterprise: Web components at Salesforce

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

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

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

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

ورصدت الشركة أيضًا بعض الأمور التي لم يريدها العملاء:

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

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

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

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

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

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

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

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

أدوات ومكتبات أخرى يجب أخذها في الاعتبار:

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

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

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

الصورة الرئيسية تقدّمها شركة Jason Tuinstra على Unsplash.

ملاحظة المحرّر: تم تعديل الرسم البياني لاستخدام العناصر المخصّصة لعرض بيانات الاستخدام الشهرية الكاملة، كما هو موضّح على chromestatus.com. كان الإصدار السابق من هذه المشاركة يحتوي على رسم بياني بدقة 6 أشهر، بدون الأشهر الأخيرة. كانت سلاسل V0 وV1 في الرسم البياني الأصلي مُجمَّعة، ويتم عرضها الآن بدون تجميع مع خط إجمالي لإزالة الغموض. يرجع الارتفاع المفاجئ في أواخر عام 2017 إلى تغيير في نظام جمع البيانات على chromestatus.com. وقد أثّر هذا التغيير في الإحصاءات لجميع ميزات نظام الويب، ما أدّى إلى قياسات أدق من الآن فصاعدًا.