htmx

مكتبة htmx (أو HTMX ) هي مكتبة جافا سكريبت مفتوحة المصدر للواجهة الأمامية ، تُوسّع لغة HTML بخصائص مُخصصة تُتيح استخدام AJAX مباشرةً في HTML، وذلك من خلال نهج يعتمد على الوسائط المتعددة . تسمح هذه الخصائص بتحديد صفحة الويب ديناميكيًا مباشرةً في HTML و CSS ، دون الحاجة إلى كتابة جافا سكريبت إضافية. وبذلك، تُصبح المهام التي كانت تتطلب كتابة جافا سكريبت سابقًا مُنجزةً بالكامل باستخدام HTML. وقد طوّر هذه المكتبة كارسون غروس كإصدار جديد من مكتبة intercooler.js .

تدعم المكتبة الاتصال بالخادم باستخدام طرق HTTP القياسية ، وتُسهّل إدراج استجابات الخادم (عادةً ما تكون نصوصًا أو أجزاءً من HTML) في أجزاء مُحددة من صفحة الويب دون الحاجة إلى إعادة رسم الصفحة بأكملها. وهذا بدوره يُتيح سلوكًا مُشابهًا لما يُمكن تحقيقه من خلال آلية التوفيق في نماذج DOM الافتراضية .

يعود أصل مكتبة htmx إلى مكتبة intercooler.js، وهي مكتبة واجهة أمامية أنشأها كارسون غروس عام 2013. ^{[ 4 ]} هدفت المكتبة إلى معالجة التعقيد المرتبط بتقنية AJAX (جافا سكريبت غير المتزامنة و XML ) من خلال تقديم منهج مبسط باستخدام سمات HTML. ^{[ 5 ]} كان الهدف هو إنشاء إطار عمل يتماشى مع رؤية روي فيلدينغ الأصلية لتقنية REST (نقل الحالة التمثيلية)، وتحديدًا HATEOAS (الوسائط المتعددة كمحرك لحالة التطبيق). وقد وُصفت هذه المشكلة في مقالة فيلدينغ على مدونته بعنوان "يجب أن تكون واجهات برمجة تطبيقات REST مدفوعة بالنصوص التشعبية" المنشورة في أكتوبر 2008. ^{[ 6 ] [ 7 ]}

تم إنشاء htmx كنسخة محسّنة من intercooler.js لا تعتمد على jQuery، وقد صدرت النسخة 1.0.0 في نوفمبر 2020. ^{[ 8 ]} شكّل إصدار htmx علامة فارقة للمشروع، إذ وفّر طريقة لاستخدام AJAX، وانتقالات CSS ، و WebSockets ، وServer-Sent Events مباشرةً في HTML باستخدام السمات. ^{[ 9 ]}

في عام 2023، أُضيف مشروع htmx إلى الدفعة الأولى من برنامج GitHub Accelerator، وهو برنامج يوفر التمويل والتوجيه لمشاريع المصادر المفتوحة من أعضاء مشاريع المصادر المفتوحة الناضجة. ^{[ 10 ]}

يجمع htmx بين إمكانيات الأطر البرمجية الحديثة ومعالجة جانب الخادم لتطبيقات الويب التقليدية. ^{[ 11 ]} تتمحور فلسفة تصميم المكتبة حول هدف "إكمال HTML كنص تشعبي ". ^{[ 12 ]} من خلال الاستفادة من سمات HTML المخصصة التي تبدأ بـ ` <a>` hx-لتفعيل طلبات AJAX لجلب المحتوى وتحديث أجزاء من DOM ، يُمكّن htmx المطورين من تحديد السلوك الديناميكي مباشرةً ضمن ترميزهم، مما يقلل أو حتى يلغي الحاجة إلى كتابة أكواد JavaScript مطولة. ^{[ 13 ] [ 14 ]} يسمح هذا للمكتبة بتجنب مشاكل الحزم الكبيرة ، ^{[ 15 ]} وإدارة الحالة المعقدة ، والترطيب . ^{[ 16 ]} يوفر هذا النهج طريقةً أكثر سهولةً وبديهيةً لبناء واجهات مستخدم حديثة مع تجنب التعقيدات المرتبطة غالبًا بأطر JavaScript التقليدية. ^{[ 17 ]} بما أن لغة HTMLX قادرة على تحديث أجزاء محددة من صفحة الويب دون الحاجة إلى إعادة تحميل الصفحة بأكملها، كما هو الحال مع HTML وCSS العاديين، فإن استخدامها قد يؤدي إلى تحسين تجربة المستخدم والأداء، حيث لا يلزم سوى إعادة جلب جزء من البيانات من الخادم. ^{[ 18 ]}

تُشكك هذه المكتبة أيضًا في النهج الشائع لاستخدام JSON كحمولة قياسية لطلبات HTTP ، وذلك باستبداله بـ HTML. ^{[ 5 ]} يهدف هذا إلى حل المشكلات المتعلقة بأداء وعبء معالجة JSON ، بدءًا من التسلسل وفك التسلسل، وصولًا إلى الاستخدام اللاحق في واجهة المستخدم، مثل عدم قدرة JavaScript وJSON على معالجة الأرقام الأكبر من 2^ ⁵³ بدقة ، أو التمييز بين الأعداد العشرية والأعداد الصحيحة ، بالإضافة إلى التعقيد المصاحب لبدائل REST الموجهة نحو JSON، مثل GraphQL أو gRPC . ^{[ 19 ]} علاوة على ذلك، تتمثل إحدى المزايا المحتملة لـ htmx والنهج الموجه نحو النصوص التشعبية بشكل عام، في أن البيانات المسترجعة مباشرة من قاعدة البيانات لا تحتاج إلى أن تكون بتنسيق JSON أو بتنسيق متوافق معه، كما هو الحال في العديد من قواعد بيانات المستندات أو نوع JSON في PostgreSQL ، أو أن يتم تسلسلها بواسطة الواجهة الخلفية ثم فك تسلسلها بواسطة الواجهة الأمامية مرة أخرى. ^{[ 20 ]} كما يُسهم تقليل العمليات الحسابية على جانب العميل في تحويل تركيز التطوير نحو الواجهة الخلفية، مما قد يؤدي إلى تحسين أداء جانب العميل، وإن كان ذلك على حساب زيادة الحمل على الخادم، ويوفر للمطورين طريقةً أبسط لحل المزيد من المشكلات التي كانوا سيحلونها باستخدام جافا سكريبت من جانب العميل في أي لغة برمجة أخرى تقريبًا. ^{[ 21 ]}

يُضيف htmx سمات مُخصصة إلى HTML لتحديد سلوك ديناميكي، مثل إرسال طلبات إلى الخادم وتحديث المحتوى. تعتمد وظائف htmx على السمات hx-get` <input> ` hx-postو` <select>` و` <textarea>` و`<form>` و`<form>` و`<form >`، والتي تُرسل طلبات AJAX باستخدام طريقة HTTP المُحددة. ^{[ 11 ] [ 18 ]} تُرسل هذه الطلبات عند حدوث حدث DOM مُعين: `<input>` و`<select>` و` <textarea >`؛ `<form> `؛ و` <form> ` للعناصر الأخرى. ^{[ 11 ]} يُمكن أيضًا تجاوز هذا الحدث باستخدام `<form>` . ^{[ 22 ]} تتضمن السمات الأخرى ` <form>` لتحديد هدف آخر غير العنصر الحالي لتبديل المحتوى إليه، و` <form> ` لتحديد كيفية تبديل المحتوى المُستجلب من الخادم أو وضعه بالنسبة إلى العنصر الهدف. ^{[ 23 ] [ 24 ]}hx-puthx-deletehx-patchchangesubmitclickhx-triggerhx-targethx-swap

منذ نشأتها باسم intercooler.js وتطورها اللاحق إلى htmx، حظيت المكتبة بشعبية واسعة في أوساط مطوري الويب. ^{[ 25 ] [ 26 ]} يُنظر إلى htmx كبديل أبسط وأخف وزنًا لأطر عمل جافا سكريبت المتكاملة مثل React و Vue.js و Angular . ^{[ 27 ] [ 28 ]} ونتيجة لذلك، اكتسبت شعبية كبديل للنهج الذي تستخدمه معظم أطر عمل جافا سكريبت لبناء تطبيقات ويب ديناميكية. ^{[ 29 ]}

تم تطوير تكاملات htmx للعديد من أطر عمل الويب المتكاملة/الخلفية، ولغات البرمجة، ومحركات القوالب، بما في ذلك Node.js و Django و Flask و Adobe ColdFusion و ASP.NET و Java و Clojure و Ruby on Rails . ^{[ 30 ]} عادةً ما تكون هذه المكتبات مجرد وسيلة للتسهيل، حيث يسمح تصميم htmx البسيط والمحمول بدمجه مع أي محرك قوالب HTML تقريبًا. ^{[ 12 ]}

• مقارنة بين أطر عمل الويب القائمة على جافا سكريبت
• React (مكتبة جافا سكريبت)

• الموقع الرسمي
• ملف htmx على GitHub