Работа со статикой в Django

Михаил Юматов

Доклад можно было смело назвать django-gears, поскольку речь шла в основном об этой амбициозной билиотеке, которую разрабатывают ребята из Trilan. Она призвана заменить django-compressor и webassets, обладает большей частью их функциональности, к тому же хранит зависимости прямо в css/js (по аналогии с sprockets). Пока приложение ещё не в продакшене, но от этого не менее интересно.

Transcript

1. Работа со статикой в
   Django
   

   View Slide

2. Проблемы
   • количество файлов статики на странице
   • размеры файлов
   • Less, Stylus => CSS
   • Co3eeScript, ClojureScript => JavaScript
   • компиляция шаблонов на клиенте
   

   View Slide

3. К чему они приводят
   • появляется огромный script.js (style.css), в
   котором много тысяч строк
   • комментариев нет
   • код плохо читается
   • табуляция вместо пробелов (экономия
   байтов же!)
   • Less, Co3eeScript и т.п. не используются
   

   View Slide

4. Что нужно от
   инструмента
   • объединение файлов статики в один
   • минификация и gzip-сжатие кода
   • поддержка Less, Stylus, Co3eeScript и т.д.
   • прозрачная и незаметная работа
   • удобная отладка
   

   View Slide

5. Что уже есть
   • django_compressor
   • webassets
   • другие библиотеки, похожие на webassets
   • django-gears (порт Sprockets)
   

   View Slide

6. django_compressor
   {% load compress %}
   {% compress js %}
   
   
   
   
   
   {% endcompress %}
   
   <br/>script><br/>

   View Slide

7. webassets
   register('application', Bundle(
   'js/models.js',
   'js/collections.js',
   'js/views.js',
   'js/router.js',
   'js/application.js',
   output='js/gen/application.js',
   ))
   # в шаблоне:
   {% load assets %}
   {% assets "application" %}
   
   {% endassets %}
   

   View Slide

8. django-gears
   /*
   * application.js
   *
   * =require models
   * =require collections
   * =require_directory templates
   * =require views
   * =require router
   */
   $(function() {
   new Router();
   Backbone.history.start({pushState: true});
   });
   

   View Slide

9. django-gears
   
   

   View Slide

10. django-gears: отладка
    {% load gears %}
    {% js_asset_tag "js/application.js" %}
    

    View Slide

11. django-gears: отладка
    
    
    
    
    
    
    
    
    

    View Slide

12. django-gears
    • http://git.io/gears
    • обертка над библиотекой Gears
    • еще есть Flask-Gears и gears-cli
    

    View Slide

13. Зависимости
    • require
    • require_self
    • require_directory
    • require_tree (скоро)
    • depend_on (скоро)
    

    View Slide

14. Компиляция в CSS и JS
    • Из коробки поддерживаются:
    • Less
    • Stylus
    • Co3eeScript
    • Handlebars
    • Цепочка расширений определяет процедуру
    компиляции:
    • application.js.co3ee
    • style.css.styl
    

    View Slide

15. Минификация
    • slimit (Python)
    • cssmin (Python)
    • UglifyJS (node.js)
    • clean-css (node.js)
    

    View Slide

16. Использование
    python manage.py runserver
    

    View Slide

17. Использование
    python manage.py collectassets
    python manage.py collectstatic
    

    View Slide

18. Спасибо за внимание
    Вопросы?
    • @yumatov
    • http://trilandev.com
    • https://github.com/yumike
    • https://github.com/trilan
    

    View Slide