Future: Push component updates from server to client

[EmilStenstrom]

This might be something for a separate library, or it could be something we include here, but I'm leaving it here as I think it's an exciting way forward for django-components.

I would like to see a way to push component updates from the server to the client. Some idea how this could work:

1. After the first render is complete we add a new js-file in the component_js_dependencies area
2. That JS sets up a websocket connection to the server
3. On the server side we add a update_client method to components, that rerenders the component with a new context dict, and sends that to all connected clients
4. Each client listens to update-events, finds the component in the HTML via a unique ID, and replaces it with the new HTML (in a way that doesn't break focus if this is a form)

More about the philosophy behind this approach: https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/

How Phoenix LiveView does this (interesting to compare to): https://www.youtube.com/watch?v=8xJzHq8ru0M

[EmilStenstrom]

ASGI support require (kinda) Django 3.0, so maybe this feature should be 3.0 only?

[EmilStenstrom]

Step 4 needs DOM diffing, and I think we should go with morphdom which Phoenix LiveView uses. This means we can send the full HTML to the client over the wire (but we can optimize this later), and have morphdom diff the sent HTML with the current HTML and construct the minimal DOM operations needed.

[EmilStenstrom]

Ideas how this would look in the README. Note: Not working code, just an idea to try to figure out the syntax.

Push component updates from the server to all connected clients

Django-components adds the option to push updates from the server to all connected clients. This makes it possible to build interactive widgets, without writing any JavaScript at all, the library handles all communication for you, based on the components you've already defined in Python. The push happens over a websocket connection, so to do this efficiently we require at least Django 3.0, running in asgi mode.

Start by enabling live updates in your settings.py:

COMPONENTS = {
    "component-websocket": True,
    ...
}

Add this to your urls.py:

...
from components import urls as component_urls

urlpatterns = [
    path("django-components/", include(component_urls), name="django-components"),
    ...
]

You can use any path you want, but the name "django-components" is important. The library uses this name to look up what path to connect to for live updates.

We will now inject a script tag in your template where you put your {% component_css_dependencies %} tag. That script will start a websocket connection, set up a listener for update messages from the server, and efficiently update the DOM.

To update a component from the server, call a your_component.update({"key": "value"}) and watch in amazement how all connected web browsers simultaneously gets updated, without you writing any JavaScript.

[adamghill]

django-components is new to me (I just saw it at https://forum.djangoproject.com/t/django-components-create-simple-reusable-template-components/6924 today), but I really like the idea!

I have a few thoughts about this particular feature since I've been working on https://www.django-unicorn.com/ which aims to solve the reactive portion, but uses plain old AJAX for the functionality. It still might be useful if you want an example of the DOM diffing you mention above since I use morphdom (which I actually forked from a version used by https://laravel-livewire.com/) at https://github.com/adamghill/django-unicorn/blob/master/django_unicorn/static/js/morphdom/2.6.1/morphdom.js.

For other Django libraries that implement the reactive portion with websockets, I listed all the ones I could find at https://www.django-unicorn.com/docs/#full-stack-framework-python-packages, so they might be useful as well. I'll add you to the components section of that page in the next day or so as well.

Looking forward to seeing your implementation!

[EmilStenstrom]

@adamghill Thank you for bringing my attention to django-unicorn! Really looks polished, with lots of documentation and a community around it. Well done! Also: Thanks for linking here from the docs.

My goal with this issue is to enable this for an existing site with as few changes to the code as possible. I'm thinking highjacking links and make them go over websocket instead. We'll see if I can get it working, and if this is even something that should be in the django-components library or just be a separate project.

[EmilStenstrom]

I've decided that this should not be in this library, but a separate library. I'm closing this for now.