i-bem.js: javascript в БЭМ-терминах. Елена Глухова, Варвара...
DESCRIPTION
Елена Глухова, Яндекс Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года. Варвара Степанова, Яндекс Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source. Тема доклада i-bem.js: JavaScript в БЭМ-терминах. Тезисы Разрабатывая сайты по методологии БЭМ, мы используем единую предметную область во всех технологиях: CSS, шаблоны, JavaScript. Для того чтобы это было возможно, в библиотеке блоков bem-bl реализовано ядро клиентского JS-фреймворка, которое позволяет работать со страницей в терминах БЭМ, на следующем уровне абстракции над DOM-представлением. В этом мастер-классе показаны ключевые моменты использования такого подхода для написания клиентского JS. Мы создаём составной блок, использующий JS-функциональность входящих в него маленьких блоков. В результате всё работает, и никакого копипаста.TRANSCRIPT
YAC-2011, Москва, 19 сентября 2011 года
Варвара Степанова
JavaScript в БЭМ-терминах
Wednesday, October 5, 2011
clck.ru/L45Cшпаргалка к мастер-классу
JavaScript в терминах БЭМ
Wednesday, October 5, 2011
Блоки и элементы
3
Wednesday, October 5, 2011
Модификаторы
4
Wednesday, October 5, 2011
Уровни переопределения
5
Wednesday, October 5, 2011
Составные блоки
6
Wednesday, October 5, 2011
JS-реализация блока i-bem
7
Wednesday, October 5, 2011
Некоторые особенностиFeatures
8
Wednesday, October 5, 2011
Некоторые особенностиFeatures
9
Декларативный стиль
Wednesday, October 5, 2011
Некоторые особенностиFeatures
10
Декларативный стиль
Отложенная инициализация
Wednesday, October 5, 2011
Некоторые особенностиFeatures
11
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Wednesday, October 5, 2011
Некоторые особенностиFeatures
12
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Wednesday, October 5, 2011
Некоторые особенностиFeatures
13
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Расширение поведения модификаторами и уровнями переопределения
Wednesday, October 5, 2011
Что будем делать?
14
Wednesday, October 5, 2011
b-cutБлок-cut
15
Wednesday, October 5, 2011
b-cutБлок-cut
16
Wednesday, October 5, 2011
Инструменты и окружение
17
Wednesday, October 5, 2011
Инструменты и окружение
18
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
Инициализация проекта
19
Wednesday, October 5, 2011
Инициализация проекта
20
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-docs.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
Структура проекта
21
bem-bl/blocks/pages/GNUmakefile
Wednesday, October 5, 2011
22
bem-bl/ blocks-common/ blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
23
bem-bl/ blocks-common/ i-bem/ ... blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
24
bem-bl/blocks/ b-cut/ ...pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
25
bem-bl/blocks/pages/ index/ index.bemjson.js ...GNUmakefile
Структура проекта
Wednesday, October 5, 2011
26
bem-bl/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
Пишем код
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>
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>
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>
Wednesday, October 5, 2011
Контейнер блока
31
<div class=”b-cut”> ...</div>
Wednesday, October 5, 2011
js: true
32
<div class=”b-cut i-bem” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
Пишем код
33
Wednesday, October 5, 2011
Инициализация
34
<div class=”b-cut i-bem b-cut_js_inited” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
Начальное состояние
35
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
Начальное состояние
36
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
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>
Wednesday, October 5, 2011
Пишем код
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>
Wednesday, October 5, 2011
Пишем код
40
Wednesday, October 5, 2011
Очередной проект
41
Wednesday, October 5, 2011
Инициализация проекта
42
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-blog.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
Пишем код
43
Wednesday, October 5, 2011
для “почитать”Ссылки
44
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4jsdoc в коде блока i-bem
Документация блока i-bemclck.ru/KzEJ
Клуб в Ярушке
Wednesday, October 5, 2011
Бонус!
46
Wednesday, October 5, 2011
Пишем код
47
Wednesday, October 5, 2011