مكوّنات الويب في مؤتمر I/O لعام 2019
في مؤتمر Google I/O لعام 2019، تحدّث "كيفن ساف" من فريق "مشروع البوليمر" و"كاريدي باتينيو" من Salesforce عن حالة مكوّنات الويب.
ما مدى شيوع مكوّنات الويب؟
إذا كنت قد استخدمت الويب اليوم، من المحتمل أنّك استخدمت مكوّنات الويب. وحسب الإحصاءات لدينا، يستخدم ما بين 5% و8% من جميع عمليات تحميل الصفحات اليوم مكوّنًا واحدًا أو أكثر من مكوّنات الويب. وهذا يجعل مكونات الويب واحدة من أنجح ميزات منصات الويب الجديدة التي تم شحنها في السنوات الخمس الماضية.
يمكنك العثور على مكوّنات الويب على المواقع الإلكترونية التي ربما تستخدمها كل يوم، مثل YouTube وGitHub. وتُستخدَم هذه الروابط أيضًا في العديد من المواقع الإخبارية ومواقع النشر التي تم إنشاؤها باستخدام صفحات AMP، كما أنّها تستخدم مكوّنات ويب أيضًا. كما تتبنّى العديد من المؤسسات مكونات الويب.
ما هي مكوّنات الويب؟
إذًا، ما هي مكونات الويب؟ توفِّر مواصفات مكونات الويب مجموعة منخفضة المستوى من واجهات برمجة التطبيقات التي تتيح لك توسيع مجموعة علامات HTML المضمّنة في المتصفّح. توفر مكونات الويب ما يلي:
- طريقة شائعة لإنشاء مكوِّنات (باستخدام واجهات برمجة تطبيقات DOM القياسية).
- طريقة شائعة لتلقّي البيانات وإرسالها (باستخدام المواقع/الأحداث).
خارج هذه الواجهة القياسية، لا تذكر المعايير أي شيء حول كيفية تنفيذ المكون فعليًا:
- محرك العرض الذي يستخدمه لإنشاء نموذج العناصر في المستند (DOM) الخاصة به.
- كيفية تحديث الصفحة أو تعديلها بناءً على التغييرات في خصائصها أو سماتها.
بمعنى آخر، تخبر مكوّنات الويب المتصفّح بالموعد ومكان إنشاء المكوِّن، ولكن ليس الطريقة لذلك.
ويمكن للمؤلفين اختيار أنماط عرض وظيفية تمامًا مثل React لإنشاء مكوّنات الويب الخاصة بهم، أو يمكنهم استخدام نماذج تعريفية كما قد تجدها في Angular أو Vue. بصفتك مؤلفًا، لديك حرية كاملة في اختيار التقنية التي تستخدمها داخل المكون مع الحفاظ على إمكانية التشغيل التفاعلي.
ما فائدة مكونات الويب؟
يكمن الفرق الرئيسي بين مكونات الويب وأنظمة المكوّنات المملوكة، في إمكانية التشغيل التفاعلي. بفضل الواجهة العادية، يمكنك استخدام مكوّنات الويب في أي مكان تستخدم فيه عنصرًا مضمّنًا، مثل <input> أو <video>.
ونظرًا لأنه يمكن التعبير عنها كـ HTML حقيقي، يمكن عرضها بواسطة جميع أطر العمل الشائعة. وبذلك يمكن استخدام المكونات على نطاق أوسع في مجموعة أكثر تنوعًا من التطبيقات، بدون حصر المستخدمين في أي إطار عمل واحد.
ولأن واجهة المكوّنات قياسية، فإن مكونات الويب المنفذة باستخدام مكتبات مختلفة يمكن أن تختلط على الصفحة نفسها. تساعدنا هذه المعلومات في التأكّد من تطوّر تطبيقاتك في المستقبل عند تحديث حزمة التكنولوجيا. بدلاً من تغيير الخطوة العملاق بين إطار عمل وآخر، حيث تستبدل جميع المكونات الخاصة بك، يمكنك تحديث المكونات الخاصة بك واحدًا تلو الآخر.
من يستخدم مكونات الويب؟
لذلك لكل هذه الأسباب، تحقق مكونات الويب بالفعل نجاحًا كبيرًا في مجموعة متنوعة من حالات الاستخدام المختلفة. وقد تم انتشار ثلاث حالات استخدام على وجه الخصوص: مواقع المحتوى، وأنظمة التصميم، وتطبيقات المؤسسات.
مواقع المحتوى
تعتبر مكونات الويب التقنية المثالية للتحسين التدريجي للمحتوى، لأنه يمكن إخراجها بالفعل كـ HTML قياسي بواسطة عدد لا يحصى من أنظمة إدارة المحتوى.
يعد تنسيق AMP مثالاً رائعًا على مدى سرعة وسهولة إدخال مكونات الويب في البنية الأساسية لمجال النشر لعرض المحتوى.
أنظمة التصميم
بدأت المزيد والمزيد من الشركات بتوحيد الطريقة التي تقدم بها أنفسهم باستخدام نظام تصميم — مجموعة من المكونات والإرشادات التي تحدد الشكل والأسلوب الشائعين لمواقع وتطبيقات المؤسسة. تُعد مكونات الويب مناسبة جدًا هنا أيضًا.
في كثير من الأحيان، يتعين على المصممين التعامل مع العديد من الفرق التي تنشئ إصداراتها الخاصة من مكونات نظام التصميم بالإضافة إلى React وAngular وجميع أطر العمل الأخرى، بدلاً من امتلاك مجموعة واحدة من المكونات الأساسية.
الإجابة عن هذا السؤال من خلال مكوّنات الويب: نظام مكوّن من تطبيقات يمكن تشغيله مرة واحدة ويمكن تشغيله في أي مكان على الإطلاق، ما يتيح لفِرق التطبيقات الحرية في استخدام إطار العمل الذي يختارونه
تقوم شركات مثل ING وEA وGoogle بتنفيذ لغة تصميم شركتها في مكونات الويب.
المؤسسة: مكوّنات الويب في Salesforce
تُحقّق مكوّنات الويب أيضًا تقدمًا ملحوظًا داخل المؤسسات كتكنولوجيا آمنة ومستقبلية يجب توحيد معاييرها. أوضحت كاريدي باتينو، مهندس معماري لمنصة واجهة المستخدم في Salesforce، سبب إنشاء منصة واجهة المستخدم الخاصة بها باستخدام مكونات الويب.
Salesforce هي مجموعة من التطبيقات، وقد جاء الكثير منها من عمليات الاكتساب. ويمكن تشغيل كل من هذه الأدوات باستخدام حزمة التكنولوجيا الخاصة بها. ومن الصعب منحهم جميعًا الشكل والأسلوب نفسيهما لأنهما تستندان إلى حزم مختلفة. بالإضافة إلى ذلك، تتيح Salesforce للعملاء إنشاء تطبيقاتهم المخصّصة باستخدام منصّة Salesforce. لذلك من الناحية المثالية، يجب أن تكون المكونات قابلة للاستخدام من قبل المطورين الخارجيين أيضًا.
حددت Salesforce مجموعة من الاحتياجات من عملاء منصتها:
- الحلول العادية بدلاً من الملكية الخاصة، ما يسهّل العثور على مطوّرين ذوي خبرة وأسرع في تعزيز نموهم
- نموذج مكوّن شائع - لذلك يعمل تخصيص أي تطبيق Salesforce بالطريقة نفسها.
وحدّدوا أيضًا بعض الأشياء التي لم يريدها العملاء:
- قد تؤدي إلى إحداث تغييرات في مكوّناتها وتطبيقاتها. بمعنى آخر، كان التوافق مع الأنظمة القديمة ضروريًا.
- عدم القدرة على التطوّر بسبب استخدام التكنولوجيا القديمة
- العالقة داخل حديقة مسوّرة.
أدى استخدام مكونات الويب كأساس لمنصة واجهة المستخدم الجديدة إلى تلبية كل هذه الاحتياجات، والنتيجة هي مكونات ويب Lightning الجديدة.
بدء استخدام مكوّنات الويب
هناك الكثير من الطرق الرائعة للبدء باستخدام مكونات الويب.
إذا كنت تنشئ تطبيق ويب، ففكر في استخدام بعض مكونات الويب العديدة المتاحة. وفي ما يلي بعض الأمثلة في هذا الخصوص:
- تبيع Google نظام تصميم Material الخاص بها كمكوّنات ويب: مكونات Material Web.
- العناصر السلكية هي مجموعة رائعة من مكونات الويب التي تتميز بمظهر مرسوم يدويًا.
- هناك مكونات ويب رائعة ذات أغراض خاصة مثل
<model-viewer>، والتي يمكنك إفلاتها في أي تطبيق لإضافة محتوى ثلاثي الأبعاد.
إذا كنت تقوم بتطوير نظام تصميم لشركتك، أو تبيع مكونًا واحدًا أو مكتبة واحدة تريد أن تكون قابلة للاستخدام في أي بيئة، ففكر في تأليف المكونات الخاصة بك باستخدام مكونات الويب. يمكنك استخدام واجهات برمجة التطبيقات المضمنة لمكونات الويب، لكنها ذات مستوى منخفض جدًا، ولذلك يتوفر عدد من المكتبات لتسهيل العملية.
للبدء في إنشاء مكوناتك الخاصة، يمكنك الاطّلاع على LitElement، وهي فئة أساسية لمكونات الويب طوّرتها Google وتوفّر تجربة عرض وظيفية رائعة تشبه React.
الأدوات والمكتبات الأخرى التي يجب أخذها في الاعتبار:
- Stencil هو إطار عمل يعتمد على مكونات الويب أولاً. وهو يتضمن العديد من ميزات إطار العمل الشائعة، مثل JSX وTypeScript
- توفر العناصر Angular طريقة لالتفاف مكونات Angular كمكوّنات ويب.
- يوفّر برنامج تضمين مكوّنات الويب Vue.js طريقة لتجميع مكونات Vue كمكونات ويب.
مصادر إضافية:
- يقدّم open-wc.org معلومات رائعة عن البدء، بالإضافة إلى نصائح وإعدادات تلقائية لأدوات الإنشاء والتطوير.
- توفّر أساسيات الويب معلومات تمهيدية حول واجهات برمجة التطبيقات لمكوّنات الويب الأساسية وأفضل الممارسات لتصميم مكوّنات الويب.
- توفّر MDN مستندات مرجعية لواجهات برمجة تطبيقات مكونات الويب، بالإضافة إلى بعض البرامج التعليمية. \
صورة رئيسية من تصميم "جايسون توينسترا" على Unسبلاش
ملاحظة المحرِّرين: تم تعديل الرسم البياني لاستخدام العناصر المخصّصة لعرض بيانات الاستخدام الشهري الكاملة، كما هو موضَّح على chromestatus.com. تضمّنت نسخة سابقة من هذه المشاركة رسمًا بيانيًا بدقة 6 أشهر، بدون الأشهر الأخيرة. تم تكديس سلسلتَي V0 وV1 في المخطط الأصلي، وتم عرضهما الآن بدون تكديس بخط إجمالي لإزالة الغموض. ترجع هذه الزيادة المفاجئة في أواخر عام 2017 إلى تغيير في نظام جمع البيانات للموقع chromestatus.com. وقد أثّر هذا التغيير في إحصاءات جميع ميزات النظام الأساسي للويب وأدى إلى إجراء قياسات أكثر دقة من الآن فصاعدًا.