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

HTMX یک کتابخانه سریع و سبک است که به شما اجازه می‌دهد تا ویژگی‌های مدرن موجود در دنیای طراحی وبسایت را بدون نیاز به جاوا اسکریپت در سایت خود استفاده کنید.

 

دسترسی های HTMX از طریق html:

  • دسترسی به Ajax
  • دسترسی به CSS Transitions
  • دسترسی به WebSockets

 

روش استفاده از HTMX

ساختار کار آن نیز به این شکل است که شما تنها نیاز دارید تا از خاصیت‌های تگ‌های HTML استفاده کنید. از این جهت توسعه یک اپلیکیشن مدرن بسیار سریع‌تر از چیزی خواهد بود که انتظارش می‌رود.

 

علت اهمیت HTMX چیست؟

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

از این طریق برنامه نویسان سعی خواهند کرد تا محتوای داینامیک که قابلیت بروزرسانی دارند را در صفحات خود پیاده‌سازی بکنند.

 

برخی از سوالات توسعه دهندگان HTMX برای توجیه استفاده از این کتابخانه:

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

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

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

 

شیوه نصب HTMX

سه راهکار کلی برای در اختیار گرفتن HTMX و استفاده از آن وجود دارد.

راهکار نخست استفاده از cdn:

 

راهکار دوم استفاده از فایل htmx.min.js:

دانلود

 

راهکار سوم استفاده از فایل npm:

 

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

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

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

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

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

 

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

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

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

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

 

المان File Upload در HTMX

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

 

برخی از مثال ها دیگر این کتابخانه

مشاهده

 

آخرین آموزش ها

دیدگاه خود را بیان کنید

این ایمیل برای عموم منتشر نمی شود

امیر جوان میر-توسعه دهنده و گرافیست

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

من امیر جوان میر هستم در ابتدا گرافیست بودم و ۲ سالی به عنوان طراح مشغول شدم، از همون موقع به برنامه‌نویسی علاقمند بودم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. در حال حاضر طراحی هم می کنم از وب گرفته تا چاپ. به تدریس کردن علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران هم قرار بدم. شما هم این دانش رو به بقیه انتقال بدید.

  • 0قسمت
  • وضعیت دوره

مقالات دنیای وب