مقدمة إلى HTMX

htmx هي مكتبة JavaScript خفيفة الوزن تُستخدم لإنشاء واجهات ويب تفاعلية بطريقة بسيطة وحديثة دون الحاجة إلى كتابة كميات كبيرة من JavaScript. فلسفة HTMX هي “لماذا يجب أن يكون AJAX صعبًا؟”. تتيح htmx إضافة سلوكيات ديناميكية إلى صفحات HTML باستخدام سمات (Attributes) مضافة مباشرة إلى العناصر، مما يجعلها مناسبة للمطورين الذين يرغبون في بناء تطبيقات ويب تفاعلية بأقل مجهود. بدلاً من الاعتماد على أطر عمل معقدة مثل React أو Vue، تُمكّن htmx المطورين من تحسين صفحات HTML التقليدية لتصبح تفاعلية بسهولة.

المزايا والعيوب

المزايا (Pros)

بساطة فائقة وتقليل الاعتماد على JavaScript
تحسين تدريجي للصفحات الموجودة (Progressive Enhancement)
متوافق مع أي لغة خلفية (Backend) تولد HTML
حجم صغير جدًا وأداء سريع

العيوب (Cons)

غير مناسب للتطبيقات المعقدة التي تتطلب حالة (State) متقدمة من جانب العميل
يعتمد على الخادم لتوليد HTML، مما قد يزيد الحمل على الخادم
يتطلب تغيير طريقة التفكير للمطورين المعتادين على SPAs

أبرز مميزات HTMX

سهولة الاستخدام: لا تحتاج لكتابة JavaScript بشكل يدوي. كل شيء يتم عبر سمات HTML.
تفاعل ديناميكي: تحديث أجزاء من الصفحة بدون تحميل كامل للصفحة باستخدام AJAX.
تحكم مباشر من HTML: الكود يصبح أكثر وضوحًا وبساطة لأنه يصف السلوك مباشرة في العنصر.
حجم خفيف جدًا: أقل من 10KB مضغوط، مما يجعله سريع التحميل.
تكامل ممتاز مع الخوادم: يتكامل بسهولة مع أي خادم يقدم استجابات HTML.

كيف يعمل htmx؟

عندما يقوم المستخدم بالنقر على زر أو إرسال نموذج، يقوم htmx بإرسال طلب AJAX إلى الخادم، ويقوم بتحديث جزء من الصفحة بناءً على استجابة HTML من الخادم، كل ذلك دون الحاجة إلى إعادة تحميل الصفحة بالكامل.

التثبيت

💻 مثال للبحث المباشر

    
<h3>بحث عن مستخدمين</h3>
<input 
type="search" 
name="q" 
hx-post="/search" 
hx-trigger="keyup changed delay:500ms" 
hx-target="#search-results"
placeholder="ابحث هنا..."
>
<div id="search-results"></div>

الخادم: سيقوم الخادم بالاستماع لطلبات POST على مسار /search، والبحث عن المستخدمين بناءً على الاستعلام، وإرجاع النتائج كـ HTML.