Динамический ремаркетинг — это просто. Вебинар WebPromoExperts #222
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт...
-
Upload
yandex -
Category
Technology
-
view
1.400 -
download
4
description
Transcript of Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт...
![Page 1: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/1.jpg)
1
![Page 2: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/2.jpg)
BEMup в Питере, 29 ноября 2013
Динамический БЭМ-сайт на Node.js
Артём Курбатов
2
![Page 4: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/4.jpg)
Результат
4
![Page 5: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/5.jpg)
Инструментарий
• Сборкаhttps://github.com/bem/bem-tools
• Библиотека базовых блоков– BEMTREE– BEMHTMLhttps://github.com/bem/bem-core
• Роутерhttps://github.com/visionmedia/express
• База данныхhttps://github.com/mongodb
5
![Page 6: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/6.jpg)
Этапы
• склонируем и соберём проект• пройдём путь от базы данных до браузера• посмотрим на JavaScript блоков• попробуем шаблонизацию на клиенте
6
![Page 7: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/7.jpg)
Проект
github.com/tenorok/dynamic-bem-siteforked from bem/project-stub
7
![Page 8: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/8.jpg)
Клонирование проекта
8
› git clone [email protected]:tenorok/dynamic-bem-site.git› npm install› bem make libs
![Page 9: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/9.jpg)
ru.bem.info/news/bem-cli
bem-cli: запусти bem-tools локально
9
![Page 10: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/10.jpg)
Запуск проекта
10
› git clone [email protected]:tenorok/dynamic-bem-site.git› npm install› bem make libs› node data/insert.js› node index.js
![Page 11: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/11.jpg)
От базы данных до браузера
11
MongoDB
BEMTREE
данные
BEMHTML
bemjson
Express
html
ответ
Expressзапрос
![Page 12: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/12.jpg)
desktop.bundles/index/
• index.bemdecl.js
12
![Page 13: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/13.jpg)
desktop.bundles/index/
• index.bemdecl.js• index.deps.js
13
![Page 14: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/14.jpg)
desktop.bundles/index/
• index.bemdecl.js• index.deps.js• index.bemtree.js• index.bemhtml.js• index.js• index.css
14
![Page 15: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/15.jpg)
ru.bem.info/articles/deps-js-syntax
Декларирование зависимостей
15
![Page 16: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/16.jpg)
tech.yandex.ru/events/bemup/yac-bemup/talks/1354/
Доклад про BEMTREE
16
![Page 17: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/17.jpg)
BEMTREE .apply({ block: 'page' }) .then(function(bemjson) { BEMHTML.apply(bemjson); // {String} HTML });
Формирование HTML в динамике
17
![Page 18: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/18.jpg)
ru.bem.info/libs/bem-core/1.0.0/bemhtml/intro
Hello, BEMHTML!
18
![Page 19: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/19.jpg)
github.com/ymaps/modules
Модульная система
19
![Page 20: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/20.jpg)
ru.bem.info/libs/bem-core/1.0.0/i-bem.js/i-bem-js/
i-bem: Руководство пользователя
20
![Page 21: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/21.jpg)
modules.define('i-bem__dom', ['BEMHTML'],
function(provide, BEMHTML, BEMDOM) { BEMHTML.apply({ block: 'contact', content: [...] }); // {String} HTML}
);
Шаблонизация на клиенте
21
![Page 22: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/22.jpg)
Запуск без сборки
22
› bem make desktop.bundles/index/› NODE_ENV=production node index.js
![Page 23: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/23.jpg)
tech.yandex.ru/education/shri/msk-2013/talks/1442/
Подробный мастер-класс по БЭМ
23
![Page 24: Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»](https://reader030.fdocument.pub/reader030/viewer/2022013105/557ee6b6d8b42a331d8b5112/html5/thumbnails/24.jpg)
24
БЭМru.bem.infogithub.com/bem
clubs.ya.ru/bem@bem_ru
facebook.com/groups/bem.info