would you mind posting a hello world of phoenix + htmx?
geofflangenderfer
100phlecs
Here’s a basic example of HTMX to “edit in line” when on the “Show” page of a post
https://github.com/100phlecs/hello_htmx
5
matthias_toepp
BartOtten
For starters:
-
HTMX is likely to be abandoned in. 5 years when the hype train has moved on. LiveView has established itself within a less hype focussed community.
-
HTMX sends a lot more data over the wire compared to LV when it tries to mimmick LV.
- HTMX is backend agnostic, so you can use it with every backend. Learn once, apply plenty.
2
superchris
As another alternative, I might suggest you checkout out live-templates, it’s a similar html first idea but connects to a stateful phoenix channel on the backend. It’s designed to be in an option if, for whatever reason, the front end html isn’t going to be served by Elixir. If your all in on Elixir already, LiveView is a great option.
2
sreyansjain
I would disagree to it. HTMX’s predecessor intercoolerjs is a lot older than Liveview.
So i don’t think its gonna disappear in some time.
There are many libraries with HTML over the wire idea like - Turbo, Unpoly, AlpineAjax etc.
I have used htmx and turbo for more than 2 years and liveview for around 4. My experience using them is as follows-
htmx:
- Follows the http protocol and the server needs to return html that would get inserted in the right place.
- Since it follows the http protocol you would need to create a lot of routes for calling server actions
- Need to be mindful of updating multiple places in the same page. There is a probability of missing things if you are not careful (although such scenarios are less frequent).
- Performance is slightly less than liveview but its not noticeable to the end users (non technical)
- JS integration is easier than with liveview - no hooks are needed (but we need to be a little mindful about reloads).
- No state on the server side, all state is in the client or the url
- If you have simple pages (for ex a static website) just putting hx-boost would make it a lost snappier.
Liveview:
- Based on web sockets
- The client and the server become one and the network gap dissolves so we can call the server functions from client without defining additional routes.
- No need to return html fragments, liveview would automatically figure out what to send based on state changes. This is advantageous especially when multiple places in the page needs to be updated. No extra care is required.
- Allows better locality of behavior for html and code as they can be in the same file. But inferior locality of behaviour for JS as it needs to be in hooks in a separate file.
- JS integration via hooks - slightly more complex than using vanilla js as we need to be mindful of liveview life cycle events. But you get used to it pretty soon.
- If you have simple static pages - liveview is not a good fit.
These are my 2 cents.
10
garrison
There is really only one difference between LiveView and HTMX: LiveView is stateful and HTMX is not. Everything else (like the much more thorough list above) is directly downstream of that.
Honestly the differences between what LiveView is (a stateful app on the server patching a thin client) and what HTMX is (stateless XHR into DOM) are substantial enough that I don’t really see how they can be compared at all. This is not to say that one is better than the other - they just do completely different things. The programming model is wildly different, and so are the use cases.
The only other thing to note is that what LiveView does is really only possible on the BEAM, as it can actually handle that many stateful connections without catching fire. The HTMX approach on the other hand is something you can do on any stack (including Phoenix!). But again, they are completely different approaches that are not useful for solving the same problems.
10
xpressgetaway
I think HTMX is a good alternative if you are building SPA with something like React or Vue.
0
matthias_toepp
From what I understand, they are both promoted as covering most of the use cases. I understand they use different approaches but it’s not clear to me why they are “not useful for solving the same problems”
0
derek-zhou
Define “most of the use cases”. I don’t believe in panacea, but that’s just me.
Liveview is the most advanced solution for a stateful server patching a client. On the other hand, HTMX is not unique for stateless XHR into DOM; there are prior arts, other well established solutions, and hand rolled solutions. HTMX has a catchy name but not really advancing the state of art.
1