htmx: القطعة المفقودة في صندوق أدوات تطوير الويب الخاص بك

برمجة منذ 10 أشهر

درس تعليمي لـ htmx: بناء تطبيقات ويب ديناميكية بقوة النص الفائق

htmx هو إطار عمل ويب حديث يسمح لك ببناء واجهات مستخدم ديناميكية وتفاعلية باستخدام سمات HTML مألوفة. نسي إطارات جافاسكريبت الثقيلة؛ مع htmx ، تتحكم في التفاعلات وتسلسلات الخادم مباشرة من HTML الخاص بك ، مما يجعل التطوير أبسط وأكثر حدسة.

سيأخذك هذا البرنامج التعليمي عبر المفاهيم الأساسية لـ htmx ، من طلبات AJAX الأساسية إلى وظائف متقدمة مثل التحقق من صحة النموذج وتحديثات الوقت الحقيقي.

البدء:

تضمين htmx: أضف علامة نص htmx إلى قسم <head> في HTML الخاص بك. يمكنك استخدام شبكة CDN أو تنزيل المكتبة مباشرة.

HTML

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

استخدام HTML: هذا كل ما تحتاجه على جانب العميل! يستفيد htmx من سمات HTML لتحديد التفاعلات. لا توجد وظائف أو إطارات جافاسكريبت معقدة.

التفاعلات الأساسية:

إرسال الطلبات: استخدم سمات hx-get و hx-post و hx-put و hx-delete على عناصر مثل الأزرار أو الروابط لتشغيل طلبات HTTP مختلفة.

HTML

<button hx-get="/products/123" hx-swap="#product-details">عرض التفاصيل</button>

تحديث DOM: حدد كيفية إدراج استجابة الخادم في الصفحة باستخدام سمات مثل hx-swap (استبدال العنصر) ، hx-append ، hx-prepend ، وغيرها.

HTML

<div id="product-details"></div>

**التحسين: ** عزز التحوّلات مع hx-target لتحديد العنصر الذي سيتم تحديثه ، و hx-animate لإضافة فئات CSS لتحسينات سلسة.

الميزات المتقدمة:

النماذج: يتكامل htmx بسهولة مع نماذج HTML. استخدم hx-include على عنصر لإرسال النموذج وتحديث الصفحة ديناميكيًا بالاستجابة.

HTML

<form id="comment-form">
  <input type="text" name="comment">
  <button hx-include="this" hx-target="#comments">إرسال التعليق</button>
</form>

<div id="comments"></div>

WebSocket: يستخدم htmx Websockets للاتصال في الوقت الحقيقي. أنشئ اتصالاً باستخدام hx-ws وحدد مستمعي الأحداث لتلقي التحديثات وعرضها بشكل ديناميكي.
التحقق من الصحة: استفد من واجهة برمجة تطبيقات التحقق من صحة HTML5 بالاقتران مع hx-trigger لإرسال النموذج تلقائيًا أو تشغيل الإجراءات عند التحقق من صحة النموذج بنجاح.

مصادر التعلم:

الموقع الرسمي: https://htmx.org/
الوثائق: https://htmx.org/docs/
دليل البدء: https://7.dev/getting-started-with-htmx/

تذكر: htmx يدور حول تمكين HTML. حافظ على الأمور بسيطة ، واستفد من ميزات المتصفح الأصلية ، وتمتع ببناء تجارب ويب ديناميكية وسريعة الاستجابة!

مكافأة: تحقق من مجتمع htmx على Discord للدعم والأسئلة والإلهام.

يوفر هذا البرنامج التعليمي مقدمة موجزة لـ htmx. أثناء استكشافك أكثر ، ستكتشف إمكانياته الهائلة وستقدر البساطة والقوة التي يقدمها لتطوير الويب. أتمنى لك الاستمتاع ببناء أشياء رائعة مع htmx!