Server-Driven Web Apps with Htmx

کتاب Server-Driven Web Apps with htmx یک راهنمای عملی برای توسعه وب با htmx است. این کتاب نشان می‌دهد چگونه می‌توان بدون وابستگی زیاد به جاوااسکریپت، برنامه‌های وب تعاملی و پویا ایجاد کرد.

ویژگی‌های کلیدی:

• رویکرد سرور-محور: به جای ارسال JSON و مدیریت پیچیده در فرانت‌اند، سرور فقط HTML تولید می‌کند و htmx آن را در صفحه قرار می‌دهد.

• تعاملات پویا: استفاده از htmx برای ارسال درخواست‌های AJAX، وب‌سوکت و SSE بدون نوشتن جاوااسکریپت اضافی.

• یکپارچگی با هر زبان: قابل استفاده با Django، Flask، Node.js، Rails، ASP.NET و سایر فریم‌ورک‌های سمت سرور.

• کاهش پیچیدگی: جایگزینی React/Vue با htmx برای پروژه‌هایی که نیاز به مدیریت وضعیت پیچیده ندارند.

• مثال‌های عملی: شامل نمونه‌هایی از نحوه پیاده‌سازی CRUD، فیلترهای پویا، به‌روزرسانی‌های زنده و فرم‌های تعاملی.

مزیت htmx در مقابل روش‌های سنتی SPA:

• عملکرد سریع‌تر (زیرا مرورگر کمتر نیاز به پردازش داده‌ها دارد)

• کدنویسی ساده‌تر و کاهش وابستگی به فریم‌ورک‌های فرانت‌اند

• بهینه‌سازی SEO ( چون HTML سمت سرور تولید می‌شود)

این کتاب برای توسعه‌دهندگانی که به دنبال یک رویکرد ساده‌تر و کارآمدتر برای توسعه وب هستند، بسیار مناسب است.

htmx is a library that adds logic and server interaction to HTML; you get the effect of using a front-end SPA framework without writing front-end code. Use any server-side programming language and framework to build server applications with endpoints that simply return snippets of HTML. Dynamically update portions of the current web page from HTTP responses. Add interactivity with JavaScript and libraries such Alpine and _hyperscript. Make your apps more secure by escaping user-supplied content and specifying a Content Security Policy. Go beyond basic HTTP requests with WebSockets and server-sent events.

The htmx JavaScript library gives you a new way to craft web applications. The htmx approach differs significantly from that of the currently popular single-page application (SPA) frameworks; rather than write a bunch of JavaScript, you simply annotate HTML elements before you send them to the browser. The resulting code is easier to understand and modify, and because it downloads less to the browser and doesn’t need JSON creation and parsing, you’ll find it performs better, too.

• Rethink web application design; write code in any language that simply responds to requests with htmx snippets.
• Dynamically update portions of the current web page directly from the server.
• Implement common patterns such as lazy loading, input validation, CSS transitions, active search, optimistic updates, pagination, infinite scroll, polling, and click-to-edit.
• Add interactivity with JavaScript and libraries such as Alpine and _hyperscript.
• Use the htmx JavaScript API to simplify DOM operations.
• Make your web apps more secure: escape user-supplied content, use Subresource Integrity hashes, and enforce a Content Security Policy.
• Go beyond the basic HTTP request/response pattern with WebSockets and server-sent events.

Discover a simpler way to implement web applications that emphasizes web fundamentals.

Table of Contents

1. Jumping In  

2. Exploring Server Options  

3. Developing Endpoints  

4. Recipes for Common Scenarios  

5. Implementing Interactivity  

6. Utilizing the htmx JS API  

7. Adding Security  

8. Beyond Request/Response

What You Need:

• A modern web browser and the ability to build and run a local HTTP server using the server-side language and framework of your choice.
• The code examples are fully compatible with htmx 2.0.

About the Author

Mark Volkmann is a Partner and Distinguished Engineer at Object Computing, Inc. in St. Louis where he has provided software consulting and training since 1996. As a consultant, Mark has assisted many companies with JavaScript, Node.js, htmx, Svelte, React, Vue, Angular, Swift, SwiftUI, and much more.