Дом из готовых кирпичей. Библиотека блоков, тюнинг,...
DESCRIPTION
Елена Глухова, Яндекс Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года. Варвара Степанова, Яндекс Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source. Тема доклада Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Тезисы Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.TRANSCRIPT
YAC, Москва, 19 сентября 2011 года
Разработчики интерфейсовЕлена Глухова и Варвара Степанова
Дом из готовых кирпичейБиблиотека блоков, тюнинг, инструменты
Wednesday, October 5, 2011
clck.ru/L462шпаргалка к мастер-классу
Дом из готовых кирпичей
Wednesday, October 5, 2011
Немного теории
3
Wednesday, October 5, 2011
Образец подзаголовка
Картинка про предметную область БЭМ
4
Wednesday, October 5, 2011
Образец текста
Картинка про уровни переопределения
5
Wednesday, October 5, 2011
Про что мастер-класс?
6
Wednesday, October 5, 2011
7
Мы сделаем:
Wednesday, October 5, 2011
8
Проект с типовой архитектурой
Мы сделаем:
Wednesday, October 5, 2011
9
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Мы сделаем:
Wednesday, October 5, 2011
10
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Мы сделаем:
Wednesday, October 5, 2011
11
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Используем БЭМ-инструменты
Мы сделаем:
Wednesday, October 5, 2011
12
Конкретно:
Wednesday, October 5, 2011
13
Подключение библиотеки
Конкретно:
Wednesday, October 5, 2011
14
Подключение библиотекиСборка страницы
Конкретно:
Wednesday, October 5, 2011
15
Подключение библиотекиСборка страницыПереопределение уровнем
Конкретно:
Wednesday, October 5, 2011
16
Подключение библиотекиСборка страницыПереопределение уровнемПереопределение в разных технологиях
Конкретно:
Wednesday, October 5, 2011
17
Репозиторий
github.com/bem/bem-bl
или clck.ru/Kuu4
Документация
bem.github.com/bem-bl или clck.ru/Kuuk
БЭМ библиотека
Wednesday, October 5, 2011
Среда разработки
18
Wednesday, October 5, 2011
Инструменты и окружение
19
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
Установка bem-tools
20
Node.jsnodejs.org
Пакетный менеджер NPMnpmjs.org
Wednesday, October 5, 2011
Установка БЭМ-инструментов
21
> npm install -g bem ometajs xjst
Wednesday, October 5, 2011
Команды:
22
> bem --help
> bem create
> bem build
Wednesday, October 5, 2011
Новый проект
23
Wednesday, October 5, 2011
Проект на GitHub
24
clck.ru/LP3dgit://github.com/toivonen/yac2011-bem-bl-in-use.git
> git checkout first
> make branches
Wednesday, October 5, 2011
Подключение библиотеки
25
> git clone git://github.com/bem/bem-bl.git
bem-bl
Wednesday, October 5, 2011
Создание уровня (папки)
26
> bem create level --help
> bem create level pages
pages
Wednesday, October 5, 2011
Создание страницы
27
> bem create block --help
> bem create block index -l pages
pages/index
Wednesday, October 5, 2011
Создание страницы
28
> bem create block index -l pages -T bemjson.js
pages/index
Wednesday, October 5, 2011
Настройки уровня
29
> .bem/level.js
Wednesday, October 5, 2011
Создание страницы pages/index
30
> bem create block index -l pages -T bemjson.js
Wednesday, October 5, 2011
Сборка страницы
31
Wednesday, October 5, 2011
Собранные файлы
32
pages/index/index.csspages/index/index.ie.css
для браузера
Wednesday, October 5, 2011
Собранные файлы
33
pages/index/index.csspages/index/index.ie.csspages/index/index.js
для браузера
Wednesday, October 5, 2011
Собранные файлы
34
pages/index/index.csspages/index/index.ie.csspages/index/index.jspages/index/index.html
для браузера
Wednesday, October 5, 2011
Сборка css и js
35
bemjson.js -> bemdecl.jsbemdecl.js -> deps.jsdeps.js -> css, js, ie.css
Wednesday, October 5, 2011
Сборка html
36
deps.js -> bemhtml.jsbemjson + bemhtml.js = html
Wednesday, October 5, 2011
Команды сборки
37
> bem build --help> bem create --help
Wednesday, October 5, 2011
Развернуть @import
38
npm install -g borschik coa node-inherit cssp ometajs
Wednesday, October 5, 2011
Развернуть @import
39
borschik -t css -i pages/index/index.css -o pages/index/_index.css
Wednesday, October 5, 2011
GNUmakeAle
40
Wednesday, October 5, 2011
GNUmakeJle
41
> make> make -B> make -B pages/index/index.html> make -B pages/index/index.css
Wednesday, October 5, 2011
Делаем страницу
42
Wednesday, October 5, 2011
43
Wednesday, October 5, 2011
44
Уровень переопределения блоковСвой блокМодификатор блокаЗависимость блока от другого блока
Будем создавать:
Wednesday, October 5, 2011
45
> bem create level blocks -l bem-bl/blocks-common/ .bem/level.js
Создаем уровень переопределения проекта blocks
Wednesday, October 5, 2011
Создаем блок
46
> bem create block b-page -l blocks -T css
Wednesday, October 5, 2011
Сборка css для index.html
> make pages/index/index.css -B
47
— index.css
Wednesday, October 5, 2011
48
> make pages/index/index.js -Bили > make pages/index/index.ie.css -B
Сборка любой другой технологии js
Wednesday, October 5, 2011
Сборка всей страницы
49
> make pages/index/index.html -B
— index.html
— index.js
— index.css
— index.ie.css
Wednesday, October 5, 2011
для “почитать”Ссылки
50
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4
Сайт с документациейclck.ru/KzG7
Клуб в Ярушкеclubs.ya.ru/bem/ или clck.ru/4Jl3
Wednesday, October 5, 2011
