Название: Server-Driven Web Apps with htmx
Автор: R. Mark Volkmann
Издательство: Pragmatic Bookshelf
Год: August 2024 (Book version: P1.0)
Страниц: 182
Язык: английский
Формат: pdf (true), epub, mobi
Размер: 15.2 MB

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 jаvascript 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 jаvascript 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 jаvascript, 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.

I have firsthand experience with many web development approaches including vanilla jаvascript, jQuery, AngularJS, Angular, React, Vue, and Svelte. For me, each of these provided improvements over what came before. But these were incremental improvements. I find htmx to be very different from these frameworks and libraries. It’s a breath of fresh air that I’m excited to share with you! Let’s discover how htmx simplifies web development, resulting in applications that are easier to understand and require less code.

With htmx, endpoints convert data to HTML (or plain text) rather than JSON, and that is returned to the browser. jаvascript in the browser no longer needs to parse JSON and generate HTML from it. It merely needs to insert the HTML into the DOM. A full-page refresh isn’t necessary.

The htmx library is quite small—less than 17KB minified and compressed. Pages load faster due to downloading less jаvascript code than when using typical SPA frameworks. You can see these improvements with app metrics such as First Contentful Paint and Time to Interactive. Htmx applications also provide faster server interactions because the time spent generating and parsing JSON is eliminated.

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 jаvascript and libraries such as Alpine and _hyperscript.
Use the htmx jаvascript 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.