Future: Push component updates from server to client about django-components HOT 6 CLOSED

@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.

from django-components.

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

from django-components.

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.

from django-components.

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.

from django-components.

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!

from django-components.

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

from django-components.