Библиотека bem-components — Ангелина Сидорцова, Яндекс
DESCRIPTION
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (18 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, как сделать свою собственную библиотеку блоков такой же удобной и качественной, как это получилось с библиотекой bem-components.TRANSCRIPT
Библиотека bem-‐components
Гела Сидорцова, Служба разработки БЭМ, BEMup в Санкт-‐Петербурге, 6 сентября 2014
Гела Сидорцова
gela-‐d@yandex-‐team.ru
@gela_dd
github.com/gela-‐d
Руководитель группы разработки БЭМ-‐библиотек
2
Краткое содержание
Содержание
общее о библиотеке
компонентный подход
уровни
CodeStyle
тестирование (unit-‐, шаблоны, gemini)
conjnuous integrajon
4
bem-‐components
bem-‐components
6
bem.info/libs/bem-components/
bem-‐components
основана на bem-‐core
19 блоков
релиииииииз!
7
aqach buqon checkbox control-‐group
dropdown icon input link
menu radio select spin
bem-‐components: blocks
8
Разработчики
9
Разработчики и документаторы
10
Компонентая разработка
Уровни
12
Уровни
13
button
logo
user
input
navigationmarket-block
actions
map
search-block
Зачем?
удобно разрабатываться
удобно дебажить
стили, js, документация, шаблоны, всё, все разделено!!
тестирование отдельных кусков кода
удобное использование на проектах
14
Уровни пере-‐ и доопределений
Уровни
common
desktop
touch
touch-‐pad
touch-‐phone
design
16
.blocks
theme / state plain mouseDown
default!!
без темы
simple!!
button_theme_simple
normal!!
button_theme_normal
design
17
tech.yandex.ru/events/yasubbotnik/minsk-aug-2013/talks/1046/
Уровни
18
CodeStyle
CodeStyle
jshint
jscs
jshint-‐groups
precommithook
20
Тестирование
Тестирование
unit-‐тесты для js
тесты на шаблоны
визуальные тесты (gemini)
ручное
22
unit-‐тесты
unit-‐тесты
пишем отдельно на каждый блок
проверка гарантированного API
mocha тестовый framework
синтаксис: visionmedia.github.io/mocha
виртуальный браузер – PhantomJS
Istanbul для проверки покрытия
common.blocks/block/block.spec.js
24
unit-‐тесты
25
unit-‐тесты
26
Istanbul
27
Показывает % покрытия unit-тестами
Шесты на таблоны
Шаблонизаторы
29
Входные данные
Шаблоны
BEMHTML BH
html
Тесты на шаблоны
пишем на каждый блок
сравниваем результат BEMHTML и BH с эталонным HTML
проверяется с помощью tmpl-‐specs + html-‐differ
common.blocks/block/block.tmpl-‐specs/*.bemjson.js
30
Тесты на шаблоны
31
Тесты на шаблоны
32
Gemini
gemini
тестирование верстки
в разных браузерах
разных состояний
умеет скриншотить небольшие куски
Подробнее в докладе «Тестирование CSS-‐регрессий с Gemini — Сергей Татаринцев» ru.bem.info/talks/bemup-‐moscow-‐2014
34
gemini-‐тесты
пишем на каждый блок
сравниваем собранные картинки с эталонными
common.blocks/block/block.tests/gemini.bemjson.js
35
gemini-‐тесты
36
enabled / .capture('plain')
/ .capture('click', …)
/ .capture('text', …)
disabled / .capture('plain')
gemini-‐тесты
37
Собираем пример. Запускаем тесты.
gemini-‐тесты
38
Собираем пример. Запускаем тесты. Again.
gemini-‐тесты
39
Наглядно смотрим: /gemini-report/index.html
Conjnuous integrajon
Conjnuous integrajon. Travis.
41
Итоги
«А карлик ей и говорит»:
деление на компоненты – хорошо
тесты на все, что можно – хорошо
блоки есть в opensource
часть про тестирование в opensource
43
Потрогать/посмотреть
bem.info/libs/bem-‐components
github.com/bem/bem-‐components
44
начать использовать и получать массу удовольствия
Гела Сидорцова Руководитель группы разработки БЭМ-‐библиотек
gela-‐d@yandex-‐team.ru twiqer.com/bem_ru
ru.bem.info/forum
bem.info
