Derby.js templates for templates

Derby.js offers a mechanism that allows you to significantly increase the speed of page loading by encapsulating CSS into HTML code given to the client. In production mode Derby.js minifies HTML, CSS, JS. As indicated in the documentation , Stylus and / or LESS are used.
The default file is: styles / app / index.styl , where we can take advantage of all the syntax advantages provided by Stylus.
What to do if our project provides for the use of several themes (styles) for templates?

UI is our solution

The UI mechanism is one of the mechanisms in Derby.js that allows you to create custom components. Its feature is that:

1. it can be connected "on demand"
2. he can use his styles
3. you can implement your logic of behavior of components

So - this is exactly what we need.

Step by step it will look like this:

$ npm install derby $ derby new app $ cd app 

')
In the simplified version, we assume that when we go to the address / page1 , we connect some styles (or, let's say, a theme). In the transition / page2 others, etc.
We will proceed from the position that there are no common styles. Therefore the file
styles / app / index.styl will contain only:

 @import 'nib/vendor' 

So, let's execute the following preparatory command set:

 $ 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 

File contents

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 file

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

Please note that scripts we have no include files. In this particular case it is not necessary. However, if you need to add functionality and template tags for a specific component, then you can add the necessary logic at any time.

Content of STYL files

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

First line

 @import 'nib/vendor' //        

We change routers

Open the file: lib / app / index.js and fill it with the following contents:

 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(); }); 

According to our initial idea, we “connect” the topic for specific routers.
If you have the need to introduce a theme for a group of routers, then they can be put into a separate file and during initialization you can use the following structure:

 var app = require('derby').createApp(module) .use(require('derby-ui-boot')) .use(require('../../ui/theme2')); 

For me personally, the MVC concept is closer, accordingly splitting routers into controllers, which will more closely match the action-controller logic. The separation of the View and Model is specific, so there’s no need to talk about the full MVC pattern. However, this is a separate topic for discussion.

Check

 $ npm start 

In the browser, go to:

 http://localhost:3000/page1 http://localhost:3000/page2 

Conclusion

We looked at one of the mechanisms for using multiple styles / themes for templates in Derby.js
The advantages of this method - we are spared from the introduction of styles that are not used, significantly expanding the set of tools that we can use in for each specific topic, by creating Derby.js UI-plugin .
The disadvantage , I see, is that for a fairly simple operation I have to perform quite a lot of actions, which, it seems to me, could have been avoided with greater flexibility in structuring the logic of the framework. But the latter is very subjective.

Sources

Derby.js official website
derbyjs.com/#stylesheets
learnboost.imtqy.com/stylus
lesscss.org
github.com/codeparty/derby-ui-boot
Derby.js materials