Upload
yandex
View
531
Download
2
Embed Size (px)
DESCRIPTION
Об уменьшении энтропии при разработке интерфейса «Портала здравоохранения Московской области» на 1C-Битрикс. В докладе я покажу разницу в подходах БЭМ и Битрикс, расскажу о своих мыслях на старте разработки, о процессе создания шаблонов, проблемах и решениях, общении в команде и планах на будущее.
Citation preview
Слабых хаос поглощает, сильные им управляют
БЭМ: Параллельные миры
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