إزاي تستخدم Web Components ببساطة وذكاء
يوليو 6, 2025إزاي تستخدم Web Components ببساطة وذكاء
كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيقة إنك ممكن تستخدمها بطريقة أسهل بكتير، وتركز على تعزيز (Enhance) صفحات HTML عادية بتطلع من السيرفر من غير أي تعقيد.
المشكلة: بنعقد نفسنا زيادة عن اللزوم
بعض المطورين بيبدأوا يستخدموا Web Components وبيفترضوا إنهم محتاجين يعملوا Shadow DOM، ويضيفوا أدوات Routing، وإدارة State، كأنهم بيبنوا SPA كاملة.
بس ده مش الهدف الأساسي من Web Components. هي أداة بسيطة تقدر تستخدمها عشان تضيف تفاعلات صغيرة على الـ HTML اللي السيرفر جايبه لك.
الحل: استخدم Web Components للتحسين التدريجي
يعني ببساطة، إنت بتعرض صفحة HTML عادية فيها عناصر متاحة لكل المستخدمين، وبعدين تضيف فوقها شوية سلوك تفاعلي من خلال JavaScript.
مثال عملي: كارت تسعير
تخيل عندك الكود ده:
<pricing-card>
<price-option class="monthly hidden">99 جنيه / شهر</price-option>
<price-option class="yearly">999 جنيه / سنة</price-option>
</pricing-card>
المستخدم يشوف السعر السنوي بشكل افتراضي. لما يغير نوع الاشتراك (مثلاً من خلال زرار)، Web Component هيبدّل بين السعرين:
class PricingCard extends HTMLElement {
connectedCallback() {
this.addEventListener('change', () => {
this.querySelector('.monthly').classList.toggle('hidden');
this.querySelector('.yearly').classList.toggle('hidden');
});
}
}
customElements.define('pricing-card', PricingCard);
ليه الطريقة دي قوية؟
- HTML شغال كويس من غير جافاسكريبت
- الكومبوننت بيتفاعل مع الصفحة من غير أي إطار عمل
- أداء عالي وسريع في التحميل
- كودك بيشتغل على كل المتصفحات الحديثة بدون تعديلات
مثال تاني: إضافة عناصر لقائمة
عايز تخلي المستخدم يضيف عناصر جديدة في القائمة؟ تقدر تستخدم template:
<dynamic-list>
<ul></ul>
<button>أضف عنصر</button>
<template>
<li>عنصر جديد</li>
</template>
</dynamic-list>
وجافاسكريبت بسيط زي ده:
class DynamicList extends HTMLElement {
connectedCallback() {
this.template = this.querySelector('template');
this.list = this.querySelector('ul');
this.querySelector('button').addEventListener('click', () => {
const item = this.template.content.cloneNode(true);
this.list.appendChild(item);
});
}
}
customElements.define('dynamic-list', DynamicList);
طرق تمرير البيانات داخل الكومبوننت
- عن طريق خصائص زي
data-user-id، وتقرأها بـthis.dataset.userId - عن طريق الأحداث (Custom Events)
- عن طريق دوال عامة في الكلاس تتنادي من بره
أمثلة من الواقع
- استخدام Web Component لعرض Chart.js بتتحدث تلقائي لما البيانات تتغير
- دمج بوابة دفع Stripe جوا عنصر مخصص بيتحمل بعد ما السكريبت الرئيسي يوصل
- مشاركة الحالة بين أكتر من عنصر باستخدام Nanostores مع Web Components
الخلاصة
Web Components مش لازم تكون بديل كامل للفريموركات. استخدمهم بحكمة، خليك بسيط، وخليهم أدوات لتحسين تجربة المستخدم من غير ما تعقّد الكود أو تستهلك البراوزر.
المدونة
يونيو 03, 2025
لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...
يوليو 01, 2025
🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...
يوليو 07, 2025
Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...
يونيو 26, 2025
مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS – BEM والـ utility‑first classes وك...
يوليو 30, 2025
لماذا السرعة ليست رفاهية؟ في زمن الضغط والسرعة، ما فيش حد عنده وقت يستنى موقع يحمّل! المستخدمين على الموبايل بينسحبوا من الموقع إذا ما فتحش في أق...
يوليو 07, 2025
إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...