Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт...
DESCRIPTION
На примере карточек контактов мы покажем, как создать сайт на трехуровневой архитектуре с использованием полного стека БЭМ-технологий. Сервер мы реализуем на Express, а в качестве базовой библиотеки возьмем bem-core. Сырые данные будем преобразовывать во view-ориентированный BEMJSON с помощью декларативных шаблонов BEMTREE. При написании шаблонов BEMJSON → HTML применим новый JS-синтаксис BEMHTML. JavaScript на клиенте будет писаться с использованием блока i-bem.js.TRANSCRIPT
1
BEMup в Питере, 29 ноября 2013
Динамический БЭМ-сайт на Node.js
Артём Курбатов
2
Результат
4
Инструментарий
• Сборкаhttps://github.com/bem/bem-tools
• Библиотека базовых блоков– BEMTREE– BEMHTMLhttps://github.com/bem/bem-core
• Роутерhttps://github.com/visionmedia/express
• База данныхhttps://github.com/mongodb
5
Этапы
• склонируем и соберём проект• пройдём путь от базы данных до браузера• посмотрим на JavaScript блоков• попробуем шаблонизацию на клиенте
6
Проект
github.com/tenorok/dynamic-bem-siteforked from bem/project-stub
7
Клонирование проекта
8
› git clone [email protected]:tenorok/dynamic-bem-site.git› npm install› bem make libs
ru.bem.info/news/bem-cli
bem-cli: запусти bem-tools локально
9
Запуск проекта
10
› git clone [email protected]:tenorok/dynamic-bem-site.git› npm install› bem make libs› node data/insert.js› node index.js
От базы данных до браузера
11
MongoDB
BEMTREE
данные
BEMHTML
bemjson
Express
html
ответ
Expressзапрос
desktop.bundles/index/
• index.bemdecl.js
12
desktop.bundles/index/
• index.bemdecl.js• index.deps.js
13
desktop.bundles/index/
• index.bemdecl.js• index.deps.js• index.bemtree.js• index.bemhtml.js• index.js• index.css
14
ru.bem.info/articles/deps-js-syntax
Декларирование зависимостей
15
tech.yandex.ru/events/bemup/yac-bemup/talks/1354/
Доклад про BEMTREE
16
BEMTREE .apply({ block: 'page' }) .then(function(bemjson) { BEMHTML.apply(bemjson); // {String} HTML });
Формирование HTML в динамике
17
ru.bem.info/libs/bem-core/1.0.0/bemhtml/intro
Hello, BEMHTML!
18
github.com/ymaps/modules
Модульная система
19
ru.bem.info/libs/bem-core/1.0.0/i-bem.js/i-bem-js/
i-bem: Руководство пользователя
20
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
tech.yandex.ru/education/shri/msk-2013/talks/1442/
Подробный мастер-класс по БЭМ
23
24
БЭМru.bem.infogithub.com/bem
clubs.ya.ru/bem@bem_ru
facebook.com/groups/bem.info
