Embed Size (px)
DESCRIPTION
Рассказ о том, как применяется методология БЭМ в написании сервер-сайда на Node.js.
Citation preview
Сервер-сайд в терминах БЭМВладимир Варанкин BEMup в рамках YaC 2013, Москва
Кто это?
Разработчик интерфейсов из Я
/narqo
2
Фото
: @m
ursy
a
Node.js сервер-сайдв терминах БЭМ
3
4
Блок Элемент
МодификаторУровень переопределения
Технология
.infoМетодология
BEMHTML
github.com/bem
Node.js + БЭМ
Организация файловой структуры
Организация файловой структуры
6
PRJ/ src/ manage.py mysite/ __init__.py settings.py wsgi.py cart/ gallery/ polls/ results/
Пример проекта на
Организация файловой структуры
7
cart/ static/ cart/ images/ background.png style.css templates/ cart/ index.html __init__.py admin.py forms.py models.py tests.py urls.py views.py
Пример проекта на
Организация файловой структуры
8
PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js gallery/ image/
Пример проекта по методологии
Организация файловой структуры
9
PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js cart.node.js gallery/ image/
Пример проекта по методологии
Node.js + БЭМ
Декларативность
Декларативность
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
Декларативность
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);
})
Декларативность
13
// bundles/common/common.node.js
modules = require('ym');require('../../blocks/logger/logger.node.js');require('../../blocks/http-request/http-request.node.js');...
Node.js + БЭМ
Уровни переопределения
Уровни переопределения
Уровни переопределения
16
PRJ/ common.blocks/ http-request/ logger/ app.blocks/ cart/ ...
Уровни переопределения
17
PRJ/ common.blocks/ http-request/ logger/ cluster/
Уровни переопределения
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);
})
Уровни переопределения
19
PRJ/ common.blocks/ http-request/ logger/ cluster/ deprecated.blocks/ cluster/
Уровни переопределения
20
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
Уровни переопределения
21
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
Уровни переопределения
22
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
Уровни переопределения
23
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
Реализация метода для старых версий Node.js
Декларативность
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');...
Node.js + БЭМ
Выделение общих частей в библиотеки
Библиотеки
26
PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/
Библиотеки
27
PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/ logger/
Библиотеки
28
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
Библиотеки
29
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
Библиотеки
30
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
Декларативность
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');...
Общий модульный метод разработки веб-приложений
32
NODE.JS ♥ БЭМ:модульный фронтенд
Node.js + БЭМ
33
Yet Another Node.js Application done BEM
BEM Node.js Singlepage Javascript
34
Владимир ВаранкинРуководитель группыразработки общих интерфейсов
@tvii
narqo
