Alpine.js هو إطار عمل مميز و فى نفس الوقت بسيط بإستخدام JavaScript. تتميز هذه المكتبة بصغر حجمها مقارنتًا بالمكتبات الاخرى التى تؤدى نفس الغرض مثل React و Vue.
محتوي المقال
ماهى AlpineJs
هى مكتبة مبنية على جافاسكربت توفر طريقة سهلة للتفاعل مع محتويات DOM لانشاء صفحات تفاعلية.
يمكن استخدام alpine كبديل لـ jQuery أو حتى Angular أو React أو Vue التي تستخدمها عادةً للواجهات سريعة الاستجابة.
وتتيمز المكتبة بصغر حجمها حيث انها لا تتعدى 2 كيلو بايت عند ضغطها, يمكنك ببساطة ادارجها فى ملف HTML اما بإستخدام CDN او حتى مباشرتًا من ملفات المشروع الخاص بك.
يتم وضع الكود التالى قبل نهاية وسم head.
كيفية تركيب AlpineJS
كما يمكنك ادراج اصدار معين على سبيل المثال https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer ></script>
مثال على استخدام AlpineJS
<div x-data="{ open: false }"> <button @click="open = true">فتح القائمة</button> <ul x-show="open" @click.away="open = false"> محتوى القائمة </ul> </div>
المثال السابق يوضح كيفية استخدام Alpine فى عمل قائمة منسدلة Dropdown, يتم استخدام البادئة x-data لتعريف States الخاصة بالمكتبة و State هى الحالة التى تقوم المكتبة بمراقبتها بشكل مستمر لتغير شكل DOM بناء علي هذه States.
اين يمكننى معرفة المزيد عن AlpineJS
يمكنك دئمًا الرجوع إلى الموقع الرسمى للمكتبة https://alpinejs.dev/ الذى يحتوى الكثير من الامثلة والشرح الدقيق لكل خصائص المكتبة.
كما يمكنك ايضًا متابعه هذا الموقع العربى الذى يقدم توثيق كامل للمكتبة باللغة العربية https://alpinejs.abdelhadi.org
