آموزش HTMX به همراه Thymeleaf در Spring Boot - آخرین آپدیت

مقدمه Introduction

• آموزش HTMX برای Spring Boot: توسعه‌دهنده Thymeleaf HTMX for Spring Boot: Thymeleaf developer

• پیش‌نیازها و نکاتی که باید بدانید What you should know

1. شروع کار با HTMX 1. Getting Started with HTMX

• منابع HTMX (سایت رسمی، توییتر، گیت‌هاب) HTMX resources (htmx.org, Twitter, GitHub)

• مرور کلی پروژه Project overview

• مزایای استفاده از HTMX به همراه Thymeleaf و Spring Boot Benefits of using HTMX with Thymeleaf and Spring Boot

• تحلیل چرایی، زمان استفاده و موارد عدم استفاده از HTMX Analyze why and when to use and not use HTMX

2. نصب و به‌کارگیری HTMX در Spring Boot 2. Install and Leverage HTMX in Spring Boot

• به‌کارگیری اصلاح‌کننده‌های تریگر HTMX: keyup، changed و زمان‌بندی Leverage HTMX trigger modifiers: keyup, changed, and timing

• پیاده‌سازی HTMX با Thymeleaf: hx-get و hx-target Implement HTMX with Thymeleaf: hx-get and hx-target

• درک رویدادهای طبیعی پایه و تریگرها در المان‌ها Understand basic natural events and triggers on elements

• استفاده از hx-trigger در هدر درخواست‌ها برای اجرای بارگذاری Use hx-trigger in request headers for triggering a load

• نصب و استفاده از پلاگین HTMX و Thymeleaf در IntelliJ Integrate and use the HTMX & Thymeleaf IntelliJ plugin

• درک مبانی HTMX بدون داده‌های JSON Understand the basics of HTMX without JSON data

• تبدیل MPA به SPA با استفاده از HTMX Transform your MPA into a SPA with HTMX

• نصب و پیکربندی HTMX در پروژه Spring Boot و Thymeleaf Install and set up HTMX in a Thymeleaf Spring Boot project

3. تسلط بر جایگزینی (Swapping) در HTMX و بهبود تدریجی 3. Mastering HTMX Swapping and Progressive Enhancement

• پیاده‌سازی قابلیت hx-on برای گوش دادن به رویدادهای hx-swap Implement hx-on functionality to listen for hx-swap events

• آموزش استفاده از اصلاح‌کننده‌های اسکرول در hx-swap Learn to use hx-swap scrolling modifiers

• آموزش جایگزینی (Swapping) در HTMX Learn to use HTMX swapping

• زمان استفاده از hx-swap: afterbegin و beforebegin Decide when to use hx-swap: afterbegin and beforebegin

• بررسی hx-swap: beforeend، afterend و حذف المان‌ها hx-swap: beforeend, afterend, and deleting elements

• پیاده‌سازی hx-swap و استفاده از View Transition API Implement hx-swap and use view transition API

• تفاوت بین جایگزینی innerHTML و outerHTML Differentiate between inner and outerHTML swapping

• نمایش hx-post و hx-delete به همراه Spring Security Demonstrate hx-post and hx-delete with Spring Security

• درک افعال HTTP در هایپرمدیا Understand HTTP verbs with hypermedia

• نمایش hx-patch و hx-put به همراه Spring Security Demonstrate hx-patch and hx-put with Spring Security

4. بهینه‌سازی HTMX با مدیریت پیشرفته پاسخ‌ها و ادغام با Spring Boot 4. Optimizing HTMX with Advanced Response Handling and Spring Boot Integration

• کنترل نمایش المان‌ها با استفاده از هدرهای درخواست HTMX Control visibility using HTMX request headers

• استفاده از هدرهای پاسخ برای تنظیم پاسخ‌های HTMX Use HTMX response headers to set HTMX response headers

• تاثیرگذاری بر مرورگر با هدرهای پاسخ HTMX و HX-Trigger Browser influence with HTMX response headers with HX-Trigger

• پراسسورهای تسهیل‌کننده Thymeleaf برای ادغام با HTMX Thymeleaf convenience processors for HTMX integrations

• فیلتر کردن فراخوانی متدها با انوتیشن HxRequest Method invocation filtering with HxRequest annotation

• تنظیم HX-Retarget با استفاده از HttpServletResponse Set HX-Retarget using HttpServletResponse

• ادغام و استفاده از کتابخانه htmx-spring-boot Integrate and use the htmx-spring-boot library

• انوتیشن‌های هدر پاسخ Response header annotations

• استفاده از HX-Reselect و HX-Reswap با HttpServletResponse Use HX-Reselect and HX-Reswap with HttpServletResponse

5. افزایش تعامل با Out of Band Swaps و تکنیک‌های پیشرفته HTMX 5. Enhance Interactivity with Out-of-Band Swaps and Advanced HTMX Techniques

• پیاده‌سازی همزمان OOB swap و OOB selects با Thymeleaf Implement OOB swap and OOB selects together using Thymeleaf

• به‌روزرسانی همزمان سایر محتواها Update other content simultaneously

• درک OOB swaps و محلی بودن رفتار (Locality of Behavior) Understand OOB swaps and locality of behavior

• اجرای رویدادها و گوش دادن المان‌ها Trigger events and elements listening

• استفاده از OOB swaps برای حذف ردیف‌ها در Spring Boot 3.4.0 OOB swaps with row deletion using Spring Boot 3.4.0

• پیاده‌سازی OOB swaps برای ویرایش ردیف دانشجویان Implement OOB swaps on student with edit of row

• پیاده‌سازی OOB swaps برای دانشجویان به همراه انیمیشن Implement OOB swaps on student with animation

• تغییرات در Spring Boot و htmx-spring-boot-thymeleaf Changes with Spring Boot and htmx-spring-boot-thymeleaf

• پیاده‌سازی OOB swaps در Spring Boot 3.4.0 Implement OOB swaps with Spring Boot 3.4.0

6. تکنیک‌های پیشرفته سمت کلاینت و بهبودها با HTMX 6. Advanced Client-Side Techniques and Enhancements with HTMX

• پیاده‌سازی اسکرول بی‌نهایت (Infinite Scroll) Implement infinite scroll

• پیاده‌سازی Drag and Drop با Sortable.js Implement drag and drop with Sortable.js

• ادغام HTMX با مودال‌های Bootstrap Integrate HTMX with Bootstrap modal

• نمایش استفاده از hx-indicator برای ردیابی پیشرفت Demonstrate using hx-indicator to track progress

• سفارشی‌سازی تاییدیه های UI در HTMX Customize the HTMX UI confirmations

• فعال‌سازی دیباگ برای رویدادهای HTMX Turn on debugging for HTMX events

• پیاده‌سازی جستجوی فعال (Active Search) Implement active search

7. ارتباطات آنی با HTMX: وب‌سوکت‌ها و رویدادهای ارسالی سرور (SSE) 7. Real-Time Communication with HTMX: WebSockets and Server-Sent Events

• بررسی افزونه‌های HTMX و گزینه‌های موجود Explore HTMX extensions and available options

• مرور وب‌سوکت‌ها و رویدادهای ارسالی سرور (SSE) Review of WebSockets and server-sent events

• فعال‌سازی افزونه WebSocket با قابلیت چت Enable WebSocket extension with a chat feature

جمع‌بندی Conclusion

• مسیرهای آینده: HTMX با Spring Boot و Thymeleaf HTMX with Spring Boot and Thymeleaf: Next steps