جنگو، Htmx و React: از HTMX علاوه بر TODO-Lists استفاده می شود

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

عنوان الهام گرفته از یک توییت چند روز پیش دیدم که پرسیدم آیا کسی از آن استفاده می کند؟ HTMX برای چیزی بیشتر از ایجاد TODO-List.

قسمت پشتی پروژه از جانگو com جنگو-استراحت-فریم ورک برای ارائه یک API یکپارچه برای یک برنامه تلفن همراه و برای مدیریت محتوا، جنگو-ادمین استفاده می شود.

django-admin، در صفحات فرم، ساختاری شبیه به زیر دارد: یک هدر که تمام عرض صفحه را پوشش می دهد، و درست زیر آن یک نوار کناری و محتوای اصلی، که در این مورد یک فرم است.

وقتی ما شروع به ارزیابی عملکرد کردیم، اولین بحث این بود: آیا HTMX اینجا خوب میاد؟ یا بهتر است با آن برخورد کنیم واکنش نشان دهید?

یکی از نکات اصلی مورد توجه: ساختار جنگو از django-admin قبلاً مقدار زیادی کد و ویژگی هایی داشت که می توان از آنها برای نمایش مجدد استفاده کرد، مانند صفحه بندی و غیره. در برنامه واکنش نشان دهند که در این برنامه اجرا می شود با صفحه بندی یا چندین مورد دیگر که پیاده سازی آنها به زمان بسیار بیشتری نسبت به استفاده از بخش هایی از قالب ها انجام دادن django-admin سازگار.

زیرا این قابلیت همیشه در همان صفحات فرم درج نمی شود واکنش نشان دهند، کار زیادی برای تطبیق استفاده از آن وجود خواهد داشت واکنش نشان دهند، باندلرها، و غیره.

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

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

برخی از مسائلی که تمرکز تلاش‌ها برای کار با این قابلیت بود، در این بخش مورد بررسی قرار خواهند گرفت. این مسائل لزوماً پیچیده یا مشکل ساز نبودند. اینها فقط نکاتی هستند که می خواهم در مورد آنها نظر بدهم.

همانطور که گفته شد، در جایی از متن بالا، لازم بود موارد به شکل فعلی کلون شوند. این فرم، ساخته شده است واکنش نشان دهید. بنابراین، هنگام ادغام یک اکشن برای کلون کردن آیتم، با استفاده از hx-post، لازم است که برخی ماشه فعال شود تا بخشی از برنامه واکنش نشان دهید می تواند پردازش کند.

یکی از جزئیات، که من در اینجا وارد آن نمی شوم، این است که این “پیوندها” به اقدامات در داخل یک فرم هستند، بنابراین در تماس با hx-post تمام فیلدهای فرم نیز ارسال می شود.

<span
  hx-post="/admin/my-action"
  hx-trigger="confirmed"
  hx-indicator=".htmx-indicator"
  title="Clonar"
>
  ...
</span>

O hx-trigger="confirmed" این به دلیل بخش زیر است، جایی که ما در مورد تایید برای اجرای عمل بحث می کنیم. به غیر از آن، در سمت سرور، با استفاده از django-htmx می توانیم یک هدر وارد کنیم HX-Trigger شلیک کردن a ماشه زمانی که عمل از HTMX تمام شده است:

def my_view(request):
    ...
    response = render(request, 'my_template.html', my_context)
    resp.headers['HX-Trigger'] = 'completeClone'
    return resp

داخل مشتری واکنش نشان دهند می توانیم رویداد را به آن اضافه کنیم document حباب رویداد devido ao:

useEffect(() => {
  const fetch = async () => {
    ...
  }

  document.addEventListener('completeClone', fetch);
  return () => {
    document.removeEventListener('completeClone', fetch);
  }
}, []);

برای نمایش تأییدیه‌های اجرای عملیات، از کتابخانه SweetAlert2 استفاده کردیم که قبلاً در پروژه بود تا در زمان‌های دیگر استفاده شود:

function confirmClone(element, title) {
  text = 'Deseja clonar o item <strong>"' + title + '"</strong>? Essa ação não poderá ser desfeita!'
  Swal
    .fire({
      title: 'Tem certeza?',
      html: text,
      showCancelButton: true,
      confirmButtonText: 'Sim, Clonar',
      cancelButtonText: 'Cancelar',
    })
    .then(function(result){
      if(!result.isConfirmed){
        return;
      }
      htmx.trigger(element, 'confirmed');
    });
}

خط htmx.trigger(element, 'confirmed'); آتش زدن ماشه این نیست hx-trigger="confirmed" انجام دادن span. در اینجا نیز باید تگ را تکمیل کنید:

<span
  hx-post="/admin/my-action"
  hx-trigger="confirmed"
  hx-indicator=".htmx-indicator"
  onclick="confirmClone(this, 'título do item!!!!')"
  title="Clonar"
>
  ...
</span>

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

اما، این می تواند یک مسئله مهارت مهلت و اولین باری که از مستندات استفاده می کنید، به طوری که دو بخش بالا به شدت بر اساس مثال های شما (اما نه مستندات شما) بود.

خوب، توسعه عملکرد واقعی با HTMX تجربه بسیار خوبی بود و من معتقدم که پروژه پتانسیل زیادی دارد، اگرچه در زمان های مختلف بسته به ساختار و اندازه پروژه، همچنان فکر می کنم که یک API (Rest یا مبتنی بر قصد) با یک کلاینت front-end دستکاری حتی ساده تر است.

با این حال، امیدوارم شانس بیشتری برای استفاده از آن داشته باشم HTMX ادغام شده در django-admin که اساساً سمت سرور.