يُثبت htmx أنك لا تحتاج إلى إطار عمل JavaScript ثقيل لبناء تطبيقات ويب ديناميكية. فبتوسيع HTML بسمات قوية، يتيح htmx واجهات مُصيَّرة من الخادم تبدو وكأنها تطبيقات صفحة واحدة (SPA).
لماذا htmx؟
- لا حاجة لخطوة بناء JavaScript
- يعمل مع أي لغة خلفية
- حجم حزمة أصغر (~14KB مضغوطة)
- تحسين تدريجي افتراضياً
المفاهيم الأساسية
<!-- Load content on click -->
<button hx-get="/api/users" hx-target="#users" hx-swap="innerHTML">
Load Users
</button>
<div id="users"></div>
<!-- Form with loading indicator -->
<form hx-post="/api/contact" hx-indicator=".loader">
<input name="email" type="email" required>
<button type="submit">
<span class="loader" style="display:none">...</span>
Submit
</button>
</form>
<!-- Infinite scroll -->
<div hx-get="/api/posts?page=2" hx-trigger="revealed" hx-swap="afterend">
Post content here...
</div>
htmx مع Laravel
// routes/web.php
Route::get("/users", function () {
$users = User::paginate(10);
return view("partials.users", compact("users"));
});
متى تستخدم htmx
htmx رائع لـ:
- التطبيقات المُصيَّرة من الخادم
- إضافة التفاعلية إلى التطبيقات القائمة
- الفِرَق التي لا تضم متخصصي واجهات أمامية
- الصفحات الحساسة للأداء
التعليقات (0)
اترك تعليقًا
لا توجد تعليقات بعد. كن أول من يشارك أفكاره!