في عالم تطوير مواقع الويب المُستمر، يعمل المُطورون باستمرار على البحث عن أدوات وتقنيات تُساعد على تحسين تجربة المستخدم وتبسيط تفاعل مواقع الويب. أحد هذه الأدوات الحديثة والفعّالة هي مكتبة htmx، التي تُقدم نهجًا مُبتكرًا لتطوير مواقع الويب بشكل أسرع وأكثر سلاسة.
لقد انشغل مجتمع تطوير الويب مؤخرًا بالحديث عن htmx، ولكن ما هي هذه التقنية الجديدة والمُثيرة؟ اتضح أنَّ الأمر أبسط بكثير مما قد تتوقعه، ولكن فائدة htmx قد تُبرر هذه الضجة المُصاحبة.
في هذا السياق، يتناول مقالنا الجديد كيفية استخدام htmx لتسهيل وتحسين أداء موقع الويب الخاص بك. سنقوم بفحص ميزات هذه التقنية وكيف يُمكنها تيسير التفاعل بين المستخدم وموقع الويب بشكل أفضل. سنتناول الحالات الاستخدامية التي تُناسب htmx وكيف يُمكن للمطورين الاستفادة القصوى من قدراتها لجعل موقع الويب أكثر تفاعلية. تحقق من تحسين تطوير الويب باستخدام عناصر HTML مُبتكرة وفعّالة: نصائح لتطوير مهاراتك.
ما هي htmx؟
htmx هي مكتبة جافا سكريبت صغيرة ذات تركيز ضيق. فهي تجعل وظائف JavaScript الشائعة مُتاحة عبر سمات HTML. إليك مثال بسيط:
<a href="/about" hx-get="/about">About</a> يعرض هذا الكود سمة HTML مُخصصة، hx–get. إذا قمت بالنقر فوق هذا الارتباط، فسترسل مكتبة htmx طلب AJAX وتحميل الصفحة المُستهدفة دون تحديث المتصفح بالكامل.
تحتوي htmx على وظائف إضافية تُتيح لك إرسال الطلبات:
- من عناصر أخرى غير a و form.
- في الأحداث الأخرى غير النقر والإرسال.
- استخدام طرق HTTP بخلاف GET و POST.
- يؤدي ذلك إلى استبدال أي أجزاء من الصفحة بدلاً من كل شيء فقط.
على الرغم من أنَّ htmx تدعم تقنيات مثل الرسوم المُتحركة لـ CSS و WebSockets، إلا أنَّ هدفها الأساسي هو تبسيط معالجة طلبات HTTP.
كيف يُمكنك استخدام htmx في تطبيق ويب بسيط
تُعالج htmx وظائف مُحددة ضمن تطبيقات الويب أو مواقع الويب، بدلاً من سلوك التطبيق بأكمله.
إحدى المزايا الكبيرة للمكتبة هي مدى سهولة البدء في استخدامها. يُمكنك تنزيل نسخة وتثبيتها إذا أردت، ولكن نظرًا لعدم وجود تبعيات لها، كل ما عليك فعله للبدء هو إضافة رابط إلى البرنامج النصي على CDN:
<script
src="https://unpkg.com/htmx.org@1.9.10"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script> للتطوير والاختبار المحلي، ستحتاج إلى إعداد خادم ويب، مثل Apache، إذا لم يكن لديك خادم قيد التشغيل بالفعل. يُعد هذا أحد المتطلبات، حتى لو كنت تقوم فقط بتجربة الملفات الثابتة، لأنَّ الملف: البروتوكول لا يسمح بطلبات AJAX.
مثال بسيط باستخدام التمرير اللانهائي
ملاحظة: يُمكنك تنزيل هذا المثال البسيط من مستودع GitHub الخاص به.
يُعد التمرير اللانهائي أسلوبًا شائعًا تستخدمه مواقع الويب مثل Twitter في خلاصتها. عندما تصل إلى أسفل القائمة، يقوم التمرير اللانهائي بتحميل المزيد من العناصر لمواصلة القراءة.
تتطلب هذه الميزة بطبيعة الحال من JavaScript التحقق من موضع تمرير الصفحة وتحميل العناصر الجديدة دون تحديث الصفحة. ولكن يُمكن لـ htmx القيام بكل هذا نيابةً عنك.
خذ العلامة التالية التي تُمثل قائمة المنشورات، مع استخدام صورة لكل منها:
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol> تخيل أنَّ لديك هذه العناصر في ملف، Feed1.html، مع المزيد من العناصر في ملف Feed2.html، وما إلى ذلك. ستعرض كل صفحة بعد ذلك مجموعة فرعية صغيرة من العناصر التي يُمكنك التمرير داخلها:
الآن، يُمكنك استخدام روابط “الصفحة التالية” للانتقال من صفحة إلى أخرى، ولكن يُمكنك تنفيذ التمرير اللانهائي بسهولة أيضًا. فقط قم بتغيير العنصر الأخير إلى:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li> تؤدي إضافة هذه السمات الأربع إلى عنصر القائمة النهائي إلى تنفيذ التمرير اللانهائي. إليك ما تعنيه كل سمة:
| السمة | القيمة | المعنى |
|---|---|---|
| hx-trigger | revealed | عندما يظهر هذا العنصر لأول مرة على الشاشة… |
| hx-get | feed2.html | … أرسل طلب GET إلى Feed2.html، … |
| hx-select | li | … حدد عناصر li من الاستجابة، … |
| hx-swap | afterend | … وقم بإضافتها بعد هذا العنصر. |
أثناء التمرير إلى أسفل القائمة، لاحظ كيف تقوم الصفحة بتحميل المحتوى الجديد تلقائيًا. يُمكنك تأكيد ذلك من خلال مراقبة شريط التمرير والتحقق من أدوات المطور في متصفحك:
لاحظ أنه، باستخدام هذا الإعداد البسيط للصفحة الثابتة، تتضمن صفحة Feed2.html عنصرًا نهائيًا مع تعيين السمة hx-get على Feed3.html، وهكذا. لاحظ أيضًا كيف أضافت مكتبة htmx مُستمعًا لحدث التمرير. تحقق من كيفية إيقاف التمرير اللانهائي لموقع ويب مُعين.
استخدامات مُحتملة أخرى لـ htmx
يُمكنك استخدام htmx للعديد من التفاعلات الشائعة الأخرى، بما في ذلك:
- ترقيم الصفحات: تحميل العناصر واستبدالها عندما ينقر الزائر على رابط ترقيم الصفحات.
- التحقق من صحة النموذج: عند الإرسال، استبدل النموذج إما برسالة تأكيد أو بمجموعة فرعية من النموذج.
- أشرطة التقدم: قم بتحديث قيمة شريط التقدم بشكل دوري بناءً على استجابة ping.
- التحرير المضمّن: استبدل عنصرًا بمنطقة نصية تحتوي على قيمة هذا العنصر.
من المُمكن إنشاء كل من هذه الأمثلة باستخدام جافا سكريبت القياسية، ولكن htmx تجعل العملية أسهل بكثير.
فوائد وعيوب htmx
الفوائد التي يُمكن الحصول عليها
يُمكن لـ htmx تبسيط التفاعلات الشائعة إلى حد كبير والتي يُمكن أن تُفيد العديد من تطبيقات الويب، وحتى العديد من مواقع الويب. فهي تسمح للمُصممين وغيرهم ممن يعملون مع صفحات الويب الأمامية بإضافة وظائف دون الحاجة إلى تعلم JavaScript.
من خلال تلخيص السلوك الشائع، تضمن htmx الاتساق عبر مشاريعك وفيما بينها. سوف يتصرف التمرير اللانهائي بنفس الطريقة من صفحة إلى أخرى، بغض النظر عمن قام بتنفيذه.
نظرًا لأنها تُؤكد على النهج التعريفي (ماذا) بدلاً من النهج الحتمي (كيف)، فإنَّ وظيفة htmx عادةً ما تكون أسهل في الفهم والتفكير.
العيوب التي يُمكن مُواجهتها
على الرغم من أنَّ htmx يمكن أن تسمح لك بنسيان جافا سكريبت في العديد من السياقات، إلا أنه لا يُمكنها حل كل مشكلة بالنسبة لك! ستظل بحاجة إلى كتابة التعليمات البرمجية للتعامل مع منطق عمل مُحدد والمزيد من الوظائف ذات المستوى المنخفض.
نظرًا لأن htmx تقوم بالكثير من العمل نيابةً عنك، فهناك احتمالية أقل لتخصيص السلوك. غالبًا ما تكون هذه مقايضة إيجابية، لكن عليك أن تكون مستعدًا للتخلي عن السيطرة.
قد تُتيح لك html تجنب كتابة جافا سكريبت، ولكن يجب أن تظل على علم بأن تعليمات جافا سكريبت البرمجية تعمل في الخلفية. قد تميل إلى استخدام السمة hx-get على كل رابط، بدلاً من السمة href. ولكن هذا يقدم تبعية لجافا سكريبت؛ إذا فشل تشغيل الكود لأي سبب من الأسباب، فسيتم ترك رابط لديك لا يفعل شيئًا للمُستخدمين. يجب عليك دائمًا ممارسة التحسين التدريجي لمنع ذلك. يُمكنك الإطلاع الآن على ما هي جافا سكريبت وكيف تعمل؟ مع بعض التعليمات البرمجية.
