Владимир Варанкин — Сервер-сайд в БЭМ-терминах (node.js)
DESCRIPTION
Рассказ о том, как применяется методология БЭМ в написании сервер-сайда на Node.js.TRANSCRIPT
![Page 1: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/1.jpg)
Сервер-сайд в терминах БЭМВладимир Варанкин BEMup в рамках YaC 2013, Москва
![Page 2: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/2.jpg)
Кто это?
Разработчик интерфейсов из Я
/narqo
2
Фото
: @m
ursy
a
![Page 3: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/3.jpg)
Node.js сервер-сайдв терминах БЭМ
3
![Page 4: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/4.jpg)
4
Блок Элемент
МодификаторУровень переопределения
Технология
.infoМетодология
BEMHTML
github.com/bem
![Page 5: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/5.jpg)
Node.js + БЭМ
Организация файловой структуры
![Page 6: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/6.jpg)
Организация файловой структуры
6
PRJ/ src/ manage.py mysite/ __init__.py settings.py wsgi.py cart/ gallery/ polls/ results/
Пример проекта на
![Page 7: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/7.jpg)
Организация файловой структуры
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
Пример проекта на
![Page 8: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/8.jpg)
Организация файловой структуры
8
PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js gallery/ image/
Пример проекта по методологии
![Page 9: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/9.jpg)
Организация файловой структуры
9
PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js cart.node.js gallery/ image/
Пример проекта по методологии
![Page 10: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/10.jpg)
Node.js + БЭМ
Декларативность
![Page 11: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/11.jpg)
Декларативность
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
![Page 12: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/12.jpg)
Декларативность
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);
})
![Page 13: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/13.jpg)
Декларативность
13
// bundles/common/common.node.js
modules = require('ym');require('../../blocks/logger/logger.node.js');require('../../blocks/http-request/http-request.node.js');...
![Page 14: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/14.jpg)
Node.js + БЭМ
Уровни переопределения
![Page 15: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/15.jpg)
Уровни переопределения
![Page 16: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/16.jpg)
Уровни переопределения
16
PRJ/ common.blocks/ http-request/ logger/ app.blocks/ cart/ ...
![Page 17: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/17.jpg)
Уровни переопределения
17
PRJ/ common.blocks/ http-request/ logger/ cluster/
![Page 18: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/18.jpg)
Уровни переопределения
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);
})
![Page 19: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/19.jpg)
Уровни переопределения
19
PRJ/ common.blocks/ http-request/ logger/ cluster/ deprecated.blocks/ cluster/
![Page 20: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/20.jpg)
Уровни переопределения
20
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
![Page 21: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/21.jpg)
Уровни переопределения
21
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
![Page 22: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/22.jpg)
Уровни переопределения
22
// deprecated.blocks/cluster/cluster.node.js
modules.define( 'cluster', ['util'], function(provide, util, Cluster) { var newCluster = util.extend(Cluster, { stop : function() {} });
provide(newCluster);
})
![Page 23: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/23.jpg)
Уровни переопределения
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
![Page 24: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/24.jpg)
Декларативность
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');...
![Page 25: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/25.jpg)
Node.js + БЭМ
Выделение общих частей в библиотеки
![Page 26: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/26.jpg)
Библиотеки
26
PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/
![Page 27: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/27.jpg)
Библиотеки
27
PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/ logger/
![Page 28: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/28.jpg)
Библиотеки
28
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
![Page 29: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/29.jpg)
Библиотеки
29
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
![Page 30: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/30.jpg)
Библиотеки
30
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) { var bunyan = require('bunyan'), logger = bunyan.createLogger({ name : 'myapp' });
provide(logger);
})
![Page 31: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/31.jpg)
Декларативность
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');...
![Page 32: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/32.jpg)
Общий модульный метод разработки веб-приложений
32
NODE.JS ♥ БЭМ:модульный фронтенд
![Page 33: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/33.jpg)
Node.js + БЭМ
33
Yet Another Node.js Application done BEM
BEM Node.js Singlepage Javascript
![Page 34: Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)](https://reader034.vdocuments.net/reader034/viewer/2022052618/54bd872c4a7959913b8b45d4/html5/thumbnails/34.jpg)
34
Владимир ВаранкинРуководитель группыразработки общих интерфейсов
@tvii
narqo