Библиотека bem-components — Ангелина Сидорцова, Яндекс

Библиотека    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

Анкета  обратной  связи

46

bit.ly/spb-feedback

Он уже заполнил. А ты?