Выступление руководителя разработки агентства Алексея Ярошевича на конференции FailOver 2015

1. BEM на корпоративном
веб-ресурсе —
отказоустойчивость
фронтенда
Кирилл Лапенин (МегаФон), Алексей Ярошевич (DALEE)

2. Что такое MegaFon.ru
Это сайты для:
• частных клиентов;
• корпоративных
клиентов;
• операторов связи;
• инвесторов;
• прессы
И 81 региональная
версия каждого из них

3. Что
такое
megafon.ru
Это более 100 задач на
разработку в месяц,
более 400 контентных
задач в месяц
Что такое MegaFon.ru

4. Что
такое
megafon.ru
Как поддерживать?
Что такое MegaFon.ru

5. …БЭМ

6. Про что
● Про историю, евпаторию, меланхолию
● Про грабли — и что делать, чтобы на них не наступить
● Про что-то, похожее на #b_
● Про сборку и БЭМ-ориентированность
● Про интеграцию — бесконечный процесс БЭМификации
● Про стек MegaFon.ru и наши былинные отказы
● Про плюшки (и ватрушки)
● Про верную дорогу и светлое будущее

7. Про что
● Про историю, евпаторию, меланхолию
● Про грабли — и что делать, что на них наступить
● Про что-то похожее на #b_
● Про сборку и БЭМ-ориентированность
● Про интеграцию — бесконечный процесс БЭМификации
● Про стек MegaFon.ru и наши былинные отказы
● Про плюшки (и ватрушки)
● Про верную дорогу и светлое будущее

8. Появление БЭМ
«Блоком будем называть фрагмент страницы, который
описывается своей разметкой и стилями»
«1. никогда не опираться на элементы,
только на классы;
2. всем классам внутри блока давать имена, начинающиеся с
имени этого блока»
.b-user b → .b-user__first-letter
Доклад @vithar на ClientSide'2007
Лего 1.0, 2008 — разделение по технологиям, ручные @import,
префиксы b-, l-, i-, g-, и т.д.

9. Появление БЭМ
•Лего 2.0, 2009 — Блоки первичны, технологии
вторичны
•Выделение БЭМ сущностей:
•Блок — это элемент на странице, имеющий значение,
имеющий отражение в разных технологиях,
включаемых в его файловую структуру.
•Элемент — часть блока, не имеющая без него
смысла, и тоже состоящая из технологий.
•Модификатор — штучка, модифицирующая блок.
•Авто-генерация из XML: main.js, main.css, main.xsl.

10. Появление БЭМ
Проблема скорости CSS селекторов, 2009
Нотация .b-block__elem_modifier_value

11. Появление БЭМ
Open Source, 2010
- Уровни переопределения
- Библиотека блоков: bem-bl
- Инструменты: bem-tools
http://bit.ly/bemstory-talk

12. Появление БЭМ в MegaFon.Ru
7 000 строк CSS.
Разве это много?!

13. Появление БЭМ в MegaFon.Ru
А если еще 5600? ;-)

14. Не методология БЭМ
•«Что-то про CSS?»
•Длинные имена классов: btn? → b-button!
•Префиксы для классов: b-, i-, g-, js-
•Вложенные элементы: nav__item__link
•Отсутствие каскадов — никаких .page_theme .link!
•Неоправданные каскады: .nav__item .link vs .nav__link
•Web Components — близко, но нет
•Прозрачность и простота — к сожалению, пока тоже нет

15. Не методология БЭМ
Обычный подход и БЭМ

16. Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысленное применение каскадов;
• Отделение логики представления от бизнес-логики;
• Разнесение общих файлов на модули или плагины;
• Команда, высокий BUS-фактор и соглашения;
• Инструменты и «предпродажная» подготовка;
• Тестирование и документирование, наконец!

17. Обычный подход и БЭМ
ПРОЦЕСС РАЗРАБОТКИ ПРОЦЕСС
РАЗРАБОТКИ
БЭМ
ДИЗАЙН
СТАТИСТИКА
ДИНАМИКА
ПРОЦЕСС РАЗРАБОТКИ
БЭМ
ДИЗАЙН СТАТИСТИКА
ДИНАМИКА ДОКУМЕНТАЦИЯ
СЕРВИС БОЛЬШОЙ СЕРВИС

18. Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысленное применение каскадов;
• Отделение логики представления от бизнес-логики;
• Разнесение общих файлов на модули или плагины;
• Команда, высокий BUS-фактор и соглашения;
• Инструменты и «предпродажная» подготовка;
• Тестирование и документирование, наконец!
Обычный подход и БЭМ

19. Методология БЭМ
Методология БЭМ — это набор паттернов и способ описывать
действительность при помощи кода и размышлять о БЭМ-
сущностях;
БЭМ-сущность — это определение содержания страницы или
сущность в БЭМ-предметной области (блок, элемент);
Реализация (в технологии) — функциональная часть БЭМ-
сущности, описанная в рамках конкретной технологии файлом
или папкой с набором файлов;
Технология (tech, technology) — инструкция (или процесс) для
преобразования исходных материалов в целевой продукт;

20. Методология БЭМ
mega-blocks/common.blocks
button/
__control/
button__control.less
button.less
button.tmpl
header/
_christmas/
header_christmas.less
header.less
header.tmpl
tabbed-pane/
tabbed-pane.less
tabbed-pane.js
tabbed-pane.tmpl
project/blocks/
button/
button.less
tabbed-pane/
tabbed-pane.less
phone-input/
phone-input.less
phone-input.js
phone-input.tmpl
p-mnp/
p-mnp.deps.json
p-mnp.less
p-mnp.js
p-mnp.tmpl
...

21. Методология БЭМ

22. Процесс сборки БЭМ-проекта
project/bundles/
mnp/
mnp.bemjson.js
mnp.bemdecl.js*
mnp.bemjson.js:
({ block: 'p-mnp',
content: [
{ block: 'text', content:
'Введите свой телефон' },
{ block: 'phone-input',
name: 'msisdn' },
{ block: 'button', mods: {
type: 'submit'
} }
]})
mnp.bemdecl.js:
exports.blocks = [
{ "name": "p-mnp" },
{ "name": "text" },
{ "name": "phone-input" },
{ "name": "button" }
];
mnp.deps.js:
exports.deps = [
{ "block": "i-bem" },
{ "block": "p-mnp" },
{ "block": "text" },
{ "block": "phone-input" }
];

23. Процесс сборки БЭМ-проекта
project/bundles/
mnp/
mnp.bemjson.js
mnp.bemdecl.js
mnp.deps.js
mnp.css
mnp.js
mnp.tmpl
mnp.html
_mnp.css
_mnp.js
Постпроцессоры:
- borschik (jsmin+csso+freeze)
- autoprefixer
- cssrb
- csscomb
- uglifyjs
- rtlcss
- postcss
- ваш вариант

24. Процесс сборки MegaFon.ru
project/blocks/
button/
button.less
tabbed-pane/
tabbed-pane.less
phone-input/
phone-input.less
phone-input.js
phone-input.tmpl
p-mnp/
p-mnp.deps.json
p-mnp.less
p-mnp.js
p-mnp.tmpl
...
compiled/blocks/
button/
button.css
tabbed-pane/
tabbed-pane.css
phone-input/
phone-input.css
phone-input.min.js
phone-input.tmpl
p-mnp/
p-mnp.deps.json
p-mnp.css
p-mnp.min.js
p-mnp.tmpl
...

25. Процесс сборки MegaFon.ru
some.tmpl:
<{$tag} {$ibem}> <!-- можно опустить -->
<!-- вывод переменной из данных -->
<div class="{$b__}title">{$data.title}<div>
<!-- вывод внутренних блоков -->
<div class="{$b__}content">{$content}</div>
<!-- подтянуть блок — не забываем для него css и js -->
{b name="b-button" class="`$b__`trigger" tag="a"
content="trigger"}
</{$tag}>

26. Процесс сборки MegaFon.ru
another.tmpl:
<!-- перебор всех блоков -->
<ul class="{$b__}list">
{foreach from=$content item=b}
<li class="{$b__}item">
<!-- динамические вставки блоков ;-( -->
{b name=$b.block data=$b.data mods=$b.mods ...}
</li>
{/foreach}
</ul>

27. Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде шаблонов хранятся данные о зависимостях;
• В шаблоны передаются произвольные BEM-деревья;
• Исчезновение глобального скоупа в шаблонах;
• Скрипты на селекторах (jQuery, $__$);
• «А как верстать?» — спрашивала команда;
• В модулях начал расти view-ориентированный код

28. Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде шаблонов хранятся данные о зависимостях;
• В шаблоны передаются произвольные BEM-деревья;
• Исчезновение глобального скоупа в шаблонах;
• Скрипты на селекторах (jQuery, $__$);
• «А как верстать?» — спрашивала команда;
• В модулях начал расти view-ориентированный код

29. Корпоративный сайт c БЭМ
Интеграция с CMS
• Меташаблоны (m-)
• Страницы (p-)
• Модули и достраивание дерева страницы
на основе данных моделей из базы
• Дерево контента страницы, заданное
блоками в панели управления
• И блоки (с b- и, в последствии, без b-)

30. Корпоративный сайт c БЭМ

31. Корпоративный сайт c БЭМ
Страницы:
• p-* — порядка 50 типов;
• p-b2b-* — порядка 15 типов
Причины:
• Завязка на разделы в базе — в теории, просто сменить;
• Завязка на отрабатываемые модули для разных типов;
• Процесс перехода был безболезненным

32. Корпоративный сайт c БЭМ

33. Процесс разработки с БЭМ
• Единое пространство именования;
• Отчуждаемость ux, дизайна, верстки и разработки;
• Снижение сложности кода;
• Возможность быстрого рефакторинга;
• Возможность тестирования отдельных блоков;
• Возможность описания библиотек постепенно
И в целом — нам понравилось (ну мне лично — да).

34. Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде шаблонов хранятся данные о зависимостях;
• В шаблоны передаются произвольные BEM-деревья;
• Исчезновение глобального скоупа в шаблонах;
• Скрипты на селекторах (jQuery, $__$);
• «А как верстать?» — спрашивала команда;
• В модулях начал расти view-ориентированный код

35. Еще не приехали?
Хотелки:
• Перенос сборки на полностью статическую (enb?);
• Уход от императивных шаблонизаторов;
• Отдельная технология для создания view-ориентированных
структур (bemtree-like);
И тогда уже можно будет браться за bem-tools 3.0.

36. Еще не приехали?
Тестирование:
• Стиль кодирования
JSHint, JSCS, LESSlint, php -l, etc.
• Тесты для любых шаблонов (или для всех сразу)
enb-bem-tmpl-specs
• Спеки для бизнес логики блоков и модулей (JS)
enb-bem-specs
• Тесты внешнего вид (через phantomjs или селениум)
gemini
Запуск на post-commit с проверкой измененных файлов

37. Ссылки
http://bem.info — официальный сайт и форум
http://getbem.com — фан-сайт на английском
http://enb-make.info — про сборщик ENB
http://bit.ly/bemstory-talk — история создания BEM
https://ru.bem.info/forum/issues/158/ — про неBEM
https://ru.bem.info/forum/issues/185/ — обсуждаемая терминология
http://bit.ly/bem-defs — основные понятия БЭМ
http://bit.ly/bem-perf — статья про BEM от Paul Lewis
http://bit.ly/bemhtml-demo — демо работы bemhtml

38. Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде шаблонов хранятся данные о зависимостях;
• В шаблоны передаются произвольные BEM-деревья;
• Исчезновение глобального скоупа в шаблонах;
• Скрипты на селекторах (jQuery, $__$);
• «А как верстать?» — спрашивала команда;
• В модулях начал расти view-ориентированный код
Вопросы?