| #summary Javascript and CSS dependencies loading in Melange |
| #labels Phase-Design,Contents-Draft,Importance-Featured |
| |
| = Introduction = |
| |
| To make page loading faster we use [http://labjs.com/ LAB], which allows us to load all scripts asynchronously and evaluate them in specific order, without making the browser wait for all scripts to be loaded before allowing users to interact with the page. |
| Along with this, we have a simple dependency management in place. More dependencies (CSS, remote javascript and inline javascript) can be easily added into Django templates, along with some context for javascript files that are meant to work inside Django templates. |
| |
| = Dependencies = |
| |
| == General Dependencies == |
| |
| General dependencies (e.g. Purr plugin, jqGrid, etc.) are written inside _melange.dependency-YYMMDD.js_ file. It is basically a collection of arrays which list either |
| |
| * other dependency arrays (for example *s.jqgrid*, which includes all javascript files that need to be loaded for lists to work). This means that all dependency arrays can be nested. The *unpack()* function will take care of linearize the nested arrays. |
| |
| * null, which basically says to the downloader to wait for the former script to be evaluated before evaluating the next. For example, you can't load jqGrid if jQuery is not downloaded and evaluated. |
| |
| * a string, which contains the full path of a script to be downloaded. |
| |
| == Template Dependencies == |
| |
| All template specific JS and CSS dependencies should be listed into an array inside the *dependencies* block. The base template provides specific facilities to include CSS files and to give context to Javascript files related to Django templates. You can also include inline scripts that need to be ran after some other script is loaded. |
| So, in each template you can create an array like this: |
| |
| {{{ |
| [ |
| dep.melange.menu, |
| null, |
| css("soc/content/css/search_page.css"), |
| tc( |
| "soc/content/js/templates/modules/gsoc/program/list/allocation-100413.js", |
| {"slots_number": 25} |
| ) |
| ] |
| }}} |
