‏بهبود تدریجی فرم‌ها با htmx

نویسنده تو این پست تعریف می‌کنه که برای سرویس بوکمارکش ties یه فرم ویرایش نسبتاً پیچیده ساخته: هم اسم بوکمارک عوض می‌شه، هم بوکمارک به لیست‌ها وصل می‌شه. نکته‌ش اینه که فرم با روش بهبود تدریجی (progressive enhancement) ساخته شده؛ یعنی بدون جاوااسکریپت هم کامل کار می‌کنه و htmx فقط وقتی JS فعال باشه چندتا راحتی اضافه می‌کنه.

به گفته‌ی نویسنده سخت‌ترین بخش این سبک «حالت موقت»ه: چیزی که کاربر وارد کرده ولی هنوز تو دیتابیس ذخیره نشده و باید از رفت‌وبرگشت به سرور سالم رد شه. تو یه SPA این داده تو حافظه‌ی جاوااسکریپت می‌مونه، ولی اینجا باید با خود HTML مدیریتش کنی. ساده‌ترین راه اینه که سرور مقدارهای فرم رو تو جواب خطا برگردونه تا کاربر مجبور نشه دوباره تایپ کنه.

راه دوم اینه که state رو تو مسیر صفحه یا کوئری‌استرینگ بذاری؛ اون‌وقت با ریلود صفحه، بوکمارک کردن یا اشتراک لینک هم از بین نمی‌ره — که برای جستجو گزینه‌ی خوبیه. نویسنده می‌گه موقع نوشتن همین پست تازه با formaction روی دکمه‌های submit آشنا شده، که فقط وقتی همون دکمه زده شه مسیر و پارامترهای فرم رو عوض می‌کنه.

یه نکته‌ی دسترس‌پذیری هم وسط کار درمیاد: کلید Enter همیشه اولین دکمه‌ی submit فرم رو می‌زنه و کنترلی روش نداری. برای همین نویسنده فرم رو به دو فرم جدا شکسته تا Enter زدن تو فیلد جستجوی لیست‌ها باعث تغییر اسم بوکمارک نشه. برای تشخیص اینکه کدوم دکمه زده شده هم یا از formaction استفاده می‌کنه یا از name و value خود دکمه.

پیشنهاد عملی‌اش اینه که اول کل قابلیت رو بدون htmx بنویسی تا وسط کار به بن‌بست نخوری، بعد htmx رو روش بپاشی — مثل جستجوی زنده و اسپینر انتظار. برای تست هم JS رو از devtools خاموش می‌کنه یا hx-disable می‌ذاره. درباره‌ی hx-target هنوز به جواب قطعی نرسیده و می‌گه معمولاً کل صفحه رو swap می‌کنه، چون swap‌های خیلی محدود باعث موندن داده‌ی قدیمی تو بقیه‌ی صفحه می‌شن.

نکات کلیدی:

• فرم اول بدون جاوااسکریپت ساخته می‌شه، بعد htmx فقط تجربه رو بهتر می‌کنه
• «حالت موقت» با مقادیر فرم، مسیر صفحه یا کوئری‌استرینگ نگه داشته می‌شه
• formaction روی دکمه‌ی submit، مسیر و پارامترها رو فقط برای همون دکمه عوض می‌کنه
• کلید Enter همیشه اولین دکمه‌ی submit رو می‌زنه؛ شکستن فرم به دو فرم این مشکل رو حل می‌کنه
• swap کل صفحه کم‌ریسک‌تر از swap‌های ریز و out-of-band هست