Эластичная front-end разработка

Transcript

1. Эластичная front-end разработка Яндекс БЭМ
2. Классический процесс 1. Дизайн макета ◦ Обсуждение деталей с PO на этапе оформления ◦ Контраком запрещены кардинальные изменения после одобренного макета 2. Готовый макет идёт в разработку ◦ Вёрстка/Программирование/Отладка 3. И вот оно, чудо ... пока не появилась необходимость в изменениях
3. Что не так? • Монолитность ◦ всё или ничего ◦ сложность в поддержке и изменениях • Проектом живут в рисунках, а не на живом проекте ◦ в лучшем случает упущенные улучшения ◦ в худшем плохой UI • Масштабируемость ◦ Что если на один проект НЕ один front-end разработчик?
4. Какой процесс нужен? Ну вы и так знаете ;) • Итеративный и инкрементальный ◦ Обсудили/Нарисовали/Сверстали/Показали БЛОК • С вовлечением PO, или как его там ◦ "А я хочу эту колонки поменять местами" ▪ wtf? запросто!
5. Яндекс БЭМ • Блок ◦ Самостоятельная сущность ◦ Простая или составная ◦ Основной макет, меню, блок авторизации, поиск • Элемент ◦ Часть блока, с отдельной задачей ◦ Не имеет смысла в отрыве от блока ◦ Поле ввода, кнопка поиска • Модификатор ◦ Модификации блоков и/или элементов ◦ Горизонтальное меню, вертикальное меню
6. Одна предметная область Договорившись о разделении всего на блоки, элементы и модификаторы начинается подбор необходимых названий. • Wizard (Блок) ◦ Wizard Step (Элемент) ◦ Active (Модификатор) Wizard Step view-source:https://money.yandex.ru/
7. Технологии вокруг предметной области • CSS ◦ .b-wizard {} .e-wizard-step {} • JS ◦ $(".e-wizard-step.active").click() • File System ◦ /project/wizard/wizard.css ◦ /project/wizard/wizard.js • Images ◦ /project/wizard/magic_wand.png
8. Слабая связность блоков • Только CSS классы, никаких ID • Полное имя e-wizard-step • Отдельная папка в FS • Абстрагирование от HTML разметки Дадут возможность перемещать, изменять вложенность и независимо изменять части сайта.
9. Инструменты • bem-tools Это технология или подход? DIY!! http://ru.bem.info
10. Автор доклада Жора Михайлов Искушённый веб разработчик george.mihailoff.com george@mihailoff.com