Hotwire Discussion

Django Backend Support for Hotwire

That’s awesome, thank you. I was trying to do the same but got stuck at streams :slight_smile:

The work has been moved into the hotwire-django/turbo-django repository, for anyone interested in contributing or checking it out! The demo lives at /experiments/chat/ in that repo.

2 Likes

Keep having to add a new account: looks like this forum’s auth is very broken…

Anyway, just added another chat example: https://github.com/danjac/chatter/. This uses latest Turbo + Stimulus2.

This is a very basic Slack clone. You can create new rooms, and “@” message other users to add them to your room.

It uses a consumer to push two turbo stream payloads when a new message is added: one to update the room you are in, the other updates the sidebar - so if you get “@mentioned” in another room or a new message is added, this is highlighted in the sidebar, just like Slack.

There were a few false starts to get this working, but ultimately it turned out a lot simpler than I thought: just wrap the messages in the right turbo-stream content. I have a helper function to wrap Django’s render_to_string to handle this. The frontend setup is done in a Stimulus controller.

@0xc4 please add me as well. This looks like something we would like to help out with.

0xc4 please add me too (github user danjac)

I’ve updated my cookiecutter project to use latest Turbo/Stimulus. There’s some boilerplate there which will probably be removed when there’s a stable django-hotwired library and things get a bit more standardized. It also includes mixin classes for allauth integration: there was quite a bit of work to get these working due to Turbo not allowing opt-outs for forms (I think this will be fixed soon).

Not much really needed on the Django side: just some common response and mixin classes to render Turbo-Stream and Turbo-Frame classes. This seems to make more sense than e.g. template tags - the custom response classes wrap partial templates so you can re-use the same templates in initial render.

Another trick: handling multiple turbo-stream payloads in a single request. For example, suppose you have a shopping cart page with a “total amount” label you want to display at both the top and bottom of the page, and perhaps also in the navbar across the site. This should update automatically whenever the user updates the amount of a single item in the cart, or deletes an item.

You just use django.http.StreamingHttpResponse and yield each payload in your generator:

def update_cart(request):
  # handle update in session / DB and recalculate "total_amount"...

  def render():
    for target in ["total-cart-nav", "total-cart-top", "total-cart-bottom"]:
      yield f'<turbo-stream id="{target}" action="update">{total_amount}</turbo-stream>'

  # remember the correct content type!
  return StreamingHttpResponse(render(), content_type="text/html; turbo-stream;")
2 Likes

I just took some time to check your work and repo @davish and I’m impressed by the work you and @0xc4 have done so far. I will try to play around a bit with your code and work a bit in a branch. I have a situation here where I need some lazy loading capabilities which would be pretty cool basedn on the Streams (and does not cover many edge cases as far as I can judge so far). So its rather a matter of initially rendering a placeholder and starting off a separate worker for the long running process and when its done just send an update via replace action of Turbo Streams.

So, thank you very much for driving it that much forward :slight_smile:

Hi @0xc4 I would be very happy to get added to the org too :slight_smile:

@0xc4 Excellent work aggregating the efforts on hotwire-django.

MY github username is arvindamirtaa. I’d like to contribute however I can.

@0xc4 I forgot my github Username, its JulianFeinauer. Thanks :slight_smile:

Hey folks, in addition to the github org that @0xc4 created, I just created a Slack Workspace hotwire-django where we can have discussions. Everybody is welcome to join via this link here, or otherwise just ping me for an invite: https://join.slack.com/t/pragmaticmindsgruppe/shared_invite/zt-kl0e0plt-uXGQ1PUt5yRohLNYcVvhhQ

3 Likes

Hello @0xc4, my github is haruanm , I came from the twitter thread.

Hey @haruanm feel free to also join us on slack https://join.slack.com/t/hotwire-django/shared_invite/zt-kl0e0plt-uXGQ1PUt5yRohLNYcVvhhQ

:+1:

hi @0xc4 can you please add @n4cr github account as well?

Thanks

@JulianFeinauer Invite link is locked to pragmaticminds domain. Can I get an invite link?