Елена Глухова, Яндекс Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года. Варвара Степанова, Яндекс Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. 

Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source. Тема доклада i-bem.js: JavaScript в БЭМ-терминах. Тезисы Разрабатывая сайты по методологии БЭМ, мы используем единую предметную область во всех технологиях: CSS, шаблоны, JavaScript. Для того чтобы это было возможно, в библиотеке блоков bem-bl реализовано ядро клиентского JS-фреймворка, которое позволяет работать со страницей в терминах БЭМ, на следующем уровне абстракции над DOM-представлением. В этом мастер-классе показаны ключевые моменты использования такого подхода для написания клиентского JS. Мы создаём составной блок, использующий JS-функциональность входящих в него маленьких блоков. В результате всё работает, и никакого копипаста.

1. JavaScript в БЭМ-терминах
Варвара Степанова
YAC-2011, Москва, 19 сентября 2011 года
Wednesday, October 5, 2011

2. clck.ru/L45C
шпаргалка к мастер-классу
JavaScript в терминах БЭМ
Wednesday, October 5, 2011

3. Блоки и элементы
3
Wednesday, October 5, 2011

4. Модификаторы
4
Wednesday, October 5, 2011

5. Уровни переопределения
5
Wednesday, October 5, 2011

6. Составные блоки
6
Wednesday, October 5, 2011

7. JS-реализация блока i-bem
7
Wednesday, October 5, 2011

8. Features
Некоторые особенности
8
Wednesday, October 5, 2011

9. Features
Некоторые особенности
Декларативный стиль
9
Wednesday, October 5, 2011

10. Features
Некоторые особенности
Декларативный стиль
Отложенная инициализация
10
Wednesday, October 5, 2011

11. Features
Некоторые особенности
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
11
Wednesday, October 5, 2011

12. Features
Некоторые особенности
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
12
Wednesday, October 5, 2011

13. Features
Некоторые особенности
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Расширение поведения модификаторами и уровнями
переопределения
13
Wednesday, October 5, 2011

14. Что будем делать?
14
Wednesday, October 5, 2011

15. Блок-cut
b-cut
15
Wednesday, October 5, 2011

16. Блок-cut
b-cut
16
Wednesday, October 5, 2011

17. Инструменты и окружение
17
Wednesday, October 5, 2011

18. Инструменты и окружение
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
18
Wednesday, October 5, 2011

19. Инициализация проекта
19
Wednesday, October 5, 2011

20. Инициализация проекта
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-docs.git
make
Получает библиотеку bem-bl
Собирает страницы
20
Wednesday, October 5, 2011

21. Структура проекта
bem-bl/
blocks/
pages/
GNUmakefile
21
Wednesday, October 5, 2011

22. Структура проекта
bem-bl/
blocks-common/
blocks-desktop/
blocks/
pages/
GNUmakefile
22
Wednesday, October 5, 2011

23. Структура проекта
bem-bl/
blocks-common/
i-bem/
...
blocks-desktop/
blocks/
pages/
GNUmakefile
23
Wednesday, October 5, 2011

24. Структура проекта
bem-bl/
blocks/
b-cut/
...
pages/
GNUmakefile
24
Wednesday, October 5, 2011

25. Структура проекта
bem-bl/
blocks/
pages/
index/
index.bemjson.js
...
GNUmakefile
25
Wednesday, October 5, 2011

26. Структура проекта
bem-bl/
blocks/
pages/
GNUmakefile
26
Wednesday, October 5, 2011

27. Пишем код
27
Wednesday, October 5, 2011

28. Основные элементы блока
<div class=”b-cut”>
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-
link":{}}”>
...
</a>
<div class=”b-cut__content”>
...
</div>
</div>
28
Wednesday, October 5, 2011

29. Начальное состояние
<div class=”b-cut”>
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-
link":{}}”>
...
</a>
<div class=”b-cut__content”>
...
</div>
</div>
29
Wednesday, October 5, 2011

30. Открытый кат
<div class=”b-cut”>
<a class=”b-link b-link_pseudo_yes b-cut__opener
b-cut__opener_visibility_hidden i-bem” onclick=”return {"b-link":{}}”>
...
</a>
<div class=”b-cut__content b-cut__opener_visibility_visible”>
...
</div>
</div>
30
Wednesday, October 5, 2011

31. Контейнер блока
<div class=”b-cut”>
...
</div>
31
Wednesday, October 5, 2011

32. js: true
<div class=”b-cut i-bem”
onclick=”return {"b-cut":{}}”>
...
</div>
32
Wednesday, October 5, 2011

33. Пишем код
33
Wednesday, October 5, 2011

34. Инициализация
<div class=”b-cut i-bem b-cut_js_inited”
onclick=”return {"b-cut":{}}”>
...
</div>
34
Wednesday, October 5, 2011

35. Начальное состояние
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem”
onclick=”return {"b-link":{}}”>
...
</a>
35
Wednesday, October 5, 2011

36. Начальное состояние
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem”
onclick=”return {"b-link":{}}”>
...
</a>
36
Wednesday, October 5, 2011

37. Начальное состояние
<a class=”b-link b-link_pseudo_yes b-link_js_inited b-
cut__opener i-bem” onclick=”return {"b-link":{}}”>
...
</a>
37
Wednesday, October 5, 2011

38. Пишем код
38
Wednesday, October 5, 2011

39. Как закрывать кат?
<div class=”b-cut”>
...
<div class=”b-cut__content b-cut__opener_visibility_visible”>
<i class=”b-cut__close”></i>
...
</div>
</div>
39
Wednesday, October 5, 2011

40. Пишем код
40
Wednesday, October 5, 2011

41. Очередной проект
41
Wednesday, October 5, 2011

42. Инициализация проекта
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-blog.git
make
Получает библиотеку bem-bl
Собирает страницы
42
Wednesday, October 5, 2011

43. Пишем код
43
Wednesday, October 5, 2011

44. Ссылки
для “почитать”
Репозиторий библиотеки
github.com/bem/bem-bl или clck.ru/Kuu4
jsdoc в коде блока i-bem
Документация блока i-bem
clck.ru/KzEJ
Клуб в Ярушке
44
Wednesday, October 5, 2011

45. Bарвара Степанова
toivonen@yandex-team.ru
Wednesday, October 5, 2011

46. Бонус!
46
Wednesday, October 5, 2011

47. Пишем код
47
Wednesday, October 5, 2011