На примере карточек контактов мы покажем, как создать сайт на трехуровневой архитектуре с использованием полного стека БЭМ-технологий. Сервер мы реализуем на Express, а в качестве базовой библиотеки возьмем bem-core. Сырые данные будем преобразовывать во view-ориентированный BEMJSON с помощью декларативных шаблонов BEMTREE. При написании шаблонов BEMJSON → HTML применим новый JS-синтаксис BEMHTML. JavaScript на клиенте будет писаться с использованием блока i-bem.js.

1. 1

2. Динамический
БЭМ-сайт на
Node.js
Артём Курбатов
BEMup в Питере, 29 ноября 2013
2

3. ru.bem.info
3

4. Результат
4

5. Инструментарий
• Сборка
https://github.com/bem/bem-tools
• Библиотека базовых блоков
– BEMTREE
– BEMHTML
https://github.com/bem/bem-core
• Роутер
https://github.com/visionmedia/express
• База данных
https://github.com/mongodb
5

6. Этапы
•
•
•
•
6
склонируем и соберём проект
пройдём путь от базы данных до браузера
посмотрим на JavaScript блоков
попробуем шаблонизацию на клиенте

7. Проект
github.com/tenorok/dynamic-bem-site
forked from bem/project-stub
7

8. Клонирование проекта
› git clone git@github.com:tenorok/dynamic-bem-site.git
› npm install
› bem make libs
8

9. bem-cli: запусти bem-tools локально
ru.bem.info/news/bem-cli
9

10. Запуск проекта
› git clone git@github.com:tenorok/dynamic-bem-site.git
› npm install
› bem make libs
› node data/insert.js
› node index.js
10

11. От базы данных до браузера
запрос
Express
MongoDB
данные
BEMTREE
bemjson
BEMHTML
html
Express
ответ
11

12. desktop.bundles/index/
• index.bemdecl.js
12

13. desktop.bundles/index/
• index.bemdecl.js
• index.deps.js
13

14. desktop.bundles/index/
•
•
•
•
•
•
14
index.bemdecl.js
index.deps.js
index.bemtree.js
index.bemhtml.js
index.js
index.css

15. Декларирование зависимостей
ru.bem.info/articles/deps-js-syntax
15

16. Доклад про BEMTREE
tech.yandex.ru/events/bemup/yacbemup/talks/1354/
16

17. Формирование HTML в динамике
BEMTREE
.apply({ block: 'page' })
.then(function(bemjson) {
BEMHTML.apply(bemjson); // {String} HTML
});
17

18. Hello, BEMHTML!
ru.bem.info/libs/bem-core/1.0.0/
bemhtml/intro
18

19. Модульная система
github.com/ymaps/modules
19

20. i-bem: Руководство пользователя
ru.bem.info/libs/bem-core/1.0.0/ibem.js/i-bem-js/
20

21. Шаблонизация на клиенте
modules.define('i-bem__dom', ['BEMHTML'],
function(provide, BEMHTML, BEMDOM) {
BEMHTML.apply({
block: 'contact',
content: [...]
}); // {String} HTML
}
);
21

22. Запуск без сборки
› bem make desktop.bundles/index/
› NODE_ENV=production node index.js
22

23. Подробный мастер-класс по БЭМ
tech.yandex.ru/education/shri/
msk-2013/talks/1442/
23

24. БЭМ
ru.bem.info
github.com/bem
clubs.ya.ru/bem
@bem_ru
facebook.com/groups/bem.info
info@bem.info
24

25. Артём Курбатов
Разработчик интерфейсов
tenorok@yandex-team.ru
github.com/tenorok
Спасибо
25