Ангелина Сидорцова — Острова. Фронтенд по кусочкам

Руководитель группы разработки общих интерфейсов

ОстроваФронтенд по кусочкам

Гела Сидорцова

Я.Субботник, Минск, 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