Usually we have a base template with a content block that a child template can extend. The extend keyword supports variables as well. So we can create a dummy base template, e.g. fragment_base.html, that contains only the content block and if a request is coming from HTMX we set the base template to the dummy one, so the rendered template will contain only the fragment.
Because they are actually two distinct views: one is a details view, the other one is a form view. HTMX loads the form view and replaces the respective part of the page. But it needs to contact the backend for the form, you don't have the data model on the client like with an SPA framework, so you cannot generate the form.
HTMX is basically a JavaScript framework that makes the traditional request-response approach feels like an SPA via replacing only part(s) of the current page with the response. In this case: it loads a small form, submits it to the backend, then replaces the respective part of the page with the updated markup. The state is kept only at the backend.
With some constraints you can create a page that works with or without JS. The same endpoint can be used for serving HTML fragments for HTMX and full page for JS-disabled clients since the HTMX request can be detected by the HX-Request header.
> ...basically a JavaScript framework that makes the traditional request-response approach feels like an SPA via replacing only part(s) of the current page with the response.
Didn't that used to be called AJAX or REST or something?
Yes! HTMX is a better API on top of a XMLHttpRequest for this approach. A hypothetical next iteration of the HTML standard could make most of HTMX unnecessary. Maybe one day.
You're probably comparing htmx with client-side framework like React. Unlike those client-side ui framework, htmx is used to enhance standard html pages, such as those outputted by server-side web framework. Those frameworks typically renders detail and form page separately, and htmx can combine them into a single interactive page. For example, when you reply a comment in HN, it'll open the form as a new page, and when you submit the comment, it open another page. htmx can combine all of those pages into a single interactive page.
Should be a bit faster because it only requests a piece of html fragment which then get swapped into the dom instead of reloading the whole page again.
Yes. That's why I specified "simple page loads". If your frameworkless website is slow then the fault doesn't lie with the nature of http or the intrinsic overhead of full page loads. You've got a shitty backend framework, database or network.
It's already supported with the client-side-templates extension [1]. HTMX can fetch JSON from the backend then calls e.g. nunjucks.render() with the data.
Not at all, you can preload as many data as you wish and use vanilla or a companion JS framework like Alpine.js or HyperScript or any web-component to make the current page interactive without fetching the backend. It's a trade-off between the initial page size vs. additional network delay.
HTMX helps you create an SPA-like experience without using a full SPA framework. You can utilize the full power of your favourite backend framework (e.g form validation, template-system, authorization, etc.) without writing JS code directly. Some examples:
- Infinite scroll: HTMX detects the specified viewpoint and requests the next batch of content. The backend returns only the rendered partial HTML content that HTMX appends to the bottom of the page.
- Next page of a paginated content: if the users clicks on the 'Next page' button, the backend returns only the rendered HTML content of the next page, HTMX replaces only this part of the page.
- Form submission/validation: you can skip most of the frontend validation and use the backend for it. If the form has an error, HTMX replaces the new rendered form with the inlined error messages. Otherwise it can forward the user to the next page or shows some success message.
- Inline edit: e.g. click on the row in a table to load a small form just for that line. After the submission the backend returns the updated rendered table.
- Chained select input elements: when the user selects something in the first dropdown, it triggers an HTMX request that loads just the next select element that reflects the value of the first one.
- Background task with progress bar: just return a delayed, automatically triggered HTMX request from the backend until the task is finished. The status (e.g width) of the progress bar is also calculated on the backend.
- Search preview: with the builtin debounce filter trigger a search request that returns the search suggestions.
- Multiple small(er) updates on the page: one HTMX request can return multiple HTML partials that updates any part of the page. If you couple it with the builtin automated polling/websocket, you can build a live dashboard easily.
Of course you can do any of these with a SPA framework coupled to the backend API. But with HTMX you don't have to write a single line of JS, just put some htmx-something="..." attributes in the backend template files.
Site bug report: on the pricing page the 'Use cases' and `Features` links in the footer are throwing errors in the browser console. I guess they are trying to jump to a specific section on the home page without going to the home page first.
Yes, Go templating is quite hard. There was a feature request[1] to implement the Django/Jinja2-like Pongo2 template engine[2], but got rejected because it would have been a too big change.
Templates are the ugliest part of Django. They are completely unaware of the target syntax, so very often the template itself cannot be validated as HTML, which makes it difficult to lint or reformat.
The only tool I'm aware of that can (mostly) correctly reformat Django templates is the PyCharm/IntelliJ family of IDEs, but their reformatting often introduces subtle breakage (such as adding new lines inside tag attributes) and requires careful review.
> Refactoring shouldn't exist in this hypothetical game
Without refactoring the factory planning phase would be more difficult since I don't want to fill the best places on the map with unmaintainable, non scalable factories. Refactoring should be very easy, e.g. like in Factorio with construction bots: just press ctrl + x and the bad part of the factory is gone.
If you want to build an abomination, try SeaBlock mod [1] for Factorio. You don't have to refactor anything, space and resources are infinite, so just build a new factory next to the old one after you research a new tier of technology.
