My idea was that I would issue a request to the backen, validate that, pass the appropriate request to the db, retrieve the data, maybe format that data (I assume htmx likes the data preformatted in html as opposed to json) and return that to the frontend.

So if I understand the meme correctly, it is now possible (always has been? 😛 ) to speak directly with the db through the frontend?

Not sure what you are using but my guess is you can easily create a context from the database as an object and pass it to the frontend instead of converting to json and then using js to fill in the html

But I'm thinking in django mindset, not sure how other frameworks would work

I am not using anything at the moment. I am trying to decide on a tech stack. Currently leaning towards fastapi+htmx

I do not understand what you write about context. the point of the backend is that you have to do validation and all kinds of checks, right?

Sure, but a database could do the same thing

Okay, I have not done that before.

As long as it's just type validation

I am thinking credentials.

If it's something domain logic then probably not

let's say I want to fetch some rows from a db, no validation required. How would you wrap it html tags? Because htmx kind of assumes valid html is returned, right?

html
  <table class="dt" hx-sse="connect:/newmail/{{ mailbox }}/">
      <thead>
          <tr>
              <th>To</th>
              <th>From</th>
              <th>Subject</th>
              <th>Date</th>
          </tr>
      </thead>
      <tbody hx-trigger="sse:new_mail" hx-swap="afterbegin">

Can anyone see why my SSE events aren't being prepended to my

tbody

? The events are coming in okay. They just don't seem to be being added.

Might be that they en up generating invalid html once they get added?

I had some issues with tables and doing oob-swaps

is there a common pattern/tutorial for htmx on a static site, swapping in fragments and push-url, such that a refresh of the pushed url actually renders the whole page not just the fragment? This may not be even an htmx thing .. just first time using a static site. 🙂

Simplest example being like Home/About Us, where you swap About Us into the center body div, end up at /about-us , but of course can't refresh that page because the outer content has the styling and so forth

unless i shouldn't be swapping in a fragment but rather the whole page and let htmx settle it

Putting the

hx-sse

on the

tbody

seems to have fixed it. I could have sworn that it was possible to put the sse on some other element and then have other elements listen for messages

To appreciate the meme, forget about the parts that aren't mentioned. 🙂 A similar back-end that translated the DB to JSON is the one transforming to HTML; what you lose is a JavaScript interpretation of that JSON, so that it can transform it to HTML. You could write a stored procedure to return HTML, but... uh... don't. 😉

@User seems to have done something like that: https://discord.com/channels/725789699527933952/725789747212976259/931415813888569394

I was using the wrong attribute value. I did

hx-trigger="sse:new_mail"

which will have been trying to trigger a request or similar. I needed

hx-trigger="swap:new_mail"...

. That does the swaps that I need.

You're correct about htmx expecting valid HTML. If you've read the reasoning behind htmx, you've seen the part that extols the virtues of the browser rendering HTML, because there are decades of it doing that - it's good, reliable, and fast. If take that principle and apply it to your back-end, it will make sense. Whether it's a template-engine-driven thing (Razor / Liquid / etc.), or an HTML-with-substitution-tags thing (I'm thinking PHP here), back-ends generating HTML have multiple decades of experience there, and they too are good, reliable, and fast. Most also have settled best-practices on efficiently retrieving from a data store. So - you still have the back-end, doing validation / authentication / etc., but instead of JSON (which has to be interpreted and transformed client-side), it returns HTML, which just has to be put in the DOM and rendered.

oo - just a little plug for https://animate.style/ I just added

animate__pulse

to the new ``s I'm sending via SSE and new table rows get a little pulse when they get added.

@User Cool thanks for the answer, that clears up a lot for me.

Would you recommend contacting the db directly via the frontend? Say I want to fetch a some images to populate a list? Would you recommend against fetching the images directly and then with javascript wrapping them in the relevant html?

It still feels weird to me to concat a large string in python and then returning that.

😀 json is a long string

True 😄 So that is the way to do it, then.