اچ‌تی‌ام‌اکس

htmx
توسعه‌دهنده(ها)Carson Gross
انتشار اولیه۲۴ نوامبر ۲۰۲۰ (۲۰۲۰-24}})[۱]
انتشار پایدار
2.0.4[۲] / ۱۳ دسامبر ۲۰۲۴ (۲۰۲۴-13}})
مخزنgithub.com/bigskysoftware/htmx
نوشته‌شده باJavaScript
مجوزBSD 0-clause[۳]
وبگاه

افزونه نشانه‌گذاری ابرمتنی (به انگلیسی: Hypertext markup extension ) یک کتابخانه متن‌باز جاوااسکریپت سمت-کاربر است که با افزودن صفات سفارشی به اچ‌تی‌ام‌ال، امکان استفاده مستقیم از ایجکس (AJAX) را در اچ‌تی‌ام‌ال با رویکردی مبتنی بر هایپرمدیا فراهم می‌کند. این صفات اجازه می‌دهند که تعریف پویا یک صفحه وب مستقیماً در اچ‌تی‌ام‌ال و سی‌اس‌اس انجام شود، بدون نیاز به نوشتن کد جاوااسکریپت اضافی. این قابلیت‌ها انجام وظایفی را که نیازمند نوشتن کد جاوااسکریپت بودند، به طور کامل از طریق اچ‌تی‌ام‌ال ممکن می‌سازند. این کتابخانه توسط کارسون گروس به عنوان نسخه جدیدی از intercooler.js ایجاد شده است.

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

تاریخچه

اچ‌تی‌ام‌اکس ریشه در کتابخانه‌ای به نام intercooler.js دارد که در سال ۲۰۱۳ توسط کارسون گروس ایجاد شد.[۴] این کتابخانه با هدف کاهش پیچیدگی‌های مرتبط با استفاده از ایجکس (جاوااسکریپت و اکس‌ام‌ال غیرهمزمان) توسعه یافت و از یک رویکرد ساده‌شده با استفاده از صفات اچ‌تی‌ام‌ال بهره می‌برد.[۵] هدف اصلی این پروژه ایجاد چارچوبی بود که با هدف اولیه روی فیلدینگ از رست و به طور خاص HATEOAS (ابررسانه به عنوان موتور حالت برنامه کاربردی) هماهنگ باشد. این مسئله در پست وبلاگ فیلدینگ با عنوان «ای‌پی‌آی‌های رست باید مبتنی بر فرامتن باشند» در اکتبر ۲۰۰۸ توضیح داده شده است.[۶][۷]

اچ‌تی‌ام‌اکس به عنوان نسخه بهبودیافته‌ای از intercooler.js ایجاد شد که دیگر به جی‌کوئری وابسته نبود. نسخه ۱.۰.۰ این کتابخانه در نوامبر ۲۰۲۰ منتشر شد.[۸] این نسخه نقطه عطفی مهم برای پروژه بود، زیرا امکان استفاده از ایجکس، انتقال‌های سی‌اس‌اس، وب‌سوکت‌ها، و رویدادهای ارسال‌شده از سرور را مستقیماً در اچ‌تی‌ام‌ال با استفاده از صفات فراهم کرد.[۹]

در سال ۲۰۲۳، اچ‌تی‌ام‌اکس به اولین گروه از برنامه شتاب‌دهنده گیت‌هاب اضافه شد. این برنامه به پروژه‌های متن‌باز کمک مالی و راهنمایی از سوی اعضای پروژه‌های متن‌باز پیشرفته ارائه می‌دهد.[۱۰]

طراحی و عملکرد

اچ‌تی‌ام‌اکس ترکیبی از قابلیت‌های فریم‌ورک‌های مدرن و پردازش سمت سرور برنامه‌های وب سنتی را ارائه می‌دهد. فلسفه طراحی این کتابخانه بر هدف «تکمیل اچ‌تی‌ام‌ال به عنوان یک ابرمتن»[۱۱] استوار است. با استفاده از اتریبیوت اچ‌تی‌ام‌ال سفارشی با پیشوند hx- برای ارسال درخواست‌های ایجکس و به‌روزرسانی بخش‌هایی از دام، اچ‌تی‌ام‌اکس به توسعه‌دهندگان امکان می‌دهد رفتارهای پویا را مستقیماً در نشانه‌گذاری خود تعریف کنند، که این امر نیاز به کدنویسی گسترده جاوااسکریپت را کاهش داده یا حتی حذف می‌کند.[۱۲][۱۳] این رویکرد مشکلات مربوط به باندل‌های حجیم، مدیریت وضعیت پیچیده (state management)، و فرایندهای hydration را از بین می‌برد.[۱۴]

این روش روشی دسترس‌پذیرتر و شهودی‌تر برای ساخت رابط‌های کاربری مدرن ارائه می‌دهد، در حالی که از پیچیدگی‌هایی که معمولاً با فریم‌ورک‌های سنتی جاوااسکریپت همراه است، اجتناب می‌کند.[۱۵] از آنجا که اچ‌تی‌ام‌اکس می‌تواند بخش‌های خاصی از یک صفحه وب را بدون نیاز به بارگذاری مجدد کل صفحه به‌روزرسانی کند (مانند آنچه در اچ‌تی‌ام‌ال و سی‌اس‌اس ساده اتفاق می‌افتد)، استفاده از آن ممکن است تجربه کاربری و عملکرد را بهبود دهد، زیرا تنها بخشی از داده‌ها نیاز به دریافت مجدد از سرور دارند.[۱۶]

این کتابخانه رویکرد رایج استفاده از جی‌سان به‌عنوان قالب استاندارد بارگذاری برای درخواست‌های اچ‌تی‌تی‌پی را به چالش می‌کشد و آن را با اچ‌تی‌ام‌ال جایگزین می‌کند.[۵] این تغییر به منظور حل مشکلات مربوط به عملکرد و بار شناختی ناشی از سریال‌سازی و دی‌سریال‌سازی جی‌سان و استفاده از آن در رابط کاربری انجام شده است. مشکلاتی مانند ناتوانی جاوااسکریپت و جی‌سان در پردازش صحیح اعداد بزرگ‌تر از ۲۵۳، یا تمایز بین اعداد اعشاری و صحیح، و پیچیدگی استفاده از جایگزین‌هایی مانند گرف‌کیوال یا gRPC نیز از این جمله هستند.[۱۷]

یکی از مزایای بالقوه اچ‌تی‌ام‌اکس و رویکرد مبتنی بر هایپرمتن این است که داده‌های بازیابی‌شده مستقیماً از پایگاه داده نیازی به تبدیل به قالب جی‌سان یا فرمت‌های سازگار با جی‌سان (مانند انواع جی‌سان در پستگرس‌کیوال) ندارند و نیازی نیست ابتدا در سمت سرور سریال‌سازی و سپس در سمت کاربر دی‌سریال‌سازی شوند.[۱۸]

کاهش محاسبات در سمت کاربر همچنین باعث می‌شود تمرکز توسعه‌دهندگان به سمت سمت سرور معطوف شود، که می‌تواند منجر به بهبود عملکرد سمت کاربر شود. البته این کار ممکن است هزینه بار بیشتر روی سرور را به همراه داشته باشد، اما به توسعه‌دهندگان روشی ساده‌تر برای حل مسائلی ارائه می‌دهد که در غیر این صورت با جاوااسکریپت سمت کاربر و در زبان‌های برنامه‌نویسی مختلف حل می‌شدند.[۱۹]

جستارهای وابسته

ری‌اکت

منابع

  1. "Release v1.0.0 - HTMX". GitHub.
  2. "Releases - HTMX". GitHub.
  3. "htmx/LICENSE". HTMX. Retrieved 2024-04-30 via GitHub.
  4. «htmx ~ htmx 1.0.0 has been released!». htmx.org. دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  5. 1 2 Melanson، Mike (۲۰۲۲-۰۱-۱۹). «Htmx: HTML Approach to Interactivity in a JavaScript World». The New Stack (به انگلیسی). دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  6. Gross, Carson. "Simple AJAX using HTML attributes". Intercooler.js (به انگلیسی). Retrieved 2024-11-25.
  7. «REST APIs must be hypertext-driven » Untangled». دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  8. «htmx ~ htmx 1.0.0 has been released!». htmx.org. دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  9. «htmx | Technology Radar | Thoughtworks United States». Thoughtworks (به انگلیسی). دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  10. Sowles، Kara (۲۰۲۳-۰۴-۱۲). «GitHub Accelerator: our first cohort and what's next». The GitHub Blog (به انگلیسی). دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  11. «Intro to HTMX: Dynamic HTML without JavaScript». InfoWorld (به انگلیسی). دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  12. "Introduction to HTMX | Refine". refine.dev (به انگلیسی). 2024-09-06. Retrieved 2024-11-25.
  13. «Complexity bad: An interview with HTMX creator Carson Gross». InfoWorld (به انگلیسی). دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  14. "HTMX vs React: A First Look and Comparison". Builder.io (به انگلیسی). Retrieved 2024-11-25.
  15. "</> htmx ~ Essays". htmx.org (به انگلیسی). Retrieved 2024-11-25.
  16. «htmx ~ Documentation». htmx.org. دریافت‌شده در ۲۰۲۴-۱۱-۲۵.
  17. "O'Reilly Media". Wikipedia (به انگلیسی). 2024-09-26.
  18. https://ieeexplore.ieee.org/document/9101499
  19. https://t73f.de/hochschule/thesis/2023_eckert.pdf