Giter VIP home page Giter VIP logo

turbo-lazy's Introduction

Warning

This library is unmaintained. Integrating Hotwire and Django is so easy that you are probably better served by writing a little bit of Python in your code than using a full-blown library that adds another level of abstraction. It also seems that the Django community is leaning more towards HTMX than Hotwire so you might want to look over there if you want more "support" (but we still think that Hotwire is very well suited to be used with Django)

Turbo-Lazy

Basically, it comes down to the following statement:

{% lazy 'apps.core.partial_views._machine_card' poll_status.machine_id %}
    {% include 'core/partials/_machine_card_loading.html' with name=poll_status.name machine_id=poll_status.machine_id %}
{% endlazy %}

The content inside the lazy tag is rendered right away in a turbo-frame with a src tag that points to an auto generated URL where the view given lazy controller is called (with the parameters given in the controller). So this can be a slow loading view as its lazy loaded. This is based on turbo-frames, i.e. the lazy loading is client initiated. With something like turbo-streams (and the django implementation), it would be possible to push the update from the server which would be even cooler (especially a single channel could be used for multiple elements). So, the page will be rendered as follows:

<turbo-frame id="1c87a216-6ad5-4320-861e-261caf3e5dd7" src="/lazy/?token=eyJpZCI6ICIxYzg3YTIxNi02YWQ1LTQzMjAtODYxZS0yNjFjYWYzZTVkZDciLCAidmlldyI6ICJhcHBzLmNvcmUucGFydGlhbF92aWV3cy5fbWFjaGluZV9jYXJkIiwgImFyZ3MiOiBbMV0sICJrd2FyZ3MiOiB7fX0=">   
    <div class="card bg-primary text-white mb-4">
        <div class="card-body">
    
            <b>Machine 1</b>
        
        </div>
        <div class="card-footer" style="height: 7rem;">
            
            <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
    
        </div>
        <div class="card-footer d-flex align-items-center justify-content-between">
            
            <a class="small text-white stretched-link"
               href="/machine/1/" target="_top">View Details</a>
            <div class="small text-white"><i class="fas fa-angle-right"></i></div>
    
        </div>
    </div>
</turbo-frame>

And a call to /lazy/?token=... will return the response of calling the view function apps.core.partial_views._machine_card with given positional argument poll_status.machine_id also wrapped inside a <turbo-frame> tag with the same id so that it will automatically swapped by turboframe.

Example

A complete example can be found under example/django_example. Go to this directory and proceed.

Optionally, create a custom virtualenv

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

If you want to use the current snapshot of turbo-lazyinstall it via

pip install ../../

Then start everything via

python manage.py migrate
python manage.py runserver

and go to

http://localhost:8000/

Release Notes

0.2.2

  • The install dependency django-tag-parser>=3.2 was missing in setup.py

0.2.1

  • Template folder was accidentally named wrong in the published version

0.2.0

  • Package renamed to 'turbo_lazy' and also root folder renamed to 'turbo_lazy'.
  • Template Tag {% include_view %} was added to integrate complete views into templates (in module partials)

0.1.2

  • Complete working Django Example

0.1.1

  • Several minor fixes

0.1.0

  • Initial Release

turbo-lazy's People

Contributors

c4ptaincrunch avatar joirichi avatar julianfeinauer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

turbo-lazy's Issues

Merging into main `turbo-django` package

This looks like great work! I was wondering if people think it makes sense to merge this back into turbo-django so that we have a single package with all the Turbo utilities concentrated? I can imagine individual packages for different features getting a bit unwieldy.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.