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

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

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

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

ما مدى شيوع مكوّنات الويب؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Enterprise: Web components at Salesforce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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