کدهالیک | codehalic

کتابخانه jQuery بیست‌ساله شد؛ ابزاری که سال ۲۰۰۶ توسط John Resig متولد شد و با اون ساختار ساده‌اش تمام عذاب‌های DOM manipulation، زدن درخواست‌های Ajax و دردسرهای cross-browser تو مرورگرهایی مثل IE6 رو کلاً از بین برد. با اینکه این روزها فریم‌ورک‌های مدرن،…

حالا بیاید یه ترکیب به‌شدت خفن و کاربردی رو بهتون بگم که خودم این روزا تو پروژه‌ها دارم حسابی ازش جواب می‌گیرم!
ببینید، وقتی داریم با تمپلیت‌انجین‌هایی مثل Razor کار می‌کنیم، آوردن فریم‌ورک‌های سنگینی مثل React وسط کار خیلی منطقی به نظر نمی‌رسه؛ چون عملاً هدفمون اینه که یه پروژه یکپارچه داشته باشیم که هم بک‌اند رو هندل کنه و هم فرانت‌اند رو. اینجاست که به‌جای رفتن سراغ گزینه‌های قدیمی مثل همین jQuery بزرگوار، دست می‌ذاریم روی HTMX که واقعاً کار باهاش لذت‌بخش و جذابه!
ایده پشت HTMX به‌شدت ساده و آشناست؛ دقیقاً همون منطقی رو داره که Tailwind CSS بهمون یاد داد: «همون‌طور که واسه استایل دادن نیازی نیست فایل HTML رو ول کنی و بری سراغ نوشتن فایل‌های CSS مجزا، برای هندل کردن رفتارها و ریکوئست‌ها هم نیازی نیست HTML رو ول کنی و درگیر نوشتن کدهای طولانی جاوااسکریپت بشی!»
به این شکله که مثلاً فقط با اضافه کردن چندتا Attribute ساده به همون تگ HTML، می‌تونی یه ریکوئست بزنی و فقط یه بخش خاص از صفحه رو آپدیت کنی. فرض کنید می‌خوایم با کلیک روی یه دکمه، اطلاعات رو از بک‌اند بگیریم و تو یه div نشون بدیم:

<button hx-get="/users/list" hx-target="#user-list" hx-swap="innerHTML">
    لیست کاربرا رو بیار
</button>

<div id="user-list">
    <!-- دیتایی که از سمت سرور میاد (مثلا یه پارشیال ویو از Razor) مستقیم میشینه اینجا -->
</div>

فقط با همین Attribute ها خودش ریکوئست GET رو می‌فرسته به روت سرور، جواب رو می‌گیره و بی‌سروصدا (بدون رفرش شدن کل صفحه) جایگزین محتوای اون div می‌کنه. به همین تمیزی! همون حس یکپارچگی بک‌اند رو نگه می‌داری، دردسرهای ستاپ فریم‌ورک‌های جاوااسکریپتی رو نداری و همه‌چیز سریع، سبک و جمع‌وجور پیش میره.

تازه بهت همه قابلیت های SPA رو میده و تو عملا بدون فول رفرش شدن میتونی بخشی از صفحه رو آپدیت کنی روت رو تغییر بدی یا همه چیزایی که React رو داری به خاطرش انتخاب میکنی رو این بزرگوار به تمیزی بسیار زیاد بهت میده !

یه چکش کنین چیز جالب بامزه و بشدت ترندی تو دنیای امروزه !

https://htmx.org/

@codehalics | کدهالیک

htmx.org

</> htmx - high power tools for html

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~14k min.gz’d), dependency-free, extendable…

❤10👍1

942 viewsedited 09:21