Антон Кузнецов — БЭМ: параллельные миры

Слабых хаос поглощает, сильные им управляют

БЭМ: Параллельные миры

BEMup в рамках YaC 2013Кузнецов Антон

Представиться

Зовут: Кузнецов Антон

Кто: Разработчик интерфейсов

Где: Интернет фабрика

2

спустя 1 год ...

3

4

5

План1.Представиться

2.Проект

3.Команда

4. Bitrix—way

5.Поиск решения

6. BEM—way

7.Тонкости процесса разработки

8.Итоги6

Проект

Название: «Портал здравоохранения МО»

URL: zdravmo.ru

Начинка: 1С-Битрикс

Преимущества: Лучшие маркетологи

7

8

Задачи для себя

Максимально быстро внедрить интерфейс

Оптимальное решение для подгрузки ресурсов

Очистить код cms от мусора, inline css и js

При верстке интерфейса cms следовать БЭМ

Рассказать какой я молодец на втором bemup?

9

Команда1 дизайнер

2 аналитика

2 тестировщика

3 программиста

2 разработчика интерфейсов

10

«А вы, друзья, как ни садитесь, Всё в музыканты не годитесь»

И.А. Крылов11

Проблемы

Отсутствие здравой шаблонизации

Модульно—компонентная система

Система сборки страницы

Качество кода предыдущей версии

12

Отсутствие шаблонизации

13

Помесь php и html

14

Модульно — компонентная система

horizontal_mainmenu

horizontal_multilevel_new

vertical_multilevel_bottom

vertical_multilevel_inner

15

Модульно — компонентная система

16

Система сборки страницы

header.php

content (Work area)

footer.php

Подробное описание http://clck.ru/8qHEB

17

Шаблон компонента

18

А если 10 компонентов

19

Цепочка развития

Больше файлов

Больше запросов

Меньше клиентов

Дольше грузится

20

Качество кода предыдущей версии

21

22

BEM—wayЛегкая читаемость кода

Легкая масштабируемость кода

Максимальное реиспользование кода

Свой уровень абстракции для блоков

Решение проблемы именования

23

БенефитыСкорость разработки

Ориентация в коде по методологии

Уверенный code management

Стандартизированный подход

Быстрое внедрение новинок

24

Уровень абстракции блоков

horizontal_multilevel_new

.b-menu

Быстрый поиск нужных стилей

Разговор на одном языке

25

Инструменты

26

Результат разработки

Уложились в 1 месяц

1я неделя — верстка статики, js

2я, 3я неделя — адаптация к cms

4я неделя — правки, баги, фиксы

27

Про работу в команде

Отсутствие VCS -

Моя монополия на css и js +

Code Review +

Профит в виде БЭМ +

28

Тонкости работы в команде

Нежелание понять workflow

Написание кода не по методологии

Неполное использование кода

Странная любовь к inline-коду

29

ИтогиУложились в срок

Никакого «плохого» кода

Легкость реиспользования кода

Стандартизация кода

Пообщался с коллегами

Получил большой практический опыт30

Планы на будущееОтказаться от GUI tools

Grunt

Разобраться с bem—tools

Создать гайдлайн по верстке

Обучать коллег

Делать крутые проекты с БЭМ31

Спасибо

Антон Кузнецовразработчик интерфейсов

Интернет фабрика

@iSnifer

32