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