Key Takeaways
- htmx is a JavaScript library that simplifies HTTP request handling by making common functionality available via HTML attributes.
- You can easily add it to your web app with a link to the htmx script on a CDN.
- You can use htmx for interactions like pagination, form validation, and inline editing, without writing any JavaScript.
The web development community has recently been abuzz with talk of htmx, but what is this exciting new technology? It turns out it’s a lot simpler than you might expect, but htmx’s usefulness may justify the hype.
What Is htmx?
htmx is a small JavaScript library with a narrow focus. It makes common JavaScript functionality available via HTML attributes. Here’s a simple example:
<a href="/about" hx-get="/about">Abouta>
This code shows a custom HTML attribute, hx-get. If you click this link, the htmx library will send an AJAX request and load the target page without a full browser refresh.
htmx has additional functionality that lets you send requests:
- From elements other than a and form.
- On events other than click and submit.
- Using HTTP methods other than GET and POST.
- That replace any parts of a page rather than just the whole thing.
Although htmx has support for technologies like CSS animation and WebSockets, its core aim is to simplify HTTP request handling.
How You Can Use htmx in a Simple Web App
htmx addresses specific functionality within web apps or websites, rather than the behavior of an entire app.
One big advantage of the library is how easy it is to start using. You can download and install a copy if you want, but since it has no dependencies, all you need to do to get started is add a link to the script on a CDN:
<script
src="https://unpkg.com/htmx.org@1.9.10"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous">script>
For local development and testing, you will need to set up a web server, like Apache, if you don’t already have one running. This is a requirement, even if you’re just experimenting with static files, because the file: protocol does not allow AJAX requests.
A Simple Example Using Infinite Scroll
Infinite scroll is a common technique that sites like Twitter use for their feed. When you reach the bottom of a list, infinite scroll loads more items for you to continue reading.
This feature naturally requires JavaScript to check the page scroll position and load the new items without refreshing the page. But htmx can do all this for you.
Take the following markup which represents a list of posts, using an image for each:
<ol>
<li><img src="http://placekitten.com/420/300" />li>
<li><img src="http://placekitten.com/400/320" />li>
<li><img src="http://placekitten.com/440/300" />li>
<li><img src="http://placekitten.com/420/340" />li>
<li><img src="http://placekitten.com/300/200" />li>
ol>
Imagine you have these items in a file, feed1.html, with more items in feed2.html, etc. Each page will then display one small subset of items that you can scroll within:
Now, you could use "next page" links to move from one page to another, but you can implement infinite scroll easily too. Just change the final item to:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
li>
Adding these four attributes to the final list item implements infinite scroll. Here’s what each attribute means:
Attribute | Value | Meaning |
|---|---|---|
hx-trigger | revealed | When this element first appears on screen... |
hx-get | feed2.html | ... send a GET request to feed2.html, ... |
hx-select | li | ... select the li elements from the response, ... |
hx-swap | afterend | ... and add them after this element. |
As you scroll to the bottom of the list, notice how the page loads new content automatically. You can confirm this by observing the scrollbar and checking your browser's developer tools:
Note that, with this simple static page setup, the feed2.html page includes a final item with an hx-get attribute set to feed3.html, and so on. Also note how htmx has added a listener for the scroll event.
Other Potential Uses for htmx
You can use htmx for many other common interactions, including:
- Pagination: load and replace items when the visitor clicks on a pagination link.
- Form validation: on submission, replace a form with either a confirmation message or a subset of the form.
- Progress bars: periodically update a progress bar’s value based on a ping response.
- Inline editing: swap out an element for a textarea containing that element’s value.
It’s possible to build each of these examples using standard JavaScript, htmx just makes the process much easier.
The Benefits and Drawbacks of htmx
Benefits
htmx can vastly simplify common interactions that can benefit many web applications, and even many websites. It allows designers, and others working with front-end web pages, to add functionality without having to learn JavaScript.
By abstracting common behavior, htmx ensures consistency across your projects and between them. Infinite scroll will behave the same way from page to page, regardless of who implemented it.
Since it emphasizes a declarative (what) approach rather than an imperative (how) one, htmx functionality is typically easier to understand and reason about.
Drawbacks
Although htmx can let you forget about JavaScript in many contexts, it cannot solve every problem for you! You’ll still need to write code to handle specific business logic and more low-level functionality.
Because htmx does a lot of work for you, there’s less potential for customizing behavior. This will often be a positive trade-off, but you’ll need to be prepared to hand off control.
html may let you avoid writing JavaScript, but you should still be aware that JavaScript code is running in the background. You might be tempted to use the hx-get attribute on every link, in place of an href attribute. But this introduces a dependency on JavaScript; if the code fails to run for whatever reason, your users will be left with a link that does nothing. You should always practice progressive enhancement to prevent this.
Post a Comment