Derby.js темы для темплейтов

    Derby.js предлагает механизм, который позволяет значительно повысить скорость загрузки страницы путем инкапсуляции CSS в HTML код отдаваемый клиенту. В production mode Derby.js минифицирует HTML, CSS, JS. Как указано в документации используются Stylus и/или LESS.
    По умолчанию подключается файл: styles/app/index.styl, где мы можем воспользоваться всеми синтаксическими преимуществами которые предоставляет Stylus.
    Что делать, если в нашем проекте предусмотрено использование нескольких тем (стилей) для темплейтов?


    UI — наше решение


    Механизм UI — в Derby.js один из механизмов позволяющий создавать пользовательские компоненты. Его особенностью является то, что:
    1. его можно подключить «по требованию»
    2. он может использовать свои стили
    3. можно реализовывать свою логику поведения компонентов

    Итак — это как раз то, что нам нужно.

    Пошагово это будет выглядеть так:
    $ npm install derby
    $ derby new app
    $ cd app
    


    В упрощенном варианте предположим, что при переходе по адресе /page1 у нас подключаются одни стили (или скажем иначе — тема). При переходе /page2 другие и т. д.
    Будем исходить из положения, что общих стилей нет. Поэтому файл
    styles/app/index.styl будет содержать только:
    @import 'nib/vendor'
    


    Итак, выполним следующий подготовительный набор команд:
    $ mkdir ui/theme1
    $ touch ui/theme1/index.js
    $ mkdir ui/theme2
    $ touch ui/theme2/index.js
    $ mkdir styles/theme1
    $ touch styles/theme1/index.styl
    $ mkdir styles/theme2
    $ touch styles/theme2/index.styl
    


    Содержимое файлов

    ui/theme1/index.js

    var config = {
      filename: __filename
    , styles: '../../styles/theme1'
    , scripts: {
    
      }
    };
    
    module.exports = function(app, options) {
      app.createLibrary(config, options);
    };
    


    Файл ui/theme2/index.js
    var config = {
      filename: __filename
    , styles: '../../styles/theme2'
    , scripts: {
    
      }
    };
    
    module.exports = function(app, options) {
      app.createLibrary(config, options);
    };
    


    Обратите внимание, что scripts у нас не имеет подключаемых файлов. В данном конкретном случае это не нужно. Однако если у вас есть потребность для конкретного компонента добавить функционал и темплейт-теги — то вы в любой момент можете добавить необходимую логику.

    Содержание файлов STYL

    styles/theme1/index.styl
    styles/theme2/index.styl


    Первая строка
    @import 'nib/vendor'
    // Дальше вы можете разместить все необходимые стили
    


    Изменяем роутеры

    Открываем файл: lib/app/index.js и наполняем следующим содержимым:

    var app = require('derby').createApp(module)
    	.use(require('derby-ui-boot'));
    
    app.get('/page1', function(page, model, params, next) {
    	app.use(require('../../ui/theme1'));
    	page.render();
    });
    app.get('/page2', function(page, model, params, next) {
    	app.use(require('../../ui/theme2'));
    	page.render();
    });
    


    Согласно нашей первоначальной затеи мы «подключаем» тему для конкретных роутеров.
    Если же у вас есть потребность внедрения темы для группы роутеров — то их можно вынести в отдельный файл и при инициализации уже использовать вот такую конструкцию:
    var app = require('derby').createApp(module)
    	.use(require('derby-ui-boot'))
    	.use(require('../../ui/theme2'));
    


    Лично для меня ближе концепция MVC, соответственно разбиение роутеров по контроллерам, что будет больше соответствовать логике action-controller. Разделение View и Model специфическое, поэтому о полноценном паттерне MVC говорить не приходится. Однако это отдельная тема для обсуждения.

    Проверяем


    $ npm start
    

    В браузере переходим по адресу:
    http://localhost:3000/page1
    http://localhost:3000/page2
    


    Вывод


    Мы рассмотрели один из механизмов использования множественных стилей оформления/тем для темплейтов в Derby.js
    Достоинства этого способа — мы избавлены от внедрения стилей, которые не используются, значительно расширяем набор инструментов, которые мы можем использовать в для каждой конкретной темы, путем создания Derby.js UI-плагина.
    Недостаток, я вижу в том, что для достаточно простой операции мне приходится осуществлять достаточно много действий, которые, как мне кажется, можно было бы избежать большей гибкостью в структурировании логики фреймверка. Впрочем последнее очень субъективно.

    Источники


    Официальный сайт Derby.js
    derbyjs.com/#stylesheets
    learnboost.github.io/stylus
    lesscss.org
    github.com/codeparty/derby-ui-boot
    Материалы по Derby.js
    Поделиться публикацией

    Похожие публикации

    Комментарии 2

      0
      Если есть желание подгружать разные стили для разных страниц, то может быть проще создать разные файлы стилей и в темплейтах страниц прописать ссылки на них. Если хочется Stylus, LESS, Sass, то можно использовать какой-нибудь Grunt.
      Так же есть возможность создать несколько клиентских приложений, каждое со своими стилями, темплейтами и js.

      Статья в любом случае будет полезна всем, кто разбирается с Derby, спасибо.
        0
        Тут речь не совсем о разных клиентских приложениях, а о мультискиненге.
        Причем у каждой из тем, при надобности может быть свой функционал прописанный в плагине.
        Преимущество выше описанного метода в том, что он, как по мне, строго в логике Derby.jx 0.5.x с одной стороны (включая расположение вьюх, структуры расположения STYL и пр.), а с другой стороны использует сильные стороны Derby — расширяемость, в т.ч. за счет template components и UI-plugins.

        А на добром слове — спасибо!!!

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое