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

Разработчик интерфейсов из Я
varankinv@yandex-team.ru

2

Фото: @mursya

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

3
github.com/bem

Технология

Блок
Методология

Элемент

.info
Модификатор

Уровень переопределения

BEMHTML
4
Node.js + БЭМ
Организация файловой структуры
Организация файловой структуры
PRJ/
src/
manage.py
mysite/
__init__.py
settings.py
wsgi.py
cart/
gallery/
polls/
results/
...
Организация файловой структуры
cart/
static/
cart/
images/
background.png
style.css
templates/
cart/
index.html
__init__.p...
Организация файловой структуры
PRJ/
blocks/
cart/
cart.bemhtml
cart.css
cart.js
gallery/
image/

Пример проекта
по методол...
Организация файловой структуры
PRJ/
blocks/
cart/
cart.bemhtml
cart.css
cart.js
cart.node.js
gallery/
image/
Пример проект...
Node.js + БЭМ
Декларативность
Декларативность
// blocks/logger/logger.node.js
modules.define('logger', function(provide) {
function debug() {
console.lo...
Декларативность
// blocks/http-request/http-request.node.js
modules.define('http-request', ['logger'], function(provide, l...
Декларативность
// bundles/common/common.node.js
modules = require('ym');
require('../../blocks/logger/logger.node.js');
r...
Node.js + БЭМ
Уровни переопределения
Уровни переопределения
Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
app.blocks/
cart/
...
16
Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
cluster/

17
Уровни переопределения
// app.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['logger', 'util', 'config'],
func...
Уровни переопределения
PRJ/
common.blocks/
http-request/
logger/
cluster/
deprecated.blocks/
cluster/
19
Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide,...
Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide,...
Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide,...
Уровни переопределения
// deprecated.blocks/cluster/cluster.node.js
modules.define(
'cluster',
['util'],
function(provide,...
Декларативность
// bundles/common/common.node.js
modules = require('ym');
require('../../common.blocks/logger/logger.node....
Node.js + БЭМ
Выделение общих частей в библиотеки
Библиотеки
PRJ/
lib/
common.blocks/
cluster/
http-request/
logger/
...
app.blocks/
cart/

26
Библиотеки
PRJ/
lib/
common.blocks/
cluster/
http-request/
logger/
...
app.blocks/
cart/
logger/
27
Библиотеки
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) {
var bunyan = require('bunyan')...
Библиотеки
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) {
var bunyan = require('bunyan')...
Библиотеки
// app.blocks/logger/logger.node.js
modules.define('logger', function(provide) {
var bunyan = require('bunyan')...
Декларативность
// bundles/common/common.node.js
modules = require('ym');
require('../../lib/common.blocks/logger/logger.n...
Общий модульный метод
разработки веб-приложений

NODE.JS ♥ БЭМ:
модульный фронтенд
32
Node.js + БЭМ

Yet Another Node.js Application done BEM

BEM Node.js Singlepage Javascript

33
Владимир Варанкин
Руководитель группы
разработки общих
интерфейсов

@tvii
narqo

varankinv@yandex-team.ru

34
Upcoming SlideShare
Loading in …5
×

Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)

830 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
830
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)

  1. 1. Сервер-сайд в терминах БЭМ Владимир Варанкин BEMup в рамках YaC 2013, Москва
  2. 2. Кто это? Разработчик интерфейсов из Я varankinv@yandex-team.ru 2 Фото: @mursya /narqo
  3. 3. Node.js сервер-сайд в терминах БЭМ 3
  4. 4. github.com/bem Технология Блок Методология Элемент .info Модификатор Уровень переопределения BEMHTML 4
  5. 5. Node.js + БЭМ Организация файловой структуры
  6. 6. Организация файловой структуры PRJ/ src/ manage.py mysite/ __init__.py settings.py wsgi.py cart/ gallery/ polls/ results/ Пример проекта на 6
  7. 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. 8. Организация файловой структуры PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js gallery/ image/ Пример проекта по методологии 8
  9. 9. Организация файловой структуры PRJ/ blocks/ cart/ cart.bemhtml cart.css cart.js cart.node.js gallery/ image/ Пример проекта по методологии 9
  10. 10. Node.js + БЭМ Декларативность
  11. 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. 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. 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. 14. Node.js + БЭМ Уровни переопределения
  15. 15. Уровни переопределения
  16. 16. Уровни переопределения PRJ/ common.blocks/ http-request/ logger/ app.blocks/ cart/ ... 16
  17. 17. Уровни переопределения PRJ/ common.blocks/ http-request/ logger/ cluster/ 17
  18. 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. 19. Уровни переопределения PRJ/ common.blocks/ http-request/ logger/ cluster/ deprecated.blocks/ cluster/ 19
  20. 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. 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. 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. 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. 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. 25. Node.js + БЭМ Выделение общих частей в библиотеки
  26. 26. Библиотеки PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/ 26
  27. 27. Библиотеки PRJ/ lib/ common.blocks/ cluster/ http-request/ logger/ ... app.blocks/ cart/ logger/ 27
  28. 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. 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. 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. 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. 32. Общий модульный метод разработки веб-приложений NODE.JS ♥ БЭМ: модульный фронтенд 32
  33. 33. Node.js + БЭМ Yet Another Node.js Application done BEM BEM Node.js Singlepage Javascript 33
  34. 34. Владимир Варанкин Руководитель группы разработки общих интерфейсов @tvii narqo varankinv@yandex-team.ru 34

×