Рассказ о том, как применяется методология БЭМ в написании сервер-сайда на Node.js.

1. Сервер-сайд
в терминах БЭМ
Владимир Варанкин
BEMup в рамках YaC 2013, Москва

2. Кто это?
Разработчик интерфейсов из Я
varankinv@yandex-team.ru
2
Фото: @mursya
/narqo

3. Node.js сервер-сайд
в терминах БЭМ
3

4. github.com/bem
Технология
Блок
Методология
Элемент
.info
Модификатор
Уровень переопределения
BEMHTML
4

5. Node.js + БЭМ
Организация файловой структуры

6. Организация файловой структуры
PRJ/
src/
manage.py
mysite/
__init__.py
settings.py
wsgi.py
cart/
gallery/
polls/
results/
Пример проекта на
6

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
Пример проекта на
7

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

10. 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
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 + БЭМ
Уровни переопределения

15. Уровни переопределения

16. Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
app.blocks/
cart/
...
16

17. Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
cluster/
17

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

19. Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
cluster/
deprecated.blocks/
cluster/
19

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 + БЭМ
Выделение общих частей в библиотеки

26. Библиотеки
PRJ/
lib/
common.blocks/
cluster/
http-request/
logger/
...
app.blocks/
cart/
26

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