معرفی HTMX: HTML پویا بدون جاوا اسکریپت

HTMX سینتکس پسوند HTML است که جاوا اسکریپت را با نشانه گذاری ساده جایگزین می کند. می تواند مسیر توسعه وب را تغییر دهد.

• HTMX چیست؟
• HTMX سمت سرور
• الگوی سمت مشتری با HTMX
• نتیجه‌گیری

HTMX به شما امکان می دهد از یک نحو HTML توسعه یافته به جای JavaScript برای دستیابی به تعامل استفاده کنید. HTMX تعاملات HTTP را مستقیماً در نشانه گذاری به شما می دهد و بسیاری از نیازهای تعاملی دیگر را بدون استفاده از جاوا اسکریپت پشتیبانی می کند. این یک ایده جالب است که می تواند بر نحوه کار صفحات وب تأثیر بگذارد. بیایید ببینیم HTMX چگونه استفاده می‌شود و چه چیزی آن را بسیار جذاب می‌کند.

HTMX چیست؟

HTMX مدتی است که وجود داشته است، اما کمی پروژه خوابیده بوده است. پذیرش اخیر شتابدهنده GitHub ممکن است همه اینها را تغییر دهد. ایده اصلی این است که موارد استفاده رایجی را که نیاز به تعامل boilerplate JavaScript-and-HTML دارند و فقط از یک نحو HTML بدون جاوا اسکریپت استفاده کنید. بسیاری از تعاملات با HTMX بیانی می شوند.

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

برای درک سریع، به این نسخه نمایشی HTMX مراجعه کنید. اساساً روی دکمه ای کلیک می کنیم تا امکان ویرایش فیلدهای شی کاربر فراهم شود. داده ها در واقع PUT در یک نقطه پایانی پشتیبان هستند. می‌توانید نسخه نمایشی را در شکل ۱ ببینید—پس از کلیک بر روی نمایش، به تعامل شبکه در کادر پایین توجه کنید.

شکل ۱. فرم نمایشی: HTMX

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

<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
<!-- The edit: -->
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

اگر به نشانه گذاری در فهرست ۱ نگاه کنید، به راحتی می توانید ببینید که چه اتفاقی در حال رخ دادن است: ویژگی hx-swap HTML را برای div قبل از آن ارائه می دهد. ویرایش شده، و outerHTML به چارچوب می گوید که چگونه با محتوای پویا در داخل ارتباط دارد. نسخه قابل ویرایش به عنوان یک عنصر فرم حاوی ویژگی x-put است که روش HTML PUT و نقطه پایانی را که باید استفاده شود را مشخص می کند.

این سوال پیش می‌آید که چگونه HTMX بدون انجام هیچ جاوا اسکریپتی به این “تبادل” و PUT بعدی دست می‌یابد؟ پاسخ آسان است: از رندر سمت سرور HTML برای نشانه گذاری ویرایش استفاده می کند و فرم را در چارچوب انتزاعی می کند. جاوا اسکریپت هنوز در پشت صحنه کار می کند. اساسا، ما یک نحو HTML ریزتر دریافت می کنیم، که فقط می تواند بخش ها را به جای صفحات کامل بارگذاری کند و می تواند درخواست های Ajax را ارسال کند.

این نمونه جالبی از اصل DRY در عمل است. حتی با چیزی مانند React، مقدار معینی از کد دیگ بخار وجود دارد که اطلاعات را از شکلی به فرم دیگر تغییر می دهد. البته، HTMX آن را به طور کامل حذف نکرده است، اما کار را به سرور منتقل کرده است.

HTMX سمت سرور

حالا بیایید سمت سرور معادله را در نظر بگیریم. نمونه‌هایی از بسیاری از فناوری‌های سمت سرور که از HTMX استفاده می‌کنند، وجود دارد، زیرا همانطور که گراس می‌گوید، HTMX “بازگشت” است. مهم نیست از چه بک اند استفاده می کنید، تا زمانی که HTML تولید می کند. برای درک نحوه عملکرد آن، بیایید به مثال TODO نگاهی بیندازیم که از Express، همراه با موتور قالب HTML Pug. این مثال اجرای برنامه کلاسیک TODO است.

برای شروع، موارد کاری موجود از Express با دستور:

خروجی می‌شوند

res.render('index', { todos: filteredTodos, filter, itemsLeft: getItemsLeft() });

این دستور از مجموعه کارهای درون حافظه استفاده می کند و آنها را با یک الگوی Pug که در قالب معمولی است رندر می کند، به جز اینکه شامل ویژگی های ویژه hx- است که تعاملات HTMX را هدایت می کند. برای مثال، فرم POST کارهای جدید در فهرست ۲ نشان داده شده است.

form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad set #txtTodo.value to ''")
  input#txtTodo.new-todo(name="todo",placeholder='What needs to be done?', autofocus='')

می‌توانید اینجا ببینید که چگونه ویژگی afterbegin برای قرار دادن محتوای جدید در جایی که در لیست قرار دارد. اسکریپت نویسی on htmx نمونه ای از Hyperscript است، که نوعی زبان برنامه نویسی ساده شده است. اغلب با HTMX استفاده می شود، اما به شدت بخشی از HTMX نیست یا برای استفاده از آن لازم نیست. اساساً، on htmx در اینجا برای تنظیم مقدار فرم ورودی پس از ایجاد کار جدید استفاده می‌شود.

به عنوان مثال دیگری، فهرست ۳ الگوی Pug را برای ویرایش کارهای انجام شده نشان می دهد.

form(hx-post="/todos/update/" + todo.id)
  input.edit(type="text", name="name",value=todo.name)

در فهرست ۳، نشانه گذاری از ویژگی hx-post استفاده می کند تا نشان دهد که JSON برای کارهای ویرایش شده کجا ارسال شود. نکته مهم از این مثال ها همان چیزی است که قبلاً اشاره کردم: سرور مسئول ارائه HTML (تزیین شده با برچسب های HTMX) در تکه های با اندازه مناسب است تا قسمت های مختلف صفحه را که توسط قسمت جلویی برای تعاملات مختلف مورد نیاز است، پر کند. مشتری HTMX آنها را بر اساس ویژگی‌ها در جایی که به آنها تعلق دارد قرار می‌دهد و همچنین ارسال داده‌های مناسب برای مصرف توسط سرویس‌ها را انجام می‌دهد.

نقاط پایانی مسئول دریافت داده ها می توانند مانند نقاط پایانی معمولی عمل کنند، با این تمایز که پاسخ باید HTMX لازم باشد. به عنوان مثال، در فهرست ۴، می توانید ببینید که چگونه سرور Express POST را برای ایجاد یک کار جدید مدیریت می کند.

app.post('/todos', (req, res) => {
  const { todo } = req.body;
  const newTodo = { 
    id: uuid(),
    name: todo, 
    done: false 
  };
  todos.push(newTodo);
  let template = pug.compileFile('views/includes/todo-item.pug');
  let markup = template({ todo: newTodo});
  template = pug.compileFile('views/includes/item-count.pug');
  markup  += template({ itemsLeft: getItemsLeft()});
  res.send(markup);
});

فهرست ۴ یک کنترل کننده بدنه POST معمولی است که مقادیر را از داده های فرم حذف می کند و یک شیء تجاری جدید با آن ایجاد می کند (newTodo). با این حال، سپس از مقادیر برای پر کردن الگوی Pug استفاده می کند و آن را به مشتری ارسال می کند تا به عنوان درج در لیست Todo در قسمت جلویی استفاده کند.

نمونه‌های دیگر فناوری سمت سرور شامل استفاده از HTMX به همراه Spring Boot با Thymeleaf در دنیای جاوا و Spring Boot با جنگو در دنیای Python.

الگوی سمت مشتری با HTMX

یک تغییر در این الگو که توسط HTMX پشتیبانی می‌شود، از الگوی سمت سرویس گیرنده. این لایه ای است که در کلاینت اجرا می شود و JSON را از سرور می پذیرد و ترجمه نشانه گذاری را در آنجا انجام می دهد. وقتی از گراس در مورد استفاده از سرویس RESTful با JSON سؤال کردم، او گفت که این امکان با الگوهای سمت مشتری وجود دارد، اما با این اخطار که REST معمولاً اشتباه برداشت می شود.

پس یک سوال معکوس این است که چگونه می‌توانیم JSON را به‌جای کدگذاری فرم پیش‌فرض به سرور ارسال کنیم؟ یک بار دیگر، یک پسوند برای آن وجود دارد؛ یعنی JSON-ENC.

نتیجه گیری

تفکر HTMX باعث می‌شود دسته‌ای از افکار به یکباره برسند. نتیجه این است که این مفهوم به اندازه خود پروژه مفید است. HTMX به عنوان یک پروژه بالغ ممکن است دقیقاً مانند امروز به پایان نرسد، اما قبلاً ثابت شده است که تأثیر مفیدی دارد. چیزی که بسیار متقاعد کننده است، ایده رسیدگی به تمام این درخواست های بسیار رایج به سبک Ajax است، که معمولاً به معنای استفاده از fetch() یا چیزی مشابه، فقط با یک ویژگی HTML است. این ساده تر، تمیزتر است و همه چیز را در یک مکان نگه می دارد. بسیار واضح است که نشانه گذاری چه می کند.

من در مورد تولید نشانه‌گذاری سمت سرور دوسوگراتر هستم. توسعه دهندگان برای این منظور عادت دارند با JSON سروکار داشته باشند. وارد کردن نشانه گذاری فقط یک مرحله به ایجاد مشتری اضافه می کند. ما رویکردهای سمت سرور متعددی را دیده‌ایم و به نظر می‌رسد که آنها همیشه سه‌گانه قدرتمند HTML، جاوا اسکریپت و CSS را مبهم می‌کنند، که در پایان به پیروزی ادامه می‌دهد. شاید این بار متفاوت باشد. آونگ بزرگی برای چرخاندن است.

البته، گزینه قالب سمت کلاینت وجود دارد که سرور را به عنوان یک فرستنده JSON آشنا می‌گذارد. من سعی کردم تصویر کنم که چگونه در یک پروژه نرم افزاری بزرگ کار می کند. آیا پیچیدگی کلی یک پروژه در مقیاس را کاهش می دهد؟

گراس نظرات خود را درباره پیچیدگی دارد. می توانید افکار او را در طراحی HTMX مشاهده کنید. این فناوری می‌خواهد با بازگرداندن ما به Hypertext به عنوان مکانیزم حالت برای برنامه‌های وب، همه چیز را ساده کند. این مثال ایده در حال کار را نشان می دهد. استفاده از JSON به‌عنوان پروتکل به معنای هوشمندتر، پیچیده‌تر کردن کلاینت‌ها و کم‌توصیف کردن معماری است.

شاید همه چیز بتواند کار کند. اگر با گسترش زبان اصلی، HTML، برای رسیدگی به نیازهای مدرن، مانند Ajax، از پیچیدگی ذاتی اجتناب کنیم، می‌توانیم به زمان ساده‌تری برگردیم. نشانه گذاری یک بار دیگر توصیفگر داده مرکزی است و برای توصیف رابط کاربری و همچنین داده های روی سیم کافی است.