Download to read offline
![Процесс сборки БЭМ-проекта
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" }
];](https://image.slidesharecdn.com/daleefailover-150414102442-conversion-gate01/85/BEM-22-320.jpg)
Uploaded byDALEE digital agency
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
Документ описывает методологию BEM (Block, Element, Modifier) в контексте разработки корпоративного веб-ресурса megafon.ru. В нем обсуждаются принципы и элементы BEM, а также процесс сборки и интеграции компонентов, включая силу CSS-селекторов и возможности тестирования. Также приведены ссылки на ресурсы для дальнейшего изучения BEM и его практического применения.
More Related Content
Similar to BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
- 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.
- 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.
- 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.
- 31. Корпоративный сайт cБЭМ Страницы: • p-* — порядка 50 типов; • p-b2b-* — порядка 15 типов Причины: • Завязка на разделы в базе — в теории, просто сменить; • Завязка на отрабатываемые модули для разных типов; • Процесс перехода был безболезненным
- 32.
- 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-ориентированный код Вопросы?