آشنایی با HTMX – دیگر به جاوا اسکریپت نیازی ندارید!

مطابق با مستندات رسمی، HTMX یک کتابخانه سریع و سبک است که به شما اجازه می‌دهد تا ویژگی‌های مدرن موجود در دنیای طراحی وبسایت را بدون نیاز به جاوا اسکریپت به سایت‌های خود بیاورید. HTMX به شما اجازه دسترسی به CSS Transitions، Ajax، WebSockets و حتی Server-Sent Event را از طریق خود HTML می‌دهد. ساختار کار آن نیز به این شکل است که شما تنها نیاز دارید تا از خاصیت‌های تگ‌های HTML استفاده کنید. از این جهت توسعه یک اپلیکیشن مدرن بسیار سریع‌تر از چیزی خواهد بود که انتظارش می‌رود.

در این مقاله از وبسایت راکت قصد داریم شما را بیشتر با HTMX آشنا کرده و ساختار کلی آن را بررسی کنیم. مطمئنا با توجه به عنوان مقاله، این مطلب هیجان برانگیز و جذاب خواهد بود.

HTMX چیست و چرا اهمیت دارد؟

در سال ۲۰۱۳ توسعه‌دهنده‌ای به نام Carson Gross یک کتابخانه فرانت-اند جدید با نام intercooler.js را منتشر کرد که شعار اصلی آن “Ajax With Attributes” بود. هدف از انجام چنین کاری ساده‌سازی فرایند توسعه اپلیکیشن‌های سمت کاربر بود. همین کتابخانه در طی گذر مدت کوتاهی به نسخه دوم خود ارتقا پیدا کرد و نام‌ش را به HTMX تغییر داد. هدف از این کار کمتر نشان دادن نام جاوا اسکریپت و پسوند js بود.

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

توسعه دهنده اصلی این ابزار با چند سوال استفاده از HTMX را توجیه می‌کند:

• چرا باید فقط تگ‌های a و form توانایی ایجاد یک درخواست HTTP را داشته باشند؟
• چرا باید فقط رویدادهای click و submit آن‌ها را هدف قرار دهد؟
• چرا تنها باید متدهای Get و Post موجود باشند؟
• چرا فقط شما باید تمام صفحه را جابجا کنید؟!

نتیجه تمام این سوالات که البته عجیب و غریب به نظر می‌رسند این است که با حضور HTMX حال می‌توانیم HTML را Super HTML بنامیم و از ویژگی‌های خارق العاده جدیدی که می‌توان در آن پیدا کرد استفاده کنیم.

در حال حاضر با استفاده از HTMX می‌توانید از یکسری ویژگی‌های رابط کاربری و المان‌های آن استفاده کنید که چند مورد در زیر همراه با نمونه‌ها نشان داده شده است:

• Progress Bar
• Lazy Loading
• Infinite Scroll
• Inline Validation
• و بیشتر...

رویکرد و شیوه کارکرد HTMX با دیگر فریمورک‌های جاوا اسکریپتی مانند Vue.js و React.js متفاوت است. در این دو فریمورک، با استفاده از جاوا اسکریپت، اپلیکیشن کلاینت یک درخواست به سرور ارسال کرده و در نهایت پاسخ را در قالب یک داده JSON دریافت می‌کند. این درحالی‌ست که HTMX به صورت مستقل به سرور درخواست را ارسال کرده و همه چیز در قالب HTML باز می‌گردد و در همین حالت نیز همه چیز بروزرسانی می‌شود. شما توانایی آن را دارید که HTMX را با هر اپلیکیشن Back-End دیگری ادغام کنید چرا که در نهایت پردازش‌ها و منطق اصلی برنامه در قسمت Back-End انجام می‌شود. در ادامه با شیوه نصب این کتابخانه و کار با دو ویژگی آن آشنا خواهیم شد.

استفاده از HTMX

سه راهکار کلی برای در اختیار گرفتن HTMX و استفاده از آن وجود دارد. در راهکار اول شما می‌توانید به سادگی از CDN اصلی استفاده کنید:

<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"></script

در راهکار دوم شما می‌توانید فایل htmx.min.js را دانلود کرده و در نهایت آن را به پروژه‌تان اضافه کنید:

<script src="/path/to/htmx.min.js"></script>

و راهکار نهایی این است که HTMX را از طریق npm نصب کنید.

npm install htmx.org

ارسال درخواست Ajax با استفاده از HTMX

HTMX خاصیت‌های مختلفی را ارائه می‌دهد که با استفاده از آن‌ها می‌توانید به صورت مستقیم از درخواست‌های Ajax استفاده کنید. در زیر چهار خاصیت در این رابطه را مشاهده خواهید کرد:

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

هر کدام از خاصیت‌هایی که در بالا به آن‌ها اشاره شد یک آدرس بخصوص را مد نظر قرار داده و یک درخواست Ajax برای آن ارسال می‌کنند. در نتیجه هر زمان که یک المان مورد هدف قرار گرفت یک نوع خاص از درخواست به آدرس داده شده ارسال می‌شود. برای مثال قطعه کد زیر را در نظر بگیرید:

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

<div
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
>Load Jokes</div>

در این قطعه کد هرگاه کاربر روی متن Load Jokes کلیک کند به آدرس داده شده که در واقع یک API است درخواستی ارسال شده و در همان زمان محتوای مورد نظر برگشت داده خواهد شد. همانطور که مشاهده می‌کنید کل این پروسه در HTML صورت گرفته و ما به صورت مستقیم کد جاوا اسکریپتی برای این منظور ننوشته‌ایم.

نشان‌گر ارسال درخواست

به صورت پیشفرض زمانی که شما روی یک لینک کلیک می‌کنید مرورگر تا زمانی که محتوا مورد نظر برای شما آماده نشود هیچ فیدبک خاصی از خود نشان نمی‌دهد. به همین دلیل برای برخی از افراد در وب مدرن این مورد می‌تواند گیج کننده باشد. بسیاری از اوقات بوده که ما روی یک دکمه یا لینک خاص کلیک کرده‌ایم اما به دلیل کُندی فرایند پاسخ که می‌تواند ناشی از مشکلات Back-End و یا حتی اینترنت شخصی خودمان باشد، فرایند دریافت پاسخ طولانی شده است. در این مواقع داشتن یک نشان‌گر لودینگ می‌تواند بسیار مفید باشد.

در این حالت کلاس htmx-indicator می‌تواند مفید عمل کند. به قطعه کد زیر نگاه کنید:

<div class= "jokes" hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode" >
 <button>Load Jokes</button>
 <img class="htmx-indicator" src="https://i.imgur.com/8THYvPQ.gif">
</div>

کلاس htmx-indicator به صورت پیشفرض مقدار opacity المان مورد نظر را روی صفر قرار داده و به یک معنی از دید کاربران مخفی می‌شود، البته این المان در DOM موجود بوده و فعال است. در مثال بالا تنها چیزی که باعث می‌شود این المان پدیدار شده و دیده شود کلیک کردن روی دکمه Load Jokes است. بعد از آن تا زمانی که محتوا از API دریافت شود یک علامت «صبر کنید» یا نمونه‌هایی دیگر از این حالت به کاربر نشان داده خواهد شد.

المان File Upload در HTMX

با استفاده از HTMX شما توانایی ایجاد یک المان File Upload را خواهید داشت که از طریق Ajax به بخش Back-End برای پردازش داده ارسال می‌شود. شما بدون هیچ زحمت خاصی می‌توانید File Upload مخصوص به انواع مختلف فایل (تصویر، ویدیو، اسناد و...) را ایجاد کنید. برای این کار شما باید از خاصیت hx-encoding با مقدار multipart/form-data در المان Form استفاده کنید. به قطعه کد زیر نگاه کنید:

<form hx-encoding='multipart/form-data' hx-post='/registration'
          _='on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100'>
        <input type='file' name='userFile'>
        <button>
            Upload File
        </button>
   </form>

در پایان

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