HTMX چیست و چه تفاوتی با HTML دارد ؟

بسیاری از شما دوستان حتما اسم HTML را شنیده و با آن کار کرده‌اید . HTML یک زبان نشانه گذاری برای طراحی صفحات وب است که بدون آن تصور یک سایت غیر ممکن است و تمامی سایت‌های دنیا باید از این زبان استفاده کنند .

زبان HTML به تنهایی یک زبان قدرتمند نیست و دستورات آن بسیار ساده است . اینگونه می‌توان گفت که شما می‌توانید در عرض کمتر از چند ساعت ( شاید در مدت 2 ساعت ) کل زبان HTML را یاد بگیرید و اینکه بتوانید از آن بخوبی استفاده کنید ، شاید فقط چندروز از شما زمان بطلبد .

این زبان برای اینکه صفحات وب سایت جذابی را تحویل شما دهد ، باید با زبان‌های دیگری نیز ترکیب شود . برای مثال شما جهت نمایش بهتر عناصر سایت در محل مناسب ، با رنگ و لعاب دلنشین ، باید از زبان css نیز استفاده کرده و تگ های بی جان HTML را ، تحت تاثیر قرار داده و به آنها عرض و ارتفاع و رنگ و موقعیت قرارگیری تعیین کنیم .

پس از زبان css ، می‌توانیم از زبان جاوا اسکریپت نیز استفاده کنیم و اگر جاوا اسکریپت برای ما دشوار است ، کتابخانه‌هایی همچون jQuery را به پروژه اضافه کنیم .

پس مشاهده می‌کنید که زبان HTML به تنهایی قدرت خاصی ندارد و لازم است تا آن را به کمک سایر کتابخانه‌ها یا زبان‌ها قوی‌تر کرد . کتابخانه‌های زیادی در دنیای طراحی وب وجود دارند که یادگیری همه آنها غیرممکن است و البته در اکثر پروژه‌های طراحی سایت ، کتابخانه‌های مشهوری وجود دارند که جامعه طراحی سایت ، اکثرا از آنها استفاده می‌کنند . اکنون به معرفی یکی از کتابخانه‌های کاربردی بنام HTMX خواهیم پرداخت .

HTMX چیست و چه کاربردی دارد ؟

اگر با دنیای اسم گذاری در دنیای IT آشنا باشید ، حتما اطلاع دارید که حرف X نشانه همه‌گیر بودن است . HTMX اول از هرچیزی یک کتابخانه جاوا اسکریپتی است که باید بروی پروژه خودتان اضافه کنید . پس تا اینجا راه سختی نداریم و فقط باید یک کتابخانه دانلود کنیم .

HTMX کاملا روشن و واضح در سایت خود اعلام کرده است که HTMX برای افزودن قدرت به HTML ارائه شده است و high power tools for HTML است . یعنی ابزارهای قدرتمندی که به HTML اضافه خواهند شد .

HTMX دقیقا چه کاری انجام خواهد داد ؟

اگر قبلا با تکنولوژی Ajax کار کرده باشید ، ساختار HTMX را بخوبی درک خواهید کرد . اگر در مورد Ajax نیز اطلاعات ندارید باید خدمتتان کمی توضیح بیشتری ارائه کنیم !

اگر شما در حالت عادی داخل یک سایت ، بروی یک دکمه جهت انجام کاری کلیک کنید ، و این کلیک کردن شما در راستای اجرای یک درخواست باشد ، صفحه شما مجدد بارگذاری خواهد شد ، اصطلاحا صفحه Reload خواهد شد .

برای مثال شما قصد دارید تا در یک فرم ، ابتدا استان را انتخاب کنید ، و سپس با انتخاب استان ، شهرهای استان برای شما نمایش داده شود . در گذشته ابتدا باید استان انتخاب شده واطلاعات آن به سمت دیتابیس ارسال می‌شد تا شهرهای مربوط به آن استان مجدد دریافت شده و در موازات آن صفحه سایت بارگذاری مجدد شود و شما لیست شهرها را مشاهده کنید .

اما زمانی که تکنولوژی Ajax ظهور کرد ، شما ضمن انتخاب نام استان ، دیگر نیازی به صبر کردن جهت بارگذاری مجدد صفحه نداشتید و در همان لحظه و کمتر از چند ثانیه ، بدون اینکه صفحه سایت بارگذاری مجدد شود ، اطلاعات شهرهای همان استان نمایش داده می‌شد .

به نوعی تکنولوژی Ajax ، حالت Live برای ارسال و دریافت اطلاعات بدون بارگذاری مجدد بود که البته اکنون نیز استفاده می‌شود . برای اینکه از Ajax استفاده کنیم می‌توانستیم خیلی ساده به کمک دستورات جاوا اسکریپیتی ، پروژه مدنظر را کدنویسی کنیم .

تفاوت HTMX با Ajax در چیست ؟

HTMX نیز دقیقا همان Ajax است یا به عبارتی HTMX بر پایه Ajax ساخته شده است و به شما اجازه خواهد داد تا بدون نوشتن کدهای پیچیده AJAX ، از این تکنولوژی استفاده کنید . کار کردن با Ajax همواره برای دوستان فرانت‌اند کار دشوار بوده است . برای مثال دستور Ajax زیر را مشاهده کنید :

function showCustomer(str) {
  var xhttp;
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.php?q="+str, true);
  xhttp.send();
}

همانطور که مشاهده می‌کنید این دستورات برای یک فرانت‌اند کار بسیار دشوار است و یک فرانت‌اند کار عادت کرده است تا توسط تگ ها و صفات در اچی تی ام ال ، طراحی و همچنین کدنویسی انجام دهد . اما HTMX چگونه این دستورات را ساده کرده است ؟

HTMX چگونه AJAX را ساده کرده است ؟

اول از هرچیزی بدانیم که AJAX بسیار قدرتمندتر از HTMX است و همانطور که گفته شد HTMX برپایه AJAX توسعه داده شده است . در AJAX به این دلیل که مستقیما با جاوا اسکریپت کدنویسی می‌کنیم ، پس دست ما بازتر است .

HTMX بخش‌هایی از دستورات پرکاربرد در AJAX را انتخاب نموده و آنها را بصورت صفات قابل استفاده در تگ‌های html طراحی کرده است . برای مثال به نمونه زیر دقت کنید :

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>

در این نمونه برای مثال صفت hx-target را مشاهده می‌کنید که توسط کتابخانه HTMX معرفی شده است . همانطور که بالاتر گفته شد ، چون HTMX یک کتابخانه جاوا اسکریپتی است ، پس ابتدا باید این کتابخانه را در پروژه اضافه کنیم . HTMX از طریق آدرس زیر فعلا در دسترس است و می‌توانید توسط همین تگ Script ، آن را در پروژه اضافه کنید :

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

به این ترتیب کتابخانه HTMX بسادگی در پروژه شما قرار خواد گرفت و اکنون باید به سراغ یادگیری استفاده از آن در داکیومنت اصلی بروید که در آدرس زیر به آن دسترسی دارید :

https://htmx.org/docs/

یادگیری HTMX بسیار ساده است و شما کافیست تا با صفات لازم برای کنترل هر قسمت آشنا شوید اما دوباره تاکید داریم که این کتابخانه به قدرت کامل AJAX نیست .

HTMX چه بخش‌هایی را کنترل می‌کند ؟

HTMX امکان کنترل چندین بخش در پروژه را در قالب AJAX به شما خواهد داد . البته که طبق داکیومنت اصلی ارائه شده در داخل داکیومنت HTMX ، قسمت‌های زیر قابل کنترل است :

• ایجاد درخواست‌های HTTP همانند عملکرد تگ a و تگ form
• کنترلی بیشتر از حالت های Submit و Click در دکمه‌های یک سایت
• کنترل ساده و همچنین روان بروی فرم‌های سایت ( ارسال درخواست با فرم بدون بارگذاری صفحه )
• ایجاد انیمیشن‌های تعاملی جهت ساخت صفحاتی جذاب توسط hx-trigger
• ساخت وب سایت‌های تکه صفحه یا همان SPA
• المان File Upload و …

این موارد اصلی‌ترین قسمت‌هایی هستند که کتابخانه HTMX امکان اجرای آنها را فراهم خواهد کرد . البته که HTMX در بخش ایجاد درخواست‎‌های HTTP ، ایجاد درخواست‌های لحظه‌ای در فرم و همچنین ایجاد انیمیش‌های تعاملی بسیار کارآمد است و در اکثر سایت‌های امروزی نیز ، ما بیشتر به این قسمت‌ها نیاز داریم .

ارسال درخواست‌ها توسط HTMX یکی از قابلیت‌های اصلی در این کتابخانه است ، به نمونه‌های زیر دقت کنید :

• hx-post: ارسال درخواست POST به آدرس داده شده
• hx-get: ارسال درخواست GET به آدرس داده شده
• hx-put: ارسال درخواست PUT به آدرس داده شده
• hx-patch: ارسال درخواست PATCH به آدرس داده شده
• hx-delete: ارسال درخواست DELETE به آدرس داده شده

همانطور که بالاتر گفته شد ، تمامی این موارد در قسمت داکیومنت اصلی HTMX قرار داده شده است و لازم است تا برای یادگیری صحیح و اصولی HTMX که بسیار آسان نیز هست ، داکیومنت را در عرض چند ساعت مطالعه کنید .

HTMX در چه پروژه‌هایی می‌تواند کاربردی باشد ؟

قطعا در تمامی پروژه‌هایی که به ایجکس نیاز داریم و امکان اجرای آنها توسط HTMX وجود دارد ، استفاده از آن ممکن است اما درکل می‌توان برای پروژه‌های داشبورد مدیریتی ، وب سایت هایی با مضون مالی ( سایت های صرافی ، ارائه قسمت لحظه‌ای ، سرمایه گذاری و … ) ، سایت‌هایی با داده‌های عظیم که نیاز به تبادل درخواست‌های فراوان بین سایت و پایگاه داده دارند از این کتابخانه استفاده کرد . درکل توسط HTMX می‌توانیم بخش زیادی از داده‌های پروژه را همیشه بروز نگه داریم !

اما این کتابخانه از کجا پیدا شد ؟

برای اولین بار در سال 2013 شخصی بنام Carson Gross یک کتابخانه بنام intercooler.js ایجاد کرد و شعار این کتابخانه این بود که قصد داریم تا Ajax را توسط صفت یا همان Attribute ها در اچ تی ام ال کنترل کنیم یا به عبارتی :

Ajax With Attributes

این کتابخانه در حقیقت نسخه اول HTMX بود که چون Carson Gross قصد نداشت تا ردپای جاوا اسکریپت و پسوند Js در نام این کتابخانه بسیار مشهود باشد ، در مدت کوتاهی پس از پیدایش intercooler.js ، آن را کمی توسعه داده و اسم آن را به HTMX تغییر داد . اکنون این کتابخانه دقیقا Ajax را بصورت استفاده در Attribute های تگ HTML فراهم کرده است .

تفاوت HTML با HTMX در چیست ؟

اکنون باتوجه به محتوایی که خدمتتان ارائه کردیم ، پاسخ به این سئوال بسیار ساده است . HTML یک زبان نشانه گذاری برای طراحی صفحات وب است که پایه و اساس تمامی وب سایت‌های دنیا است اما HTMX یک کتابخانه جاوا اسکرپتی است که به شما کمک می‌کند تا دستورات Ajax توسط صفت برای تگ‌های HTML استفاده کنید .

پس بعنوان یک فرد فعال در زمینه طراحی سایت لازم است تا مفهوم HTMX را بخوبی شناخته و از دلایل استفاده از آن باخبر باشید . حتما به داکیومت اصلی این کتابخانه سری بزنید تا با نحوه کدنویسی و اصطلاحا Syntax کتابخانه آشنایی لازم را داشته باشید چراکه اگر در حین ادیت یا بررسی یک پروژه به صفاتی در تگ‌های HTML با پیشوند hx برخورد کردید ، اطلاع داشته باشید که در آن از کتابخانه HTMX استفاده شده است .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا