يسهل htmx إضافة وظائف غنية لصفحات الويب. يوضح هذا المقال كيفية تجاوز الأساسيات بدمج htmx مع JavaScript المخصص، وAlpine.js، والمزيد.
يتيح htmx إضافة وظائف غنية لصفحات الويب دون الحاجة لكتابة JavaScript. لكنه يسمح أيضًا بدمج JavaScript إذا لزم الأمر، إما بإضافة دوال مباشرة للعناصر أو بكتابة خطافات (hooks) أكثر تعقيدًا للأحداث.
تتيح هذه السلوكيات استخدام صفحات الويب التي تستخدم JavaScript بالفعل، والانتقال كليًا إلى htmx أو إضافة htmx فقط عند الحاجة، على سبيل المثال، في أجزاء جديدة من التطبيق. بشكل عام، يعمل htmx بشكل أفضل مع التطبيقات الجديدة (green-field applications)، حيث يمكنك البدء بصفحة غير تفاعلية ثم إضافة السلوكيات المطلوبة حسب الحاجة. لكن htmx يمكن أن يعمل أيضًا كإضافة لصفحة تستخدم JavaScript بالفعل، أو كهدف للانتقال بعيدًا عن JavaScript الحالي.
كيف يمكن استخدام htmx مع JavaScript؟
عند الرغبة في دمج htmx مع JavaScript المكتوب يدويًا، يوفر htmx عدة طرق لذلك. بعضها أساسي للغاية، ولكنه مرتبط بإحكام بالكائنات التي يعمل معها. والبعض الآخر أكثر تقدمًا ومرونة، لكنه يتطلب جهدًا أكبر للاستخدام.
استخدام سمات hx-on
تتمثل إحدى الطرق الأساسية لإضافة سلوكيات JavaScript إلى الكائنات في آلية تشبه htmx إلى حد كبير، وهي سمات hx-on. بإضافة إحداها إلى كائن معين، يمكنك توفير تعليمات برمجية أو استدعاءات دوال مباشرة. على سبيل المثال:
انقر هنا للتسجيل في وحدة التحكم
</button>يمكن أن تكون التعليمات البرمجية المضمنة كتلة تعليمات برمجية كاملة، كما هو موضح هنا، أو استدعاء دالة لتعليماتك البرمجية الخاصة.
إحدى مزايا استخدام hx-on هي الاتساق مع سمات hx- الأخرى. إذا كانت جميع تفاعلاتك الحالية مدعومة بواسطة htmx، فإن إضافة المزيد من سمات hx- للوظائف المخصصة يحافظ على التوحيد. من ناحية أخرى، إذا كنت تريد أن تكون وظيفتك المخصصة ميكانيكيًا مميزة عن htmx، ففكر في النهج الذي سيتم مناقشته لاحقًا: تسجيل دوال رد الاتصال.
استخدام واجهة برمجة تطبيقات htmx (API)
باستخدام htmx، يمكنك تسجيل دوال رد الاتصال لأي سلوك.
يوفر كائن htmx مجموعة من الواجهات لتشغيل سلوكيات htmx على الكائنات في DOM. ثلاث من الواجهات الأكثر استخدامًا هي:
الفرق الرئيسي هو أن إضافة سمة مضمنة يتطلب عادةً تغيير كيفية عرض الكائن (على سبيل المثال، من قالب من جانب الخادم).
htmx.onLoad(): يسجل دالة رد اتصال لتشغيلها كلما تمت إضافة محتوى جديد إلى DOM بواسطة htmx، بعد أن يكون htmx قد عالجه بالفعل. بهذه الطريقة، يمكن ربط المحتوى المحمّل ديناميكيًا عبر إجراء جلب (fetch action) بطريقة مخصصة.htmx.ajax(): يصدر طلب htmx مخصصًا، تتم معالجة نتائجه بواسطة htmx وإدراجها في DOM.
يمكن تشغيل جميع السلوكيات التي يكشفها htmx عبر السمات يدويًا من خلال واجهة برمجة التطبيقات. لذا، إذا أردت، يمكنك تخطي ربط الكائنات بإضافة سمات hx-، وبدلاً من ذلك استخدام واجهة برمجة التطبيقات عبر رمز JavaScript الخاص بك.
إلى حد ما، هذا يتعارض مع الغرض من htmx. ولكن قد تكون هناك حالات ترغب فيها في البدء باستخدام htmx دون إضافة تعليقات توضيحية للكائنات، على الأقل في البداية (على سبيل المثال، لتجنب إجراء تغييرات فورية على قوالب HTML الخاصة بك).
استخدام hx-live ودالة q()
قدم htmx 4 ميزة جديدة تسمى hx-live، والتي تتيح لك تحديد الكائنات باستخدام دالة استعلام، q()، وإجراء عمليات عليها باستخدام بناء جملة مشابه لذلك المستخدم لسمات hx-.
يمكن اعتبار q() طريقة أقل إسهابًا لتشغيل document.querySelector() على الصفحة الحالية، ثم العمل مع الكائنات المعادة. معظم ما تفعله باستخدام q() يتضمن معالجات DOM حيث يؤثر سلوك كائن واحد على العديد من الكائنات الأخرى. على سبيل المثال:
تحديد الكل
</button>سيؤدي النقر على الزر إلى تحديد كل عنصر في الصفحة يحمل الفئة item وتبديل وجود الفئة selected على هذا العنصر.
تكشف q() عن بعض الطرق الأخرى بنفس السياق:
take(): يزيل فئة أو سمة من العناصر المحددة، ثم يضيفها إلى العنصر الذي يقوم بالاستدعاء. إنها طريقة ملائمة لأداء إجراء على كل شيء باستثناء العنصر المحدد (على سبيل المثال، جميع الأزرار الأخرى فيdivباستثناء هذا الزر).trigger(): يرسل حدثًا معينًا إلى كل ما يطابق الاستعلام. يتضمن خيارات لمنع الحدث من الانتشار (bubbling) إذا لزم الأمر.
المهم في q() هو أنه يمكنك استخدامه بالكامل خارج سمات htmx، كجزء من دوال JavaScript المكتوبة يدويًا أو دوال رد الاتصال الخاصة بك. يمكنك حتى البدء في إضافة وظائف htmx إلى صفحة باستخدام q() وسلوكياته فقط، جنبًا إلى جنب مع JavaScript، ثم البناء من ذلك لاستبدال وظائف الموقع القديمة بـ htmx بمرور الوقت.
كيف يعمل htmx مع Alpine.js؟
كقاعدة عامة، لا ينبغي خلط أطر عمل الويب الأمامية، وذلك لتقليل الآثار الجانبية والسلوكيات غير المتوقعة. إذا استخدمت htmx لإضافة سلوكيات تفاعلية إلى صفحة، فستحصل على أفضل النتائج إذا كان htmx (وأي JavaScript تدمجه معه) هو المصدر الوحيد للسلوك التفاعلي.
ومع ذلك، يوفر htmx ترتيبات للعمل جنبًا إلى جنب مع طرق أخرى لإضافة التفاعلية. بصرف النظر عن JavaScript المكتوب يدويًا، يمكنك دمج مكتبة Alpine.js.
Alpine.js هي مكتبة JavaScript ذات فلسفة مشابهة لـ htmx. باستخدام Alpine، يمكنك إضافة سلوك إلى العناصر في صفحة ويب عن طريق إضافة سمات خاصة تبدأ بـ x-. على سبيل المثال، x-on:click سيضيف بعض السلوك إلى عنصر عند النقر عليه.
ليس من الصعب رؤية كيف يمكن أن يتعارض هذا السلوك مع htmx، أو العكس. لكن htmx يأتي مع امتداد، hx-alpine-compat، يضمن تمكين سلوكيات Alpine باستمرار والحفاظ عليها نشطة في المكونات التي يتعامل معها htmx.
استكشف مات تايسون من InfoWorld بالتفصيل كيف يمكن لـ htmx وAlpine.js أن يكملا بعضهما البعض.
هل يدعم htmx مكتبات جانب الخادم؟
أطر عمل الويب الخلفية هي بطبيعتها غير مرتبطة بالواجهة الأمامية. لا تميل إلى رؤية إطار عمل ويب يفضل، على سبيل المثال، Bootstrap أو Alpine.js، لأن ذلك يحد فقط من الجمهور المحتمل ويخلق ارتباطات وثيقة غير ضرورية بين الواجهة الأمامية والخلفية.
لكن بعض أطر عمل الويب تقدم دعمًا إضافيًا لواجهات أمامية محددة، بما في ذلك htmx. يمتلك Django وFastAPI مكتبات طرف ثالث توفر ميزات ملائمة للمطورين الذين يبنون واجهات أمامية مدعومة بـ HTMX. كما أن Jinja2، لغة القوالب المستخدمة مع العديد من أطر العمل الخلفية، لديها امتداد طرف ثالث يسمى Jinja2 Fragments يسهل عرض القوالب جزئيًا بحيث يمكن توفير الأجزاء ذات الصلة فقط لعملية جلب htmx.
أحد أطر عمل الويب Python الأحدث، Litestar، يتمتع بدعم أصلي لـ htmx. يتيح لك هذا عرض قوالب خاصة بـ htmx يتم ملؤها تلقائيًا بسمات خاصة بـ htmx مثل عناصر الهدف أو أسماء الأحداث.
الجاذبية الكبيرة لـ htmx تكمن في كيفية تجنبه للتعقيدات المتأصلة في JavaScript. فهو يمنحك الغالبية العظمى من الوظائف التفاعلية التي تحتاجها لصفحة ويب عن طريق بناء جملة HTML التصريحية. في الوقت نفسه، يترك htmx الباب مفتوحًا لدمج JavaScript، وللعمل جنبًا إلى جنب مع Alpine.js، ولأطر عمل الويب التي تختار العمل بشكل أوثق مع نهج htmx المبسّط.
جرّب الأداة: منسق ومتحقق JSON
