Preferences

Seems like a ton of added complexity to avoid using JavaScript/a fat client

Doing htmx is just as simple as doing server side rendering. Yes you still have a javascript dependency but that's a lot simpler than a client side javascript framework for pulling data out of a data API and rendering it client side.

I don't think anyone's complaint about server side rendering has ever been that it was too complex.

The core thing is a lot of nice UX patterns are harder with server side rendering. Multi-page forms? Now you’re juggling around state. “Form has N rows”? Now that’s a thing. “Form has N heterogenous rows” is another thing.

Then you get into things like how no server side rendering strategy has the equivalent to React “just write an inline helper function for this page”, so you need to create partials in files all over. And what if you’d like to statically verify that your templates have all the content in place? Proper typing? Who hasn’t had a page fall over because there was some missing context variable 3 layers deep.

The thing with the API based flow and client side rendering (with React at least) when you have it set up nicely is “add a list view with pagination and search with a modal to create a resource if needed, and some inline editing” can be done by opening a single file and getting there with 2 dozen lines. Server side rendering strategies in practice tend to buckle a bit if you try to be modular enough, and in many cases you need to open one file per checklist on your project. Code locality issues are real IMO

Disclaimer: I’ve done both, messing around with HTMX on a project and think it’s pretty cool. But it’s mainly because I don’t have all of the nice patterns from work projects that I’m tying this. If startup costs weren’t a thing I’d go with a client side system most days of the week.

I wouldn’t say we’ve hit the center of the bullseye quite yet, still experimenting with the exact patterns of organizing and structuring a project using this approach.

But so far we’ve landed on using the django-components library [1] to build something akin to Vue’s single file components. HTML, CSS, JavaScript, and Python “business logic”, all in one file.

That component is then used in the Django templates, or in other component’s HTML, and it all seems to work very React-like in terms of an organized structure of composable components. Combined with HTMX the traditional SSR challenges you mention seem fairly straightforward to handle.

> what if you’d like to statically verify that your templates have all the content in place? Proper typing?

Can you say more about this? Would this be using TypeScript in React to verify types, or something more involved? I’m trying to understand this and what the equivalent might be in this “dynamic SSR” scenario.

[1] https://github.com/EmilStenstrom/django-components

Yeah I'm talking mainly about React + Typescript as a combo. With more gnarly Django templates sometimes it's hard to even know what we are looking at in a template, whereas inside a React component I'm going to be a "jump to definition" away, not just for components (or template tags in the case of Django, I know PyCharm offers good jump to def there, including for stuff like Angluar!), but for variables and the like as well.

I think django-components only has part of the story there, because even if that helps writing out your page, you're still looking at going to the other side of the frontend/backend wall to add, at the very least, an endpoint using that template. And if you're following this whole "hypertext API and data API as separate things", you'll need to also code handling of submitting any data, and routing involved.

I'm not against this stuff entirely, because I think there's a bit of a Go-like niceness to how it's "at worst" boilerplate (that you can abstract over on a per-project basis). But if you have a comfortable, well designed API all that work spread over you templates and controllers might actually all just be in one place.

It's absolutely ok to have alpine handle a big form, you don't have to never use js with htmx.
I’d argue javascript frameworks are a ton of added complexity. I send html, browser renders.
Not having to write your app a second time in javascript seems like less complexity to me. ¯\_(ツ)_/¯
We have a team of Python devs who push data around and do analytics, reporting, etc

They added real-time search results to our Django SSR site in 2 lines of HTMX.

It’s the opposite of added complexity.

I'd say this is a very useful library to have that provides a lot of React-like features without the overhead of a build step or frankly, needing to learn React on top of building the backend in some other language and framework. Compare the simplicity of 'hx-get' to the verbiage needed for a simple XHR request in vanilla JS, and the benefits become clear.

IMO, it's a great option for rapid prototyping and for projects that can be done with whatever backend stack you already have.

I think the idea is that your hypermedia api and data api are not the same thing and the general shape of your data api should not be based on the needs of your front end.
Depends what you are trying to build. If you are building a complicated app that requires lots of states and you want it in the form of a SPA. Sure might be a bad fit.

Lots of use cases could benefit from a hypermedia flow.

This item has no comments currently.

Keyboard Shortcuts

Story Lists

j
Next story
k
Previous story
Shift+j
Last story
Shift+k
First story
o Enter
Go to story URL
c
Go to comments
u
Go to author

Navigation

Shift+t
Go to top stories
Shift+n
Go to new stories
Shift+b
Go to best stories
Shift+a
Go to Ask HN
Shift+s
Go to Show HN

Miscellaneous

?
Show this modal