Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (18 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, как сделать свою собственную библиотеку блоков такой же удобной и качественной, как это получилось с библиотекой bem-components.

1. Библиотека
bem-­‐components
Гела Сидорцова, Служба разработки БЭМ,
BEMup в Санкт-­‐Петербурге, 6 сентября 2014

2. Гела Сидорцова
gela-­‐d@yandex-­‐team.ru
@gela_dd
github.com/gela-­‐d
Руководитель группы
разработки БЭМ-­‐библиотек
2

3. Краткое содержание

4. Содержание
общее о библиотеке
компонентный подход
уровни
CodeStyle
тестирование (unit-­‐, шаблоны, gemini)
conjnuous integrajon
4

5. bem-­‐components

6. bem-­‐components
6
bem.info/libs/bem-components/

7. bem-­‐components
основана на bem-­‐core
19 блоков
релиииииииз!
7

8. bem-­‐components: blocks
aqach buqon checkbox control-­‐group
dropdown icon input link
menu radio select spin
8

9. Разработчики
9

10. Разработчики и документаторы
10

11. Компонентая разработка

12. Уровни
12

13. Уровни
13
button
logo
input
user
navigation
market-block
actions
map
search-block

14. Зачем?
удобно разрабатываться
удобно дебажить
стили, js, документация, шаблоны, всё, все разделено!!
тестирование отдельных кусков кода
удобное использование на проектах
14

15. Уровни пере-­‐ и доопределений

16. Уровни
common
desktop
touch
touch-­‐pad
touch-­‐phone
design
16
.blocks

17. design
theme / state plain mouseDown
default!
!
без темы
simple!
!
button_theme_simple
normal!
!
button_theme_normal
17

18. Уровни
tech.yandex.ru/events/yasubbotnik/
minsk-aug-2013/talks/1046/
18

19. CodeStyle

20. CodeStyle
jshint
jscs
jshint-­‐groups
precommithook
20

21. Тестирование

22. Тестирование
unit-­‐тесты для js
тесты на шаблоны
визуальные тесты (gemini)
ручное
22

23. unit-­‐тесты

24. unit-­‐тесты
пишем отдельно на каждый блок
проверка гарантированного API
mocha тестовый framework
синтаксис: visionmedia.github.io/mocha
виртуальный браузер – PhantomJS
Istanbul для проверки покрытия
common.blocks/block/block.spec.js
24

25. unit-­‐тесты
25

26. unit-­‐тесты
26

27. Istanbul
27
Показывает % покрытия unit-тестами

28. Шесты на таблоны

29. Шаблонизаторы
29
Входные
данные
Шаблоны
BEMHTML BH
html

30. Тесты на шаблоны
пишем на каждый блок
сравниваем результат BEMHTML и BH с эталонным HTML
проверяется с помощью tmpl-­‐specs + html-­‐differ
common.blocks/block/block.tmpl-­‐specs/*.bemjson.js
30

31. Тесты на шаблоны
31

32. Тесты на шаблоны
32

33. Gemini

34. gemini
тестирование верстки
в разных браузерах
разных состояний
умеет скриншотить небольшие куски
Подробнее в докладе «Тестирование CSS-­‐регрессий с
Gemini — Сергей Татаринцев»
ru.bem.info/talks/bemup-­‐moscow-­‐2014
34

35. gemini-­‐тесты
пишем на каждый блок
сравниваем собранные картинки с эталонными
common.blocks/block/block.tests/gemini.bemjson.js
35

36. gemini-­‐тесты
36
enabled / .capture('plain')
/ .capture('click', …)
/ .capture('text', …)
disabled / .capture('plain')

37. gemini-­‐тесты
37
Собираем пример. Запускаем тесты.

38. gemini-­‐тесты
38
Собираем пример. Запускаем тесты. Again.

39. gemini-­‐тесты
39
Наглядно смотрим: /gemini-report/index.html

40. Conjnuous integrajon

41. Conjnuous integrajon. Travis.
41

42. Итоги

43. «А карлик ей и говорит»:
деление на компоненты – хорошо
тесты на все, что можно – хорошо
блоки есть в opensource
часть про тестирование в opensource
43

44. Потрогать/посмотреть
bem.info/libs/bem-­‐components
github.com/bem/bem-­‐components
44
начать использовать и получать массу удовольствия

45. Гела Сидорцова
Руководитель группы
разработки БЭМ-­‐библиотек
bem.info
ru.bem.info/forum
gela-­‐d@yandex-­‐team.ru twiqer.com/bem_ru

46. Анкета обратной связи
46
bit.ly/spb-feedback
Он уже заполнил.
А ты?