📋 محتويات الصفحة
📖 الوصف
Alpine.js هو إطار عمل JavaScript خفيف (~15KB) يُقدم reactivity وتركيب declarative مباشر في HTML. يشبه بـ Vue.js لكن أبسط وأخف – لا يحتاج build step في معظم الحالات. يُعتبر Alpine.js الخيار المثالي لإضافة تفاعل بسيط لمواقع HTML عادية بدون الحاجة لإطار عمل كامل. يُستخدم بشكل شائع في مشاريع Tailwind C...
🎯 يستخدم في
مجالات استخدام هذه الأداة
إضافة تفاعل بسيط لمواقع HTML
Tailwind CSS projects (شائع جداً)
Prototyping سريع
مواقع بسيطة (portfolio
landing pages)
تحسين UX بدون framework كامل
✨ المميزات
أبرز مميزات هذه الأداة
خفيف جداً (~15KB)
لا يحتاج build step أو bundler
Declarative في HTML (مثل Vue directives)
سهل التعلم جداً
Reactivity مدمجة
متوافق مع Tailwind CSS
يعمل مع أي backend أو HTML ثابت
⚠️ العيوب
نقاط يجب مراعاتها
محدود للمشاريع الصغيرة والمتوسطة
ليس مناسباً لتطبيقات SPA كبيرة
State management بسيط
لا يحتوي على routing أو state management متقدم
أداء محدود مع بيانات كبيرة جداً
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!DOCTYPE html>
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!-- Counter -->
<div x-data="{ count: 0 }">
<p>العدد: <span x-text="count"></span></p>
<button @click="count++">زيادة</button>
</div>
<!-- Dropdown -->
<div x-data="{ open: false }">
<button @click="open = !open">Toggle Menu</button>
<ul x-show="open" x-transition>
<li>العنصر 1</li>
<li>العنصر 2</li>
<li>العنصر 3</li>
</ul>
</div>
<!-- Fetch Data -->
<div x-data="{ users: [], loading: true }"
x-init="fetch('/api/users').then(r => r.json()).then(data => { users = data; loading = false })">
<p x-show="loading">جاري التحميل...</p>
<ul>
<template x-for="user in users" :key="user.id">
<li x-text="user.name"></li>
</template>
</ul>
</div>
</body>
</html>📚 أدوات أخرى في Frameworks
قد يعجبك أيضاً
Angular
⭐إطار عمل شامل (Full-Featured Framework)
Ember.js
إطار عمل شامل لتطبيقات الويب (Full-Featured Web Framework)
Lit
⭐مكتبة Web Components (Library for Building Web Components)
Marko
إطار عمل خادم أولاً (Server-First Framework)
Mithril
إطار عمل خفيف (Lightweight Frontend Framework)
Preact
⭐بديل خفيف لـ React (React Alternative - Lightweight)