2. Что такое MegaFon.ru
Это сайты для:
• частных клиентов;
• корпоративных
клиентов;
• операторов связи;
• инвесторов;
• прессы
И 81 региональная
версия каждого из них
3. Что
такое
megafon.ru
Это более 100 задач на
разработку в месяц,
более 400 контентных
задач в месяц
Что такое MegaFon.ru
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.
14. Не методология БЭМ
•«Что-то про CSS?»
•Длинные имена классов: btn? → b-button!
•Префиксы для классов: b-, i-, g-, js-
•Вложенные элементы: nav__item__link
•Отсутствие каскадов — никаких .page_theme .link!
•Неоправданные каскады: .nav__item .link vs .nav__link
•Web Components — близко, но нет
•Прозрачность и простота — к сожалению, пока тоже нет
16. Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысленное применение каскадов;
• Отделение логики представления от бизнес-логики;
• Разнесение общих файлов на модули или плагины;
• Команда, высокий BUS-фактор и соглашения;
• Инструменты и «предпродажная» подготовка;
• Тестирование и документирование, наконец!
17. Обычный подход и БЭМ
ПРОЦЕСС РАЗРАБОТКИ ПРОЦЕСС
РАЗРАБОТКИ
БЭМ
ДИЗАЙН
СТАТИСТИКА
ДИНАМИКА
ПРОЦЕСС РАЗРАБОТКИ
БЭМ
ДИЗАЙН СТАТИСТИКА
ДИНАМИКА ДОКУМЕНТАЦИЯ
СЕРВИС БОЛЬШОЙ СЕРВИС
18. Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысленное применение каскадов;
• Отделение логики представления от бизнес-логики;
• Разнесение общих файлов на модули или плагины;
• Команда, высокий BUS-фактор и соглашения;
• Инструменты и «предпродажная» подготовка;
• Тестирование и документирование, наконец!
Обычный подход и БЭМ
19. Методология БЭМ
Методология БЭМ — это набор паттернов и способ описывать
действительность при помощи кода и размышлять о БЭМ-
сущностях;
БЭМ-сущность — это определение содержания страницы или
сущность в БЭМ-предметной области (блок, элемент);
Реализация (в технологии) — функциональная часть БЭМ-
сущности, описанная в рамках конкретной технологии файлом
или папкой с набором файлов;
Технология (tech, technology) — инструкция (или процесс) для
преобразования исходных материалов в целевой продукт;
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}>
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-)
31. Корпоративный сайт c БЭМ
Страницы:
• p-* — порядка 50 типов;
• p-b2b-* — порядка 15 типов
Причины:
• Завязка на разделы в базе — в теории, просто сменить;
• Завязка на отрабатываемые модули для разных типов;
• Процесс перехода был безболезненным
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-ориентированный код
Вопросы?