مقدمة إلى Alpine.js لتطوير الواجهات الأمامية

Alpine.js هي مكتبة JavaScript خفيفة موجهة لتطوير واجهات المستخدم التفاعلية، وتُعد بديلاً بسيطًا وخفيفًا لإطارات مثل Vue و React في المشاريع الصغيرة أو المتوسطة. تعتمد على كتابة التعليمات التفاعلية مباشرة داخل HTML باستخدام خصائص مخصصة x-*، مما يجعلها مشابهة في الفكرة لـ jQuery ولكن بأسلوب حديث ومُنظم.

المزايا الرئيسية لـ Alpine.js

خفيف الوزن (حجمه ~7KB فقط).
لا حاجة إلى حزمة بناء (Build Process)، يعمل مباشرة في المتصفح.
تركيبة سهلة تشبه Vue (مثل x-data، x-show). -تحميل سريع جدًا ولا يؤثر على الأداء العام للصفحة
مثالي للمشاريع الصغيرة أو إضافة تفاعلات سريعة دون تعقيد.
مناسبة للمكونات التفاعلية الصغيرة مثل القوائم المنسدلة، النماذج، التبديل بين العناصر، إلخ.

حالات الاستخدام الشائعة

إضافة قوائم dropdowns أو modals سريعة.
إنشاء نماذج (forms) تفاعلية دون تعقيد.
تحديث المحتوى ديناميكيًا دون إعادة تحميل الصفحة.
إذا كنت تستخدم HTML وTailwind CSS وتحتاج إلى تفاعلية سريعة.

الأوامر الرئيسية

الخاصية	الاستخدام	مثال
`x-data`	تعريف البيانات	`<div x-data="{ count: 0 }">`
`x-bind`	ربط البيانات بخصائص HTML	`<img x-bind:src="imageUrl">`
`x-on`	التعامل مع الأحداث	`<button x-on:click="count++">`
`x-show` / `x-if`	إظهار/إخفاء العناصر	`<p x-show="isVisible">`
`x-model`	ربط القيمة مع عنصر الإدخال	`<input x-model="name">`

كيف تعمل Alpine.js؟

عند تضمين Alpine في صفحتك، تقوم المكتبة بتحليل تعليمات x-* داخل عناصر HTML وتقوم بتحديث DOM تلقائيًا عند تغيير البيانات، دون الحاجة لإعادة تحميل الصفحة أو إنشاء مكونات معقدة.

<div x-data="{ open: false }">
  <button @click="open = !open">إظهار/إخفاء</button>
  <p x-show="open">مرحبًا بك في Alpine.js</p>
</div>

التثبيت

💻 مثال تفاعلي

    
      
<div x-data="{ isOpen: false }">
<button 
  @click="isOpen = !isOpen"
  class="dropdown-btn"
>
  القائمة المنسدلة
</button>

<div 
  x-show="isOpen"
  class="dropdown-menu"
>
  {/*
      المحتوى هنا
  */}
</div>
</div>

جرب هذا المثال على CodePen.