دوره آموزشی استفاده از HTMX همراه با Thymeleaf در فریم‌ورک Spring Boot

دوره آموزشی استفاده از HTMX همراه با Thymeleaf در فریم‌ورک Spring Boot

8 ساعت 38 دقیقهمتوسط2025-04-15

مدرسین

Michael D. Rodgers, Jr

Michael D. Rodgers, Jr

Java Web Applications Engineer and Consultant

جزئیات دوره

اگه دوست داری اپلیکیشن‌های وب داینامیک و جذاب بسازی، این دوره کامل و جامع بهترین راهنمای توئه برای یادگیری HTMX، Thymeleaf و Spring Boot. تو این دوره یاد می‌گیری چطور HTMX رو به راحتی تو پروژه‌های Spring Bootت ادغام کنی، قالب‌های Thymeleaf رو بهتر کنی و درخواست‌های AJAX رو ساده‌تر و کارآمدتر بسازی.

با یادگیری ترفندهای مختلف HTMX مثل تریگرها و مدیریت رویدادها، می‌تونی صفحات وب خیلی تعاملی و واکنش‌گرا بسازی که تجربه کاربری خیلی خوبی به بازدیدکننده‌ها می‌ده. علاوه بر این، می‌فهمی چطوری با تغییر بخش‌های مختلف DOM و استفاده از قابلیت «out-of-band swapping» عملکرد سایت رو بهینه کنی.

همچنین می‌تونی کنترل کامل روی دیده شدن یا رفتاری که عناصر صفحه دارن با استفاده از هدرهای درخواست و پاسخ HTMX داشته باشی و امنیت برنامه‌ات رو با ادغام Spring Security تضمین کنی.

دوره بهت یاد می‌ده چطور به‌روزرسانی‌های زنده و لحظه‌ای با WebSocket و Server-Sent Events (SSE) تو اپلیکیشن Spring Bootت پیاده کنی و چطور با استفاده از اکستنشن‌های قوی HTMX، قابلیت‌های برنامه‌ت رو افزایش بدی و عملکردش رو به سطح بالاتری برسونی.

اهداف یادگیری دوره (به زبان ساده و قابل فهم)
بفهمی HTMX چطور نسبت به روش‌های دیگه تو ساخت اپلیکیشن‌های وب داینامیک بهتر عمل می‌کنه و چطور قالب‌های Thymeleaf و درخواست‌های AJAX تو Spring Boot رو تقویت می‌کنه.

یاد بگیری چطور HTMX رو نصب کنی، تو پروژه Spring Bootت وارد کنی و با استفاده از تریگرها و مدیریت رویدادها صفحات تعاملی بسازی.

نحوه انجام عملیات swapping تو HTMX، دستکاری بخش‌های مختلف DOM و استفاده از قابلیت out-of-band swapping رو یاد بگیری تا تجربه کاربری بهتری بسازی.

یاد بگیری چطور با هدرهای درخواست و پاسخ HTMX، کنترل روی نمایش و رفتار عناصر صفحه داشته باشی و HTMX رو با Spring Security تطبیق بدی.

نحوه توسعه و ادغام WebSocket و Server-Sent Events (SSE) برای به‌روزرسانی زنده در اپلیکیشن Spring Boot رو یاد بگیری.

توانایی بررسی، دسته‌بندی و پیاده‌سازی اکستنشن‌های قدرتمند HTMX برای ارتقاء عملکرد و قابلیت‌های برنامه رو به دست بیاری.

مهارت ها

Spring BootWeb Development ToolsWeb DevelopmentOpen SourceOne-Off

سرفصل ها

مقدمه

  • HTMX for Spring Boot - توسعه دهنده Thymeleaf
  • آنچه باید بدانید

شروع به کار با HTMX

  • تجزیه‌و‌تحلیل چرا و زمان استفاده و عدم استفاده از HTMX
  • مزایای استفاده از HTMX با Thymeleaf و Spring Boot
  • منابع HTMX (htmx.org، Twitter، GitHub)
  • نمای کلی پروژه

HTMX را در Spring Boot نصب و استفاده کنید

  • HTMX را در پروژه Thymeleaf Spring Boot نصب و راه‌اندازی کنید
  • پلاگین HTMX & Thymeleaf IntelliJ را ادغام و استفاده کنید
  • اصول HTMX بدون داده‌های JSON را درک کنید
  • MPA خود را با HTMX به SPA تبدیل کنید
  • HTMX را با Thymeleaf - hx-get و hx-target پیاده‌سازی کنید
  • وقایع اولیه طبیعی و عوامل محرک را درک کنید
  • از اصلاح کننده‌های ماشه HTMX استفاده‌کنید - keyup، تغییر و زمان بندی
  • از hx-trigger در هدر درخواست برای راه‌اندازی بار استفاده کنید

تسلط بر تعویض HTMX و ارتقاء پیشرونده

  • استفاده از مبادله HTMX را یاد بگیرید
  • بین مبادله HTML درونی و بیرونی تفاوت قائل شوید
  • تصمیم بگیرید که چه زمانی از hx-swap - afterbegin و beforebegin استفاده کنید
  • برای گوش دادن به رویدادهای hx-swap عملکرد hx-on را اجرا کنید
  • hx-swap - قبل از پایان، پس از پایان، و حذف عناصر
  • hx-swap را پیاده‌سازی کنید و از view transition API استفاده کنید
  • استفاده از اصلاح کننده‌های اسکرول hx-swap را یاد بگیرید
  • افعال HTTP را با هایپر مدیا درک کنید
  • hx-post و hx-delete را با Spring Security نشان دهید
  • hx-patch و hx-put را با Spring Security نمایش دهید

بهینه‌سازی HTMX با مدیریت پاسخ پیشرفته و ادغام فنری بوت

  • کنترل دید با استفاده از هدرهای درخواست HTMX
  • تأثیر مرورگر با هدرهای پاسخ HTMX با HX-Trigger
  • HX-Retarget را با استفاده از HttpServletResponse تنظیم کنید
  • از HX-Reselect و HX-Reswap با HttpServletResponse استفاده کنید
  • کتابخانه htmx-spring-boot را ادغام کرده و از آن استفاده کنید
  • فیلتر فراخوانی روش با حاشیه نویسی HxRequest
  • پردازنده‌های راحتی Thymeleaf برای ادغام HTMX
  • از هدرهای پاسخ HTMX برای تنظیم هدرهای پاسخ HTMX استفاده کنید
  • حاشیه نویسی سرصفحه پاسخ

افزایش تعامل با تعویض خارج از باند و تکنیک‌های پیشرفته HTMX

  • سایر مطالب را به طور همزمان به روز کنید
  • تبادلات OOB و موقعیت رفتار را درک کنید
  • تعویض OOB را روی دانش آموز با انیمیشن اجرا کنید
  • تعویض OOB را روی دانش آموز با ویرایش ردیف اجرا کنید
  • تعویض OOB را با Spring Boot 3.4.0 اجرا کنید
  • تغییرات با Spring Boot و htmx-spring-boot-thymeleaf
  • OOB با حذف ردیف با استفاده از Spring Boot 3.4.0 تعویض می‌شود
  • رویدادها و عناصر گوش دادن را تحریک کنید
  • تعویض OOB و OOB را با هم با استفاده از Thymeleaf انتخاب کنید

تکنیک‌ها و پیشرفت‌های پیشرفته سمت مشتری با HTMX

  • با استفاده از hx-indicator برای ردیابی پیشرفت نشان دهید
  • اشکال زدایی را برای رویدادهای HTMX روشن کنید
  • تأییدیه‌های رابط کاربری HTMX را سفارشی کنید
  • HTMX را با مدال بوت استرپ ادغام کنید
  • اسکرول بی نهایت را پیاده‌سازی کنید
  • جستجوی فعال را اجرا کنید
  • کشیدن و رها کردن را با Sortable.js پیاده‌سازی کنید

ارتباط بلادرنگ با HTMX - سوکت‌های وب و رویدادهای ارسال شده از سرور

  • افزونه‌های HTMX و گزینه‌های موجود را کاوش کنید
  • بررسی WebSockets و رویدادهای ارسال شده توسط سرور
  • افزونه WebSocket را با قابلیت چت فعال کنید

نتیجه گیری

  • HTMX با چکمه فنری و آویشن - مراحل بعدی
۱۵۰,۰۰۰ تومان