Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
0 likes958 views
Документ описывает использование Node.js и методологии БЭМ (блок, элемент, модификатор) для разработки серверных интерфейсов. В нем представлена организация файловой структуры для проектов на основе БЭМ, а также примеры декларативного кода и уровней переопределения. Автор Владимир Варанкин делится опытом создания модульного веб-приложения с использованием данных технологий.
![Декларативность
// blocks/http-request/http-request.node.js
modules.define('http-request', ['logger'], function(provide, logger) {
function doRequest(params) {
logger.debug('Going to request %j', params);
// ...
}
provide(doRequest);
})
12](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-12-320.jpg)
![Уровни переопределения
// app.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['logger', 'util', 'config'],
function(provide, logger, util, cfg) {
var Cluster = {
run : function() {},
stop : function() {}
};
provide(Cluster);
})
18](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-18-320.jpg)
![Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide, util, Cluster) {
var newCluster = util.extend(Cluster, {
stop : function() {}
});
provide(newCluster);
})
20](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-20-320.jpg)
![Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide, util, Cluster) {
var newCluster = util.extend(Cluster, {
stop : function() {}
});
provide(newCluster);
})
21](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-21-320.jpg)
![Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide, util, Cluster) {
var newCluster = util.extend(Cluster, {
stop : function() {}
});
provide(newCluster);
})
22](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-22-320.jpg)
![Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide, util, Cluster) {
var newCluster = util.extend(Cluster, {
stop : function() {}
});
Реализация метода
для старых версий Node.js
provide(newCluster);
})
23](https://image.slidesharecdn.com/nodejs-140110081711-phpapp02/85/Node-js-23-320.jpg)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
- 1. Сервер-сайд в терминах БЭМ Владимир Варанкин BEMup в рамках YaC 2013, Москва
- 2. Кто это? Разработчик интерфейсов из Я varankinv@yandex-team.ru 2 Фото: @mursya /narqo
- 3. Node.js сервер-сайд в терминах БЭМ 3
- 5. Node.js + БЭМ Организация файловой структуры
- 6. Организация файловой структуры PRJ/ src/ manage.py mysite/ __init__.py settings.py wsgi.py cart/ gallery/ polls/ results/ Пример проекта на 6
- 8. Организация файловой структуры PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js gallery/ image/ Пример проекта по методологии 8
- 9. Организация файловой структуры PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js cart.node.js gallery/ image/ Пример проекта по методологии 9
- 11. Декларативность // blocks/logger/logger.node.js modules.define('logger', function(provide) { function debug() { console.log.apply(console, arguments); } provide({ debug : debug }); }) Модульная система github.com/ymaps/modules 11
- 12. Декларативность // blocks/http-request/http-request.node.js modules.define('http-request', ['logger'], function(provide, logger) { function doRequest(params) { logger.debug('Going to request %j', params); // ... } provide(doRequest); }) 12
- 13. Декларативность // bundles/common/common.node.js modules = require('ym'); require('../../blocks/logger/logger.node.js'); require('../../blocks/http-request/http-request.node.js'); ... 13
- 14. Node.js + БЭМ Уровни переопределения
- 18. Уровни переопределения // app.blocks/cluster/cluster.node.js modules.define( 'cluster', ['logger', 'util', 'config'], function(provide, logger, util, cfg) { var Cluster = { run : function() {}, stop : function() {} }; provide(Cluster); }) 18
- 20. Уровни переопределения // deprecated.blocks/cluster/cluster.node.js modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} }); provide(newCluster); }) 20
- 21. Уровни переопределения // deprecated.blocks/cluster/cluster.node.js modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} }); provide(newCluster); }) 21
- 22. Уровни переопределения // deprecated.blocks/cluster/cluster.node.js modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} }); provide(newCluster); }) 22
- 23. Уровни переопределения // deprecated.blocks/cluster/cluster.node.js modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} }); Реализация метода для старых версий Node.js provide(newCluster); }) 23
- 24. Декларативность // bundles/common/common.node.js modules = require('ym'); require('../../common.blocks/logger/logger.node.js'); require('../../common.blocks/http-request/http-request.node.js'); require('../../common.blocks/cluster/cluster.node.js'); require('../../deprecated.blocks/cluster/cluster.node.js'); ... 24
- 25. Node.js + БЭМ Выделение общих частей в библиотеки
- 27. Библиотеки PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/ logger/ 27
- 28. Библиотеки // app.blocks/logger/logger.node.js modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' }); provide(logger); }) 28
- 29. Библиотеки // app.blocks/logger/logger.node.js modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' }); provide(logger); }) 29
- 30. Библиотеки // app.blocks/logger/logger.node.js modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' }); provide(logger); }) 30
- 31. Декларативность // bundles/common/common.node.js modules = require('ym'); require('../../lib/common.blocks/logger/logger.node.js'); require('../../app.blocks/logger/logger.node.js'); require('../../lib/common.blocks/http-request/http-request.node.js'); require('../../lib/common.blocks/cluster/cluster.node.js'); ... 31
- 32. Общий модульный метод разработки веб-приложений NODE.JS ♥ БЭМ: модульный фронтенд 32
- 33. Node.js + БЭМ Yet Another Node.js Application done BEM BEM Node.js Singlepage Javascript 33
- 34. Владимир Варанкин Руководитель группы разработки общих интерфейсов @tvii narqo varankinv@yandex-team.ru 34