Skip to main content

Django labjs templatetags.

Project description

Labjs is a django-compressor plugin that provides django templatetags to easily Labify your scripts, using the labjs javascript loader.

Together with django-compressor it can make downloading your js files extremely efficient.

What is LabJS?

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site’s performance.

LABjs by default will load (and execute) all scripts in parallel as fast as the browser will allow. However, you can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Using LABjs will replace all that ugly “<script> tag soup” – that is all the <script> tags that commonly appear in the <head> or end of the <body> of your HTML page. The API is expressive and chaining, to let you specify which scripts to load, and when to wait (“block”), if necessary, for execution before proceeding with further execution. The API also easily allows inline code execution coupling (think: inline <script> tags).

Django-labjs uses labjs queues

In order to make it easy to use labjs with the django templating system, django-labjs implements labjs using it’s queuing features:

$LAB
        .queueScript("script1.js") // script1, script2, and script3 do not depend on each other
        .queueScript("script2.js") // so execute in any order
        .queueScript("script3.js")

        .queueWait(function(){  // can still have executable wait(...) functions if you need to
            alert("Scripts 1-3 are loaded!");
        })
        .queueScript("script4.js") // depends on script1, script2 and script3 being executed before
        .queueWait(function(){script4Func();});

And somewhere close to the closing </body> tag:

$LAB
    .runQueue() // execute the queue as a $LAB chain

Installation

Currently available only on github, install using pip:

pip install -e git+git://github.com/ashwoods/django-labjs.git

Add labJS to INSTALLED_APPS in your settings.py file. * Notice the upper JS.

Set LABJS_ENABLED to True if you want to enable labifying.

Usage

Include the labjs javascript file somewhere in your html templates under <head>. Don’t forget to include labjs templatetags, and wrap javascript imports AND any javascript inlines that depend on those imports between {% labjs %} and {% endlabjs %} tags. Use {% wait %} tags to insert an empty queuewait()

Usage example:

{% load labjs %}

<script type="text/javascript" src="{{ STATIC_URL}}labjs/LAB.min.js"></script>

{% labjs %}
<script type="text/javascript" src="src/path_to_js.js" />
...
...

{% wait %} // use wait to insert an empty .queueWait()

// You have to place any inline javascript that depends on any of the Labified scripts
// under a labjs templatetag. It will automatically place it under a queueWait.

{% compress js %} // you can use compress tags too inside.
<script type="text/javascript">
...
...
<script>
{% endcompress %}
{% endlabjs %}

...
...

// At almost end of page run the queue, either with the {% runqueue %} templatetag
// or manually if you want to add custom waits and queue some more scripts.


{% runlabjs %}

Settings

For now, django Labjs uses django-compressor parsers, so any settings on which parser to use with django-compressor affects which html parsers django-labjs uses.

The only labjs specific setting is LABJS_ENABLED, that defaults to the opposite of DEBUG. When LABJS_ENABLED is False, the templatetags do nothing.

Tips

When using labjs, labjs ensures that the javascript you need has already loaded and executed with the use of wait() or in our case, queuewait(). This functionality is normally achieved by using shortcut functions like jquery’s $.ready().

When using labjs, however, ready() might not be required, and could be slightly counterproductive. $.ready() waits for browser dom ready, which you need if you are going to be doing dom interaction. Otherwise, it might not be necessary. For more information, read this stack answer.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-labjs-0.2.0.tar.gz (19.7 kB view details)

Uploaded Source

File details

Details for the file django-labjs-0.2.0.tar.gz.

File metadata

File hashes

Hashes for django-labjs-0.2.0.tar.gz
Algorithm Hash digest
SHA256 6ad6ee62d878376683f9cad160b78da5e5e580e6dc2057ee185da1413d31e089
MD5 e60c8ff862962027f4c57468a6bcea5d
BLAKE2b-256 708011a411189c288160a62e174f91a1de9bc62b3492e0d1ae9fbbac79c70fe6

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page