Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BEM на корпоративном
веб-ресурсе —
отказоустойчивость
фронтенда
Кирилл Лапенин (МегаФон), Алексей Ярошевич (DALEE)
Что такое MegaFon.ru
Это сайты для:
• частных клиентов;
• корпоративных
клиентов;
• операторов связи;
• инвесторов;
• прес...
Что	
  такое	
  megafon.ru
Это более 100 задач на
разработку в месяц,
более 400 контентных
задач в месяц
Что такое MegaFon...
Что	
  такое	
  megafon.ru
Как поддерживать?
Что такое MegaFon.ru
…БЭМ
Про что
● Про историю, евпаторию, меланхолию
● Про грабли — и что делать, чтобы на них не наступить
● Про что-то, похожее ...
Про что
● Про историю, евпаторию, меланхолию
● Про грабли — и что делать, что на них наступить
● Про что-то похожее на #b_...
Появление БЭМ
«Блоком будем называть фрагмент страницы, который
описывается своей разметкой и стилями»
«1. никогда не опир...
Появление БЭМ
•Лего 2.0, 2009 — Блоки первичны, технологии
вторичны
•Выделение БЭМ сущностей:
•Блок — это элемент на стран...
Появление БЭМ
Проблема скорости CSS селекторов, 2009
Нотация .b-block__elem_modifier_value
Появление БЭМ
Open Source, 2010
- Уровни переопределения
- Библиотека блоков: bem-bl
- Инструменты: bem-tools
http://bit.l...
Появление БЭМ в MegaFon.Ru
7 000 строк CSS.
Разве это много?!
Появление БЭМ в MegaFon.Ru
А если еще 5600? ;-)
Не методология БЭМ
•«Что-то про CSS?»
•Длинные имена классов: btn? → b-button!
•Префиксы для классов: b-, i-, g-, js-
•Вло...
Не методология БЭМ
Обычный подход и БЭМ
Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысле...
Обычный подход и БЭМ
ПРОЦЕСС РАЗРАБОТКИ ПРОЦЕСС
РАЗРАБОТКИ

БЭМ
ДИЗАЙН
СТАТИСТИКА
ДИНАМИКА
ПРОЦЕСС РАЗРАБОТКИ

БЭМ
ДИЗАЙН ...
Обычный подход и БЭМ
Предпосылки для перехода на БЭМ:
• Разделение интерфейса на «АНБ»;
• Учет весов селекторов;
• Осмысле...
Методология БЭМ
Методология БЭМ — это набор паттернов и способ описывать
действительность при помощи кода и размышлять о Б...
Методология БЭМ
mega-blocks/common.blocks
button/
__control/
button__control.less
button.less
button.tmpl
header/
_christm...
Методология БЭМ
Процесс сборки БЭМ-проекта
project/bundles/
mnp/
mnp.bemjson.js
mnp.bemdecl.js*
mnp.bemjson.js:
({ block: 'p-mnp',
content...
Процесс сборки БЭМ-проекта
project/bundles/
mnp/
mnp.bemjson.js
mnp.bemdecl.js
mnp.deps.js
mnp.css
mnp.js
mnp.tmpl
mnp.htm...
Процесс сборки MegaFon.ru
project/blocks/
button/
button.less
tabbed-pane/
tabbed-pane.less
phone-input/
phone-input.less
...
Процесс сборки MegaFon.ru
some.tmpl:
<{$tag} {$ibem}> <!-- можно опустить -->
<!-- вывод переменной из данных -->
<div cla...
Процесс сборки MegaFon.ru
another.tmpl:
<!-- перебор всех блоков -->
<ul class="{$b__}list">
{foreach from=$content item=b...
Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде ша...
Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде ша...
Корпоративный сайт c БЭМ
Интеграция с CMS
• Меташаблоны (m-)
• Страницы (p-)
• Модули и достраивание дерева страницы

на о...
Корпоративный сайт c БЭМ
Корпоративный сайт c БЭМ
Страницы:
• p-* — порядка 50 типов;
• p-b2b-* — порядка 15 типов
Причины:
• Завязка на разделы в ...
Корпоративный сайт c БЭМ
Процесс разработки с БЭМ
• Единое пространство именования;
• Отчуждаемость ux, дизайна, верстки и разработки;
• Снижение с...
Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде ша...
Еще не приехали?
Хотелки:
• Перенос сборки на полностью статическую (enb?);
• Уход от императивных шаблонизаторов;
• Отдел...
Еще не приехали?
Тестирование:
• Стиль кодирования

JSHint, JSCS, LESSlint, php -l, etc.
• Тесты для любых шаблонов (или д...
Ссылки
http://bem.info — официальный сайт и форум
http://getbem.com — фан-сайт на английском
http://enb-make.info — про сб...
Процесс сборки MegaFon.ru
blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js
Отказы переходного периода:
• В коде ша...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
BUD17-223: IoT Toolchain BoF
Next
Download to read offline and view in fullscreen.

Share

BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда

  1. 1. BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда Кирилл Лапенин (МегаФон), Алексей Ярошевич (DALEE)
  2. 2. Что такое MegaFon.ru Это сайты для: • частных клиентов; • корпоративных клиентов; • операторов связи; • инвесторов; • прессы И 81 региональная версия каждого из них
  3. 3. Что  такое  megafon.ru Это более 100 задач на разработку в месяц, более 400 контентных задач в месяц Что такое MegaFon.ru
  4. 4. Что  такое  megafon.ru Как поддерживать? Что такое MegaFon.ru
  5. 5. …БЭМ
  6. 6. Про что ● Про историю, евпаторию, меланхолию ● Про грабли — и что делать, чтобы на них не наступить ● Про что-то, похожее на #b_ ● Про сборку и БЭМ-ориентированность ● Про интеграцию — бесконечный процесс БЭМификации ● Про стек MegaFon.ru и наши былинные отказы ● Про плюшки (и ватрушки) ● Про верную дорогу и светлое будущее
  7. 7. Про что ● Про историю, евпаторию, меланхолию ● Про грабли — и что делать, что на них наступить ● Про что-то похожее на #b_ ● Про сборку и БЭМ-ориентированность ● Про интеграцию — бесконечный процесс БЭМификации ● Про стек MegaFon.ru и наши былинные отказы ● Про плюшки (и ватрушки) ● Про верную дорогу и светлое будущее
  8. 8. Появление БЭМ «Блоком будем называть фрагмент страницы, который описывается своей разметкой и стилями» «1. никогда не опираться на элементы,
 только на классы;
 2. всем классам внутри блока давать имена, начинающиеся с имени этого блока»
 .b-user b → .b-user__first-letter Доклад @vithar на ClientSide'2007 Лего 1.0, 2008 — разделение по технологиям, ручные @import, префиксы b-, l-, i-, g-, и т.д.
  9. 9. Появление БЭМ •Лего 2.0, 2009 — Блоки первичны, технологии вторичны •Выделение БЭМ сущностей: •Блок — это элемент на странице, имеющий значение, имеющий отражение в разных технологиях, включаемых в его файловую структуру. •Элемент — часть блока, не имеющая без него смысла, и тоже состоящая из технологий. •Модификатор — штучка, модифицирующая блок. •Авто-генерация из XML: main.js, main.css, main.xsl.
  10. 10. Появление БЭМ Проблема скорости CSS селекторов, 2009 Нотация .b-block__elem_modifier_value
  11. 11. Появление БЭМ Open Source, 2010 - Уровни переопределения - Библиотека блоков: bem-bl - Инструменты: bem-tools http://bit.ly/bemstory-talk
  12. 12. Появление БЭМ в MegaFon.Ru 7 000 строк CSS. Разве это много?!
  13. 13. Появление БЭМ в MegaFon.Ru А если еще 5600? ;-)
  14. 14. Не методология БЭМ •«Что-то про CSS?» •Длинные имена классов: btn? → b-button! •Префиксы для классов: b-, i-, g-, js- •Вложенные элементы: nav__item__link •Отсутствие каскадов — никаких .page_theme .link! •Неоправданные каскады: .nav__item .link vs .nav__link •Web Components — близко, но нет •Прозрачность и простота — к сожалению, пока тоже нет
  15. 15. Не методология БЭМ Обычный подход и БЭМ
  16. 16. Обычный подход и БЭМ Предпосылки для перехода на БЭМ: • Разделение интерфейса на «АНБ»; • Учет весов селекторов; • Осмысленное применение каскадов; • Отделение логики представления от бизнес-логики; • Разнесение общих файлов на модули или плагины; • Команда, высокий BUS-фактор и соглашения; • Инструменты и «предпродажная» подготовка; • Тестирование и документирование, наконец!
  17. 17. Обычный подход и БЭМ ПРОЦЕСС РАЗРАБОТКИ ПРОЦЕСС РАЗРАБОТКИ
 БЭМ ДИЗАЙН СТАТИСТИКА ДИНАМИКА ПРОЦЕСС РАЗРАБОТКИ
 БЭМ ДИЗАЙН СТАТИСТИКА ДИНАМИКА ДОКУМЕНТАЦИЯ СЕРВИС БОЛЬШОЙ СЕРВИС
  18. 18. Обычный подход и БЭМ Предпосылки для перехода на БЭМ: • Разделение интерфейса на «АНБ»; • Учет весов селекторов; • Осмысленное применение каскадов; • Отделение логики представления от бизнес-логики; • Разнесение общих файлов на модули или плагины; • Команда, высокий BUS-фактор и соглашения; • Инструменты и «предпродажная» подготовка; • Тестирование и документирование, наконец! Обычный подход и БЭМ
  19. 19. Методология БЭМ Методология БЭМ — это набор паттернов и способ описывать действительность при помощи кода и размышлять о БЭМ- сущностях; БЭМ-сущность — это определение содержания страницы или сущность в БЭМ-предметной области (блок, элемент); Реализация (в технологии) — функциональная часть БЭМ- сущности, описанная в рамках конкретной технологии файлом или папкой с набором файлов; Технология (tech, technology) — инструкция (или процесс) для преобразования исходных материалов в целевой продукт;
  20. 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. 21. Методология БЭМ
  22. 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. 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. 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. 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. 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. 27. Процесс сборки MegaFon.ru blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js Отказы переходного периода: • В коде шаблонов хранятся данные о зависимостях; • В шаблоны передаются произвольные BEM-деревья; • Исчезновение глобального скоупа в шаблонах; • Скрипты на селекторах (jQuery, $__$); • «А как верстать?» — спрашивала команда; • В модулях начал расти view-ориентированный код
  28. 28. Процесс сборки MegaFon.ru blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js Отказы переходного периода: • В коде шаблонов хранятся данные о зависимостях; • В шаблоны передаются произвольные BEM-деревья; • Исчезновение глобального скоупа в шаблонах; • Скрипты на селекторах (jQuery, $__$); • «А как верстать?» — спрашивала команда; • В модулях начал расти view-ориентированный код
  29. 29. Корпоративный сайт c БЭМ Интеграция с CMS • Меташаблоны (m-) • Страницы (p-) • Модули и достраивание дерева страницы
 на основе данных моделей из базы • Дерево контента страницы, заданное
 блоками в панели управления • И блоки (с b- и, в последствии, без b-)
  30. 30. Корпоративный сайт c БЭМ
  31. 31. Корпоративный сайт c БЭМ Страницы: • p-* — порядка 50 типов; • p-b2b-* — порядка 15 типов Причины: • Завязка на разделы в базе — в теории, просто сменить; • Завязка на отрабатываемые модули для разных типов; • Процесс перехода был безболезненным
  32. 32. Корпоративный сайт c БЭМ
  33. 33. Процесс разработки с БЭМ • Единое пространство именования; • Отчуждаемость ux, дизайна, верстки и разработки; • Снижение сложности кода; • Возможность быстрого рефакторинга; • Возможность тестирования отдельных блоков; • Возможность описания библиотек постепенно И в целом — нам понравилось (ну мне лично — да).
  34. 34. Процесс сборки MegaFon.ru blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js Отказы переходного периода: • В коде шаблонов хранятся данные о зависимостях; • В шаблоны передаются произвольные BEM-деревья; • Исчезновение глобального скоупа в шаблонах; • Скрипты на селекторах (jQuery, $__$); • «А как верстать?» — спрашивала команда; • В модулях начал расти view-ориентированный код
  35. 35. Еще не приехали? Хотелки: • Перенос сборки на полностью статическую (enb?); • Уход от императивных шаблонизаторов; • Отдельная технология для создания view-ориентированных структур (bemtree-like); И тогда уже можно будет браться за bem-tools 3.0.
  36. 36. Еще не приехали? Тестирование: • Стиль кодирования
 JSHint, JSCS, LESSlint, php -l, etc. • Тесты для любых шаблонов (или для всех сразу)
 enb-bem-tmpl-specs • Спеки для бизнес логики блоков и модулей (JS)
 enb-bem-specs • Тесты внешнего вид (через phantomjs или селениум)
 gemini Запуск на post-commit с проверкой измененных файлов
  37. 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. 38. Процесс сборки MegaFon.ru blocks/**/*.tmpl + blocks/**/*.deps → deps → *.css, *.js Отказы переходного периода: • В коде шаблонов хранятся данные о зависимостях; • В шаблоны передаются произвольные BEM-деревья; • Исчезновение глобального скоупа в шаблонах; • Скрипты на селекторах (jQuery, $__$); • «А как верстать?» — спрашивала команда; • В модулях начал расти view-ориентированный код Вопросы?

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

Views

Total views

455

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×