Рассказ о том, как мы пишем одностраничные сервис-ориентированные приложения на Node.js в терминах БЭМ, с общим для клиента и сервера JavaScript-кодом.

1. Филатов Евгений
Разработчик интерфейсов
Одностраничное
приложение на БЭМ
Node.js
Я.Субботник в Киеве, 27 апреля 2013 года

2. Наш фронтенд
• css + js
• Рендер шаблонов на сервере
• Получаем данные через АПИ

3. Наш фронтенд
• css + js
• Рендер шаблонов на сервере
• Получаем данные через АПИ

4. Одностраничное приложение
• Скорость
• Трафик
• Нагрузка

5. Одностраничное приложение
• Прыгает верстка
• Нет индексации

7. Что хотим?
• При прямом переходе создаем все на сервере
• Потом все на клиенте

8. Код должен выполнятся и на
клиенте и на сервере!

9. Node.js и браузер — не одно
и то же

11. Помогает БЭМ
bem.info/method

12. На файловой системе
папки
blocks
├── i-router
├── i-api-request
└── i-page
и файлы
i-router
├── i-router.js
├── i-router.priv.js
└── i-router.common.js

13. На файловой системе
папки
blocks
├── i-router
├── i-api-request
└── i-page
и файлы
i-router
├── i-router.js
├── i-router.priv.js
└── i-router.common.js
браузер
сервер
общий
код

14. bem.info/tools/bem
bem-tools

15. Сборка

16. Сборка
Общий
код

17. Пример
i-cookie.priv.js:
function setCookie(key, val) {
res.writeHead(200, {
'Set-Cookie': cookieStr(key, val)
});
}
i-cookie.js:
function setCookie(key, val) {
document.cookie = cookieStr(key, val);
}
i-cookie.common.js:
function cookieStr(key, val) {
return key + '=' + val;
}
Общий
код

18. bit.ly/bem-ru
i-bem

19. i-bem
i-cookie.js:
BEM.decl('i-cookie', null, {
setCookie: function (key, val) {
document.cookie = this.cookieStr(key, val);
}
})
i-cookie.common.js:
BEM.decl('i-cookie', null, {
queryStr: function (key, val) {
return key + '=' + val;
}
})
BEM.blocks['i-cookie'].setCookie('my', 'test');

20. Страницы

21. Страница (сервер)

22. СтранСтраница (клиент)
ица (сервер)

23. github.com/delfrrr/bem-json
Шаблонизация

24. Шаблонизация
• На чистом js
• Шаблоны в терминах БЭМ
• Асинхронная шаблонизация

25. {
channel: {
id: 42,
name: 'СТБ'
}
}
{
block: 'b-channel',
tag: 'a',
atts: {
href: '/channels/42'
},
content: 'СТБ'
}
<a href="/channels/42" class="b-channels">СТБ</a>
Шаблоны
bemhtml
Данные
bemjson
html

26. {
channel: {
id: 42,
name: 'СТБ'
}
}
{
block: 'b-channel',
tag: 'a',
atts: {
href: '/channels/42'
},
content: 'СТБ'
}
<a href="/channels/42" class="b-channels">СТБ</a>
Шаблоны
bemhtml
Данные
bemjson
html
data
view
bemjson

27. Шаблоны общие для
клиента и сервера

28. Простой шаблон
BEM.JSON.decl('b-channel', {
onBlock: function(ctx) {
var params = ctx.params();
ctx
.tag('a')
.attrs({
href: '/channels/' + params.id
})
.content(params.name)
}
});

29. Не хватает данных
BEM.JSON.decl('b-channel', {
onBlock: function(ctx) {
var params = ctx.params();
ctx
.tag('a')
.attrs({
href: '/channels/' + params.id
})
.content(params.name)
}
});

30. Получаем данные в шаблонах

31. Асинхронность = промисы

32. Асинхронный шаблон!
BEM.JSON.decl('b-channel'}, {
onBlock: function(ctx) {
var params = ctx.params();
ctx
.tag('a')
.attrs({
href: '/channels/' + params.id
})
.defer(
BEM.blocks['i-api-request']
.get('/channel-name', {params: params})
.then(function (result) {
ctx.content(result.name);
})
);
}
});

33. MVC?

34. MVC?

35. Но почему не MVC?
• Логика шаблонов в шаблонах
• Блоки переносимы
• Все консистентно

36. А
если
блокам
нужны
одинаковые
данные?
b-­‐program
b-­‐channel
i-­‐api-­‐request
кеш

37. …похожие?
b-­‐channel
b-­‐channel
b-­‐channel
b-­‐channel
b-­‐channel
b-­‐channel
i-­‐api-­‐request
групировка

38. Профит
54%
10%
36%
Строчек
кода
на
проекте
common.js
priv.js
js

39. Используйте
прямо
сейчас

40. Где взять?
bem-node
• github.com/wtfil/bem-node
• github.com/wtfil/bem-node-test (пример)
Шаблонизатор
• github.com/delfrrr/bem-json

41. Комьюнити
• @bem_ru
• facebook.com/groups/bem.info/
• github.com/bem

42. Евгений Филатов
Разработчик интерфейсов
@wtfil
github.com/wtfil