Live data from Hacker News

Htmx in a Nutshell

htmx.org

351–360 of 414 posts

Re: Htmx in a Nutshell

#351
post #69

I don't know any javascript, but is it really that bad of a language that you need new libraries every day and workarounds so that you don't have to write it?

a lot of people in the last 15 or so years felt strongly that writing javascript was not "real programming", and this facilitated the birth of a thousand solutions to avoid writing it

Re: Htmx in a Nutshell

#352
post #3

I am burnt out (but recovering!) with web dev and htmx is what I am using for my project. Django, DRF, Postgres, tailwind and HTMX. I am so tired of all the front end frameworks and all the complexity that gets added. At some point I think you need it and you get returns from it but hearing more people in the industry recognize and talk about how JS everything isn't always the answer gives me hope. I like what HTMX h…

How do you integrate tailwind and django? As far as I know (which isn't very much), tailwind encourages the use of "components" which comes very naturally with other frontend frameworks. But with django, do you put each component into a template, like ` ` and `{% include "button.html" %}` when you use a button?

That's one way. Or you use something like slippers[0] or Tailwind components using @apply.

[0] https://mitchel.me/slippers/docs/introduction/

Re: Htmx in a Nutshell

#353
post #202

Earlier quoted context omitted.

Can you speak of your experience with liveviewjs? I've been looking at it, and htmx, and everything else, over the past few months for a heavily-interactive frontend project I need to start. I'm an experienced ios dev, but in at the deepens with all this js frontend stuff. There are so many options! The one thing I'm sure of is I don't want to use react.

The only real advice I can offer is: Try to implement an example of the most complicated UI interaction that you have in your (conceptual) application in both and then decide. Development-by-random-recommendation is usually a recipe for disaster.

For extra credit look for places in your UI where you need to work with as much data as possible from as many different places as possible. One of places that justifies heavier front end frameworks and SPAs is when you can precompute things on the client side that make it more performant.

Things like efficient updates of large tables of data in the browser that was constructed out of multiple database tables… things like order + shipping status + customer shipping address… lots of day to day business stuff is like this and while you can manage to do it with just HTML and forms with or without JavaScript … it’s very easy to fall into performance traps between big form data submissions, potentially tricky JavaScript loops to shrink the data submission and backend N+1 query updates… it gets pretty tricky sometimes.

The point is the most complicated part of your UI may not be the most visually complex part. It can be just a simple data grid or html table… it can be the intersex of your requirements around the data being handled, the workflow/interactions on the data, and the performance/usability requirements of the users (offline editing + sync on reconnect basically requires a SPA)

Re: Htmx in a Nutshell

#354

Earlier quoted context omitted.

Do you know off hand how much JavaScript your pages are including now versus when you were using ClojureScript/React? I ask because I know ClojureScript is built on Google Closure which has pretty advanced dead code elimination (and typically for React functionality people use libraries like reagant that take advantage of this - I think?). Presumably with htmx users are having to download the whole htmx lib.

The JavaScript we use is now much, much less. Actually, most times we just sprinkle in a bit of hyperscript for the times we need something a bit more dynamic than plain htmx. _hyperscript is a separate library by the same author that provides an HTML type of scripting in the attribute tags. Still, in general, because we are generating fragments of hypermedia (HTML) on the server and returning that to target elements…

As we use less and less Javascript, thanks to htmx, i'm no so reluctant to use vanilla JS when needed.

Re: Htmx in a Nutshell

#355
post #3

I am burnt out (but recovering!) with web dev and htmx is what I am using for my project. Django, DRF, Postgres, tailwind and HTMX. I am so tired of all the front end frameworks and all the complexity that gets added. At some point I think you need it and you get returns from it but hearing more people in the industry recognize and talk about how JS everything isn't always the answer gives me hope. I like what HTMX h…

I'm a huge proponent of Tailwind. What I tell people is to ignore their gut impression and just try it out. Equivalently, my first impression of HTMX is that I kind of hate it. But I could see it being similar to Tailwind, where you just need to try it out and then it'll click. Is that fair to say?

Agree. The idea of Tailwind just feels wrong because it goes at the opposite of everything we can believe regarding content/style separation. But the fact is, it's amazing to use.

Maybe it's not for everyone, but it really is worth a try, with an open mind.

Re: Htmx in a Nutshell

#357

Earlier quoted context omitted.

Spoiler warning: it doesn't. Unless you only consider the happiest path, as in "I develop on localhost with zero latency, 100% uptime, and my backend validation logic perfectly matches my frontend policies" (and probably a lot more other "if"s and "only"s).

this is an interesting comment. so it has been sold to me like that. Could you talk about where it fails. alpinejs does make the claim that it is a "better jquery". What is the development experience here? especially for backend teams (python, java, whatever) who are now also building HTMX.

> Could you talk about where it fails

If the HTTP request that htmx has made returns a status code >= 400 or times out then the response will not be swapped into the body.

There are several events that htmx fires, once of which can catch `responseError` [1] and you can write some Javascript to handle it according to your requirements (throw a toast, swap anyway by setting `evt.detail.shouldSwap = true`.

In a project I'm working on we use htmx to load the content for modals, so we have small handlers on htmx events to display the modal whilst the request is being made, put a spinner indicator in the modal body to show the user something is happening and then swap the body in once the request has completed.

We've also used `HX-Trigger` response header [2] which htmx helpfully catches and allows us to easily hook onto, we've got ones to display a toast notification, hide open modals, refresh content divs, untick bulk action checkboxes, etc.

All in, our project probably has around 200 lines of Javascript for the different event handlers we do, so it doesn't eliminate the need to write any JS, but it's significantly reduced and is pretty much all event handlers.

1 - https://htmx.org/events/#htmx:responseError

2 - https://htmx.org/headers/hx-trigger/

Re: Htmx in a Nutshell

#358
post #3

I am burnt out (but recovering!) with web dev and htmx is what I am using for my project. Django, DRF, Postgres, tailwind and HTMX. I am so tired of all the front end frameworks and all the complexity that gets added. At some point I think you need it and you get returns from it but hearing more people in the industry recognize and talk about how JS everything isn't always the answer gives me hope. I like what HTMX h…

I'm a huge proponent of Tailwind. What I tell people is to ignore their gut impression and just try it out. Equivalently, my first impression of HTMX is that I kind of hate it. But I could see it being similar to Tailwind, where you just need to try it out and then it'll click. Is that fair to say?

For me, it clicked immediately. It is a simple way to partial updates of the UI, without having to worry about a ton of tooling. It also pushes most of the logic to the backend, which is nice. It also constrains some of the UX decisions, leaving less room for useless craziness.

Re: Htmx in a Nutshell

#359

Earlier quoted context omitted.

Spoiler warning: it doesn't. Unless you only consider the happiest path, as in "I develop on localhost with zero latency, 100% uptime, and my backend validation logic perfectly matches my frontend policies" (and probably a lot more other "if"s and "only"s).

this is an interesting comment. so it has been sold to me like that. Could you talk about where it fails. alpinejs does make the claim that it is a "better jquery". What is the development experience here? especially for backend teams (python, java, whatever) who are now also building HTMX.

+100 for alpinejs.

Alpinejs is indeed the successor to Jquery.

React forces you to think like how its designers view the world.

While alpinejs does not really interfere with your workflow. That's a huge sell for team like mine where we are working with legacy projects and devs of various levels of XP. We can get a jnr dev up and running in a week flat.

Re: Htmx in a Nutshell

#360

Earlier quoted context omitted.

this is an interesting comment. so it has been sold to me like that. Could you talk about where it fails. alpinejs does make the claim that it is a "better jquery". What is the development experience here? especially for backend teams (python, java, whatever) who are now also building HTMX.

> Could you talk about where it fails If the HTTP request that htmx has made returns a status code >= 400 or times out then the response will not be swapped into the body. There are several events that htmx fires, once of which can catch `responseError` [1] and you can write some Javascript to handle it according to your requirements (throw a toast, swap anyway by setting `evt.detail.shouldSwap = true`. In a project…

this was super duper useful!

so would you say that one of the first things a htmx based project should do is handle all the error conditions ? like all the 40x and 50x ? and stuff like your modal thinggy ?

how do you develop the js here ? do you setup a different nodejs/npmjs toolchain. or do the jqueryish development of edit->browser reload ?

Post reply on HN