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

Автор: sfxws2006

Источник