إزاي تستخدم 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 مش لازم تكون بديل كامل للفريموركات. استخدمهم بحكمة، خليك بسيط، وخليهم أدوات لتحسين تجربة المستخدم من غير ما تعقّد الكود أو تستهلك البراوزر.

المدونة

تاريخ React – استعراض شامل وتحليل تقني

يوليو 26, 2025

1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...

تعزيز PHP Enums باستخدام archtechx/enums

يوليو 01, 2025

تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP&nbsp;8.1، ظهر نوع جديد اسمه &ldquo;enums&rdquo; بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...

استدعاء ملفات JavaScript عند الحاجة فقط لتحسين أداء موقعك

يوليو 24, 2025

🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

هل لارافيل بطيء؟ تحسين أداء الاستعلامات والفهارس بأمثلة

يوليو 20, 2025

دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...

The Ultimate Managed Hosting Platform