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

Разработка веб-сайтовNode.JSDerby.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
Теги:tutorial
Хабы: Разработка веб-сайтов Node.JS Derby.js
+2
3,3k 22
Комментарии 2

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

Backend Developer
до 200 000 ₽Nation.betterМожно удаленно
Тестировщик веб-сервисов
от 40 000 до 70 000 ₽idPowersМожно удаленно
Node.js developer (infrastructure)
от 100 000 до 300 000 ₽ЯндексМосква
Node.js developer (infrastructure)
от 100 000 до 300 000 ₽ЯндексСанкт-Петербург
Node.js разработчик
от 120 000 до 160 000 ₽EquiteМожно удаленно

Лучшие публикации за сутки