Руководитель группы разработки общих интерфейсов
ОстроваФронтенд по кусочкам
Гела Сидорцова
Я.Субботник, Минск, 31 августа 2013 года
Рядом с цветущим вьюнкомОтдыхает в страду молотильщик.Большая библиотека.
Как было
Рус. нар. хокку
3
LEGO
4
LEGO• используется на всем портале
• методология БЭМ
• сокращение времени разработки
• обеспечение единообразия портала
• внутренний сервис
5
Хотела кнопкуобновить...
...приехалиновые иконки
не надо так
С чего все началось
Островки... Островки...И на сотни осколков дробитсяМоре летнего дня.
Басё
7
8
9
10
11
12
13
14
page
service
user
search
components
Цели:
• автономное обновление• независимая разработка• отсутствие лишнего кода
15
Чужих меж нами нет!Все мы друг другу братьяПод вишнями в цвету.
Исса
Выносим в opensource
• github.com/bem/bem-bl• github.com/bem/bem-components• github.com/bem/bem-core
Opensource
17
new
Все глубже осенняя ночь. Млечный Путь разгорается ярче Делим код по платформам.
Делим по платформам
Рус. нар. хокку
• Уровень один– Уровень два
Платформы:
19
desktop tablet phone
20
desktop touch
Платформы:
tablet phone
Платформы:
21
desktop
common
touch
tablet phone
22
desktop
common
touch
tablet phone
bem-bl | bem-components | bem-core
Платформы + opensource:
23
desktop
common
bem-bl | bem-components | bem-core
desktop:
24
common
touch
tablet
tablet:
bem-bl | bem-components | bem-core
25
common
touch
phone
phone:
bem-bl | bem-components | bem-core
.button {background-color: grey;
}
Платформа: desktop
26
common.blocks
.button {height: 22px;cursor: pointer;
}
desktop.blocks
.button {display: inline-block;
}
bem-bl/block-common
.button {font-size: 16px;
}
.button {height: 24px;-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Платформа: tablet
27
common.blocks
touch-pad.blocks
.button {display: inline-block;
}
bem-bl/block-common
touch.blocks
.button {background-color: grey;
}
Платформа: phone
28
.button {font-size: 15px;
}
.button {height: 24px;-webkit-tap-highlight-color: rgba(0,0,0,0);
}
common.blocks
touch-phone.blocks
.button {display: inline-block;
}
bem-bl/block-common
touch.blocks
.button {background-color: grey;
}
Там, куда улетаетКрик предрассветный кукушки,Что там? – Далекий остров.
Басё
Объединяем
Meta-библиотека
30
Meta-библиотека
31
• срез версий библиотек• тестирование связки библиотек• стабильное состояние с определенными версиями
Итоги
• распилили по смысловым библиотекам• вынесли в opensource• распилили по платформам• соединили все в мета-библиотеку
Итоги
33
bem.info
Руководитель группы разработки общих интерфейсов
Гела Сидорцова
facebook.com/groups/bem.infobem_ruclubs.ya.ru/bemgithub.com/bem
Вопросы и пожелания:
gela_dd
Recommended
