Server-Driven Web Apps with htmx: Any Language, Less Code, Simpler Code

✍ Scribed by R. Mark Volkmann

• Publisher: Pragmatic Bookshelf
• Year: 2024
• Tongue: English
• Leaves: 184
• Edition: 1
• Category: Library

✦ Synopsis

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.

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.

✦ Table of Contents

Cover
Table of Contents
Foreword
Acknowledgments
Preface
Required Knowledge
1. Jumping In
Choosing a Tech Stack
Using htmx Attributes
Creating Your First Project
Creating a CRUD Application
Your Turn
Wrapping Up
2. Exploring Server Options
Making the Grade
Popular Choices
Our Choice
JavaScript Tooling
Your Turn
Wrapping Up
3. Developing Endpoints
HTTP Requests
HTTP Responses
Endpoint Targets
Widening the Scope
Performing Out-of-Band Swaps
Triggering Events
Putting It Into Practice
Your Turn
Wrapping Up
4. Recipes for Common Scenarios
Boosting
Lazy Loading
Input Validation with API Calls
Deleting an Element
CSS Transitions
Resetting a Form
Active Search
Optimistic Updates
Pagination
Infinite Scroll
Toggling Selection
Polling
Custom Dialogs
Adding Headers to All Requests
Click to Edit
HTML and JSON Endpoints
Automating Reload
Your Turn
Wrapping Up
5. Implementing Interactivity
Alpine
_hyperscript
Your Turn
Wrapping Up
6. Utilizing the htmx JS API
DOM Methods
Styling Methods
Event Methods
Other Methods
htmx.config Object
htmx.ajax Method
htmx.process Method
Your Turn
Wrapping Up
7. Adding Security
Scrutinize Resources
Escape User-Supplied Content
Sanitize User-Supplied Content
Make Cookies Secure
Make CDN Downloads Safer
Specify a Content Security Policy
Cross-Site Scripting Attacks (XSS)
Your Turn
Wrapping Up
8. Beyond Request/Response
WebSockets
Server-Sent Events (SSE)
Your Turn
Wrapping Up

✦ Subjects

Web Development; Computer Programming; htmx; JavaScript; WebSockets; AJAX