htmx چیست و چگونه می تواند وب سایت من را ساده کند؟

htmx چیزی شبیه HTML نیست، اما می تواند آن را بسیار قدرتمندتر کند.

خلاصه عناوین

• htmx چیست؟

• چگونه می توانید از htmx در یک برنامه وب ساده استفاده کنید

• مزایا و معایب htmx

تعاریف کلیدی

• htmx یک کتابخانه جاوا اسکریپت است که مدیریت درخواست HTTP را با در دسترس قرار دادن قابلیت های رایج از طریق ویژگی های HTML ساده می کند.
• شما به راحتی می توانید آن را با پیوند به اسکریپت htmx در CDN به برنامه وب خود اضافه کنید.
• شما می توانید از htmx برای تعاملاتی مانند صفحه بندی، اعتبارسنجی فرم و ویرایش درون خطی، بدون نوشتن جاوا اسکریپت استفاده کنید.

جامعه توسعه وب اخیراً با صحبت از htmx سر و صدا شده است، اما این فناوری جدید هیجان انگیز چیست؟ به نظر می رسد بسیار ساده تر از آن چیزی است که شما انتظار دارید، اما مفید بودن htmx ممکن است تبلیغات تبلیغاتی را توجیه کند.

htmx چیست؟

htmx یک کتابخانه کوچک جاوا اسکریپت با تمرکز محدود است. این قابلیت‌های رایج جاوا اسکریپت را از طریق ویژگی‌های HTML در دسترس قرار می‌دهد. در اینجا یک مثال ساده است:

<a href="/about" hx-get="/about">About</a>

این کد یک ویژگی HTML سفارشی، hx-get را نشان می دهد. اگر روی این پیوند کلیک کنید، کتابخانه htmx یک درخواست AJAX ارسال می کند و صفحه مورد نظر را بدون رفرش کامل مرورگر بارگذاری می کند.

htmx دارای عملکرد اضافی است که به شما امکان می دهد درخواست ارسال کنید:

• از عناصری غیر از a و فرم.
• در رویدادهایی غیر از کلیک و ارسال.
• استفاده از روش های HTTP به غیر از GET و POST.
• که جایگزین هر قسمت از صفحه می شود نه فقط کل آن.

اگرچه htmx از فناوری هایی مانند انیمیشن CSS و WebSockets پشتیبانی می کند، اما هدف اصلی آن ساده کردن رسیدگی به درخواست HTTP است.

چگونه می توانید از htmx در یک برنامه وب ساده استفاده کنید

htmx به جای رفتار کل برنامه، به عملکرد خاصی در برنامه های وب یا وب سایت ها می پردازد.

یکی از مزیت های بزرگ کتابخانه این است که استفاده از آن آسان است. در صورت تمایل می توانید یک نسخه را دانلود و نصب کنید، اما از آنجایی که هیچ وابستگی ندارد، تنها کاری که باید انجام دهید این است که یک پیوند به اسکریپت در CDN اضافه کنید:

<script
  src="https://unpkg.com/htmx.org@1.9.10"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

برای توسعه و آزمایش محلی، اگر قبلاً یک سرور در حال اجرا ندارید، باید یک وب سرور مانند آپاچی راه اندازی کنید. این یک الزام است، حتی اگر فقط با فایل‌های استاتیک آزمایش می‌کنید، زیرا پروتکل file: اجازه درخواست‌های AJAX را نمی‌دهد.

یک مثال ساده با استفاده از اسکرول بی نهایت

می توانید این مثال ساده را از مخزن GitHub آن دانلود کنید.

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

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

نشانه گذاری زیر را که نشان دهنده لیستی از پست ها است، با استفاده از یک تصویر برای هر یک انتخاب کنید:

<ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol>

تصور کنید این موارد را در یک فایل دارید، feed1.html، با موارد بیشتری در feed2.html، و غیره. سپس هر صفحه یک زیرمجموعه کوچک از موارد را نشان می دهد که می توانید در آنها پیمایش کنید:

اکنون، می‌توانید از پیوندهای «صفحه بعدی» برای انتقال از یک صفحه به صفحه دیگر استفاده کنید، اما می‌توانید اسکرول بی‌نهایت را نیز به راحتی پیاده‌سازی کنید. فقط مورد نهایی را به این تغییر دهید:

<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

افزودن این چهار ویژگی به آیتم فهرست نهایی، اسکرول بی نهایت را پیاده سازی می کند. معنی هر ویژگی در اینجا آمده است:

صفت

ارزش

معنی

hx-trigger

آشکار کرد

هنگامی که این عنصر برای اولین بار روی صفحه ظاهر می شود …

hx-get

feed2.html

… ارسال درخواست GET به feed2.html، …

hx-انتخاب کنید

لی

… عناصر li را از پاسخ انتخاب کنید، …

hx-swap

پس از پایان

… را بعد از این عنصر اضافه کنید.

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

توجه داشته باشید که با این تنظیم ساده صفحه استاتیک، صفحه feed2.html شامل یک آیتم نهایی با ویژگی hx-get به feed3.html و غیره است. همچنین توجه داشته باشید که htmx چگونه یک شنونده برای رویداد اسکرول اضافه کرده است.

سایر کاربردهای بالقوه برای htmx

می توانید از htmx برای بسیاری از تعاملات رایج دیگر استفاده کنید، از جمله:

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

ساخت هر یک از این نمونه ها با استفاده از جاوا اسکریپت استاندارد امکان پذیر است، htmx فرآیند را بسیار ساده تر می کند.

مزایا و معایب htmx

فواید

htmx می تواند تعاملات رایج را که می تواند برای بسیاری از برنامه های کاربردی وب و حتی بسیاری از وب سایت ها مفید باشد، بسیار ساده می کند. این به طراحان و دیگرانی که با صفحات وب جلویی کار می کنند، اجازه می دهد تا بدون نیاز به یادگیری جاوا اسکریپت، عملکردی را اضافه کنند.

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

از آنجایی که بر رویکرد اعلانی (چه چیزی) به جای امری (چگونه) تأکید می کند، عملکرد htmx معمولاً درک و استدلال آسان تر است.

اشکالاتی

اگرچه htmx می تواند به شما اجازه دهد جاوا اسکریپت را در بسیاری از زمینه ها فراموش کنید، اما نمی تواند همه مشکلات را برای شما حل کند! برای مدیریت منطق تجاری خاص و عملکردهای سطح پایین تر، همچنان باید کد بنویسید.

از آنجایی که htmx کارهای زیادی را برای شما انجام می دهد، پتانسیل کمتری برای سفارشی کردن رفتار وجود دارد. این اغلب یک مبادله مثبت خواهد بود، اما شما باید آماده باشید تا کنترل را از دست بدهید.

html ممکن است به شما اجازه دهد از نوشتن جاوا اسکریپت اجتناب کنید، اما همچنان باید آگاه باشید که کد جاوا اسکریپت در پس‌زمینه اجرا می‌شود. ممکن است وسوسه شوید که از ویژگی hx-get در هر پیوند، به جای ویژگی href استفاده کنید. اما این یک وابستگی به جاوا اسکریپت را معرفی می کند. اگر کد به هر دلیلی اجرا نشود، لینکی برای کاربران شما باقی خواهد ماند که هیچ کاری انجام نمی دهد. برای جلوگیری از این امر باید همیشه تقویت تدریجی را تمرین کنید.

منبع مقاله