Page 1
Руководитель разработки на Украине
Я.Субботник, Москва, 8 cентября 2012 года
Настоящее и будущее БЭМ
Виталий Харисов
Здравствуйте, меня зовут Виталий Харисов.
Сегодня я хочу дать вам обзор существующих частей БЭМ, рассказать что у нас есть сейчас.
Поговорить о наших планах на будущее и чем нам можно помочь в разработке БЭМ.
Page 2
Настоящее
2
Итак, давайте посмотрим, что такое БЭМ сейчас.
Page 3
Методология
3
В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правила работы с кодом.
Page 4
Методология
4
— Порядок в коде
Эти правила облегчают разработку за счёт введения порядка в код.
Page 5
Методология
5
— Порядок в коде
— Упрощение работы в команде
Так же они упрощают командную работу — каждый игрок в команде не пишет код по своим правилам, а делает это согласовано с другими членами команды.
Page 6
БлокиМетодология
6
blocks/ head/ foot/ …
По этой методологии весь код проекта делится на блоки.
Page 7
blocks/ head/ head.css head.js head.bemhtml
ТехнологииМетодология
7
Реализация блока состоит из множества технологий.
Page 8
blocks/ head/ head.css head.js head.bemhtml
ТехнологииМетодология
8
По БЭМ-методологии разделение проекта на блоки находится на первом плане…
Page 9
blocks/ head/ head.css head.js head.bemhtml
ТехнологииМетодология
9
…а то на каких технологиях реализован блок — на последнем плане.
Page 10
tutorials/ prerequisites.wiki hello-world.wiki second-page.wiki
Технологии: ДокументацияМетодология
10
Это нас приводит к тому, что документация к проекту тоже может быть выражена в терминах БЭМ и работать с ней можно точно так же, как с кодом проекта.
Здесь каждый файл это отдельный блок с одной технологией .wiki
Page 11
blocks/ .bem/ head/ foot/ …
Уровни переопределенияМетодология
11
Блоки раскладываются на уровни переопределения.
Page 12
blocks/ .bem/ level.js head/ foot/ …
Уровни переопределенияМетодология
12
Каждый уровень переопределения может иметь свою настройку схемы именования БЭМ-сущностей и настройку технологий, которые используются при создании блоков.
Page 13
blocks/ .bem/ level.js head/ head.css head.js head.bemhtml
Уровни переопределенияМетодология
13
В этом случае схема именования — каждый блок в своей директории, …
Page 14
blocks/ .bem/ level.js head/ head.css head.js head.bemhtml
Уровни переопределенияМетодология
14
…технологии это файлы.
Page 15
tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki
Уровни переопределенияМетодология
15
А в случае с документацией, настройки уровня задают…
Page 16
tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki
Уровни переопределенияМетодология
16
…использование одного файла для реализации каждого блока.
Page 17
blocks-common/ .bem/ head/
blocks-desktop/ .bem/ head/
Уровни переопределенияМетодология
17
Реализация блока может быть на нескольких уровнях переопределения.
Page 18
blocks-common/
blocks-desktop/
pages-desktop/index/
Наборы уровней переопределенияМетодология
18
Уровни переопределения собираются в наборы, которые задают порядок, в котором собирается финальная реализация блока.
Page 19
blocks/ head/ head.css
ЭлементыМетодология
19
Блок состоит…
Page 20
blocks/ head/ __logo/ head__logo.css head.css
ЭлементыМетодология
20
…из элементов, которые являются минимальной структурной единицей.
Page 21
<div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT
ЭлементыМетодология
21
Элементы могут вкладываться один…
Page 22
<div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT
ЭлементыМетодология
22
…в другой при использовании, …
Page 23
blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css
ЭлементыМетодология
23
…но при описании иерархии нет, …
Page 24
blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css
ЭлементыМетодология
24
…все элементы описываются одним плоским списком внутри блока.
Page 25
<div class="head"> <div class="head__logo">
МиксыМетодология
25
Блоки можно смешивать…
Page 26
<div class="head i-bem"> <div class="head__logo">
МиксыМетодология
26
…с другими блоками…
Page 27
<div class="head i-bem"> <div class="head__logo b-logo">
МиксыМетодология
27
…или смешивать блоки…
Page 28
<div class="head i-bem"> <div class="head__logo b-logo">
МиксыМетодология
28
…с элементами. Или элементы с элементами.
Про это будет подробный доклад Кира.
Page 29
blocks/ head/ _size/ head_size_big.css
МодификаторыМетодология
29
У блока может быть один…
Page 30
blocks/ head/ _size/ head_size_big.css _type/ head_type_search.css
МодификаторыМетодология
30
…или несколько модификаторов, которые изменяют его.
Page 31
blocks/ head/ _size/ head_size_big.css
МодификаторыМетодология
31
Модификатор имеет имя и может принимать…
Page 32
blocks/ head/ _size/ head_size_big.css head_size_normal.css head_size_small.css
МодификаторыМетодология
32
…разные значения.
Page 33
Что почитать?Методология
33
Статья «Что такое БЭМ?»
Подробно это всё описано в статье «Что такое БЭМ?» на гитхабе.
Page 34
ИсторияМетодология
34
Статья:clubs.ya.ru/bem/1398
Видео:clubs.ya.ru/yasubbotnik/497
Про историю создания БЭМ я рассказывал на минском Я.Субботнике в начале лета, можно посмотреть видео рассказа clubs.ya.ru/yasubbotnik/497 или почитать статью clubs.ya.ru/bem/1398
Page 35
Инструменты
35
БЭМ-методология оперирует множеством сущностей.
Проекты, построеные на БЭМ, как правило, состоят из большого их количества.
Page 36
bem-tools
36
Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперировать БЭМ-сущностями: …
Page 37
bem-toolsИнструменты
37
— создавать
— уровни переопределения
— блоки
— элементы
— модификаторы
…создавать уровни переопределения, блоки, элементы, модификаторы; …
Page 38
bem-toolsИнструменты
38
— работать с технологиями
bem-tools позволяют работать с разными технологиями у БЭМ-сущностей.
Page 39
bem-toolsИнструменты
39
— работать с технологиями
— технологии по умолчанию
На уровне переопределения можно задать технологии по умолчанию, использующиеся при создании сущностей на этом уровне.
Page 40
bem-toolsИнструменты
40
— работать с технологиями
— технологии по умолчанию
— шаблоны технологий
У любой технологии можно задать шаблон, который будет использоваться при создании.
Page 41
bem-toolsИнструменты
41
— работать с технологиями
— технологии по умолчанию
— шаблоны технологий
— добавлять к имеющимся
Можно добавлять технологии к уже имеющимся сущностям.
Page 42
bem-toolsИнструменты
42
— работать с уровнями переопределения
bem-tools позволяют работать с несколькими уровнями переопределения: …
Page 43
bem-toolsИнструменты
43
— работать с уровнями переопределения
— при создании
…при создании сущности указывается на каком уровне это сделать; …
Page 44
bem-toolsИнструменты
44
— работать с уровнями переопределения
— при создании
— при сборке
…при сборке указывается набор уровней, которые надо использовать.
Page 45
bem-toolsИнструменты
45
— сборка проекта
bem-tools помогают собрать проект…
Page 46
bem-toolsИнструменты
46
— сборка проекта
— при разработке
…во время разработки…
Page 47
bem-toolsИнструменты
47
— сборка проекта
— при разработке
— для продакшена
…и для выкладки в продакшен.
Page 48
Другие инструменты
48
Помимо bem-tools мы разрабатываем ещё другие инструменты, которые можно использовать в отрыве от БЭМ.
Page 49
Работа с файламиИнструменты
49
— borschikgithub.com/veged/borschik
— setochkagithub.com/afelix/setochka
Инструменты для работы с файлами:
* Расширяемый сборщик текстовых файлов. Может использоваться для сборки CSS, JS и других файлов.
* Сеточка позволяет выделить CSS-свойств исходного CSS в отдельные файлы. Может использоваться для разбиения CSS-файла на несколько с вендорными префиксами.
Page 50
ОптимизаторыИнструменты
50
— cssogithub.com/css/csso
— imgogithub.com/imgo/imgo
— svgo (в разработке)github.com/deepsweet/svgo
Мы разрабатываем оптимизаторы для разных форматов:
* структурный оптимизатор CSS * оптимизатор для PNG и JPEG * оптимизатор SVG (в разработке)
Page 51
Парсеры / языкиИнструменты
51
— OmetaJSgithub.com/veged/ometa-js
— smakowikigithub.com/veged/shmakowiki
— gonzales (в разработке)github.com/afelix/gonzales
Мы разрабатываем парсеры для языков и сами языки:
* OmetaJS — объектно-ориентированный язык для построения парсеров * shmakowiki — диалект wiki, используем для своей документации * gonzales — быстрый парсер CSS (в разработке)
Page 52
Библиотека блоков bem-bl
52
Мы разрабатываем библиотеку блоков bem-bl.
Она состоит из двух частей.
Page 53
ЯдроБиблиотека блоков bem-bl
53
— шаблонизатор bemhtml
Первая часть это ядро, оно реализует технологии для облегчения работы с блоками.
Это шаблонизатор bemhtml, про который будет подробно рассказывать Вегед.
Page 54
ЯдроБиблиотека блоков bem-bl
54
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
И фреймворк для написания клиентского JavaScript, про который будет отдельная секция докладов от Вовы, Вари и Саши.
Page 55
ЯдроБиблиотека блоков bem-bl
55
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
— ядро — это блок!
ВАЖНО: Ядро это тоже блок и мы не навязываем его использование.
Page 56
ЯдроБиблиотека блоков bem-bl
56
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
— ядро — это блок!
— можно заменить на свой блок
Можно этот блок и не использовать, например, если вы разрабатываете систему, где нельзя брать сторонний код.
Page 57
Блоки для сайтовБиблиотека блоков bem-bl
57
— блоков мало
— демонстрация как делать свои блоки
Так же в библиотеке есть минимальный набор блоков, помогающий в реализации сайта.
Мы понимаем, что это не полноценный набор блоков для построения сайта.
Этот набор можно рассматривать как демонстрационный, на этом примере можно понять, как делать свои блоки.
Page 58
Варианты использования БЭМ
58
Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использования и не стремится его получить.
Наоборот, мы рассматриваем БЭМ как набор правил, который каждая конкретная команда встраивает в свой процесс разработки и использует так, как удобно.
Давайте посмотрим на примерах.
Page 59
Блоки в одном файле
59
У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.
Page 60
.block
.block__elem
.block_size_l
.block__elem_size_l
Именование классовБлоки в одном файле
60
Начинаете именовать классы в своём проекте по БЭМ-схеме.
Page 61
myfacebook/ styles.css scripts.js index.html
И верстаетеБлоки в одном файле
61
Используйте самую простую схему на файловой системе, когда реализация всех блоков лежит в одном файле соответствующей технологии.
При использовании этого варианта всё делается руками, без bem-tools.
Page 62
Блоки в директории
62
Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков по файлам: …
Page 63
blocks/ b-myblock.css b-myblock.js b-yourblock.css b-yourblock.js
Блоки в директории
63
И начинаете использовать bem-tools для сборки проекта.
Page 64
Не обязательное в файлах
64
Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах…
Page 65
blocks/ b-myblock/ b-myblock_mod_val1.css b-myblock__opt-elem.css b-myblock__opt-elem_mod_val1.css b-myblock.css
Не обязательное в файлах
65
…можно вынести их реализацию в отдельные файлы, чтобы подключать только то, что нужно.
Page 66
Модификаторы в директориях
66
Если модификаторов много…
Page 67
blocks/ b-myblock/ _mod/ b-myblock_mod_val1.css b-myblock__opt-elem.css b-myblock__opt-elem_mod_val1.css b-myblock.css
Модификаторы в директориях
67
…для каждого можно сделать отдельную директорию. Это разгрузит корневую директорию блока.
Page 68
Элементы/модификаторыв директориях
68
Самый сложный в разработке, но самый понятный вариант по конечной структуре, когда ВСЕ элементы блока и ВСЕ модификаторы имеют свои директории.
Page 69
blocks/ b-myblock/ _mod/ b-myblock_mod_val1.css __elem/ b-myblock__elem.css b-myblock.css
Элементы/модификаторыв директориях
69
Этот вариант самый наглядный, при взгляде на файловую систему можно увидеть всю структуру блока.
Можно упростить его, вынося в директории только необязательные элементы, а код обязательных элементов класть в основной файл блока.
Page 70
Будущее
70
Итак, это то, что у нас есть уже сейчас.
Дальше я расскажу о наших планах на ближайшие полгода/год и в чём нам можно помочь, ибо планов гораздо больше, чем мы успеваем сделать.
Page 71
Полный стек
71
Мы хотим построить полный стек разработки сайтов.
Page 72
Полный стек
72
— сложные системы
Чтобы можно было строить сложные системы используя наши технологии.
Page 73
Полный стек
73
— сложные системы
— методология для всех частей системы
Для всех частей системы должны быть определены правила, как она строится.
Page 74
Полный стек
74
— сложные системы
— методология для всех частей системы
— инструменты для всех частей системы
Эти правила должны быть подкреплены инструментами.
Page 75
Полный стек
75
— сложные системы
— методология для всех частей системы
— инструменты для всех частей системы
— много работы по документации
У нас практически уже всё есть для этого, предстоит большая работа по документированию и доведению до состояния, когда внешние люди могут использовать весь стек технологий для своей разработки.
Page 76
Сайт bem.info
76
До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ из первых рук.
Page 77
Сайт bem.info
77
— вся информация на одном сайте
В ходе работы над этим сайтом мы делаем документацию по использованию БЭМ.
Page 78
Сайт bem.info
78
— вся информация на одном сайте
— английский / русский
Сайт будет на двух языках, русском и английском, с возможностью добавления других языков.
Page 79
Как помочь?Сайт bem.info
79
Чем нам можно будет помочь:
Page 80
Как помочь?Сайт bem.info
80
— Перевод документации на другие языки
— Поддержка актуальности перевода
Перевод документации на другие языки с поддержкой актуальности этого перевода по мере изменения оригинальной документации.
Page 81
Как помочь?Сайт bem.info
81
— Перевод документации на другие языки
— Поддержка актуальности перевода
— Документация по настройке (Windows)
— Туториалы по внедрению БЭМ на сайты
* написание документации * по настройке окружения (например, в Windows) * туториалы по внедрению БЭМ в сайты, где он не используется
Page 82
Инструменты
82
В разработке bem-tools мы сейчас сосредоточены на сборке проекта.
При этом есть вещи, которые мы хотим сделать в bem-tools помимо этого и тут может пригодиться ваша помощь.
Page 83
bem moveИнструменты
83
— перемещение сущностей между уровнями
— переименование сущностей
— блок в элемент и наоборот
— перемещение модификаторов
* перемещение сущностей между уровнями переопределения с учётом настроек уровней переопределения * переименование сущностей * превращение блоков в элементы и наоборот * перемещение модификаторов * между блоками и элементами
Page 84
bem removeИнструменты
84
— удаление сущностей
— с поиском использования
Корректное удаление сущности с поиском всех случаев её использования.
Page 85
bem lintИнструменты
85
— проверка блоков
Сделать bem lint, проверяющий целостность блока, что все сущности описаны правильно и лежат на своих местах.
Page 86
bem lintИнструменты
86
— проверка блоков
— аналог jslint / jshintclubs.ya.ru/yasubbotnik/395
Аналог jshint, про него рассказывать Митя Щадей на Субботнике в Киеве.
Page 87
Инфраструктурабиблиотек блоков
87
Мы работаем сейчас над инфраструктурой библиотек блоков…
Page 88
Инфраструктура библиотек блоков
88
— создавать свои библиотеки блоков
— документация к библиотеке
— changelog'и
— скрипты миграции между версиями
— сайт с примерами и документацией
…неким набором правил и инструментов, которые позволят разработчикам
* создавать свои библиотеки блоков * писать к ним документацию * скрипты миграции с версии на версию * changelog'и * построить сайт для библиотеки блоков с живыми примерами и документацией
Page 89
Библиотеки блоков
89
После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашу текущую библиотеку bem-bl на несколько.
Page 90
Библиотеки блоков
90
— много вместо одной
— логическая целостность
— независимое использование
Мы хотим сделать независимый набор библиотек блоков, каждая из которых будет обладать логической целостностью, чтобы их можно было использовать независимо.
Page 91
Зачем?Библиотеки блоков
91
— разные мейнтейнеры
— разные релизные циклы
— проще развивать и поддерживать
Зачем это нужно делать:
* много маленьких библиотек проще раздать в поддержку разным людям * маленькие библиотеки можно выпускать с разной скоростью * проще развивать и поддерживать
Page 92
ПримерыБиблиотеки блоков
92
— bl-coreкорневые блоки на которых строятся последующие
— bl-genericблоки, которые часто встречаются в вёрстке страниц: ссылки, иконки
— bl-formблоки для реализации форм, в том числе контролы форм
Можно выделить в отдельные библиотеки ядро, блоки общего назначения, для работы с формами…
Page 93
ПримерыБиблиотеки блоков
93
— bl-layoutтиповые раскладки страниц
— bl-searchпоисковая форма и выдача результатов поиска
— bl-Oashподключение флеша на страницу
— bl-authаутентификация пользователей
…типовые раскладки страниц, поиск по сайту, работа с флешем, аутентификация пользователей и так далее.
Page 94
Среда разработки
94
И на десерт самое вкусное :)
Page 95
Как сейчасСреда разработки
95
— работа с файловой системой
— поддержка целостности
— руками
— bem-tools
Сейчас разработчик, использующий БЭМ слишком близко находится к файловой системе и тратит часть своего времени на поддержание целостности проекта на файловой системе руками или с помощью bem-tools.
Page 96
Как хотимСреда разработки
96
— работа с БЭМ, а не файлами
— работа на всех платформах
— разработка в браузере!
— доступ к коду сайта рядом с самим сайтом
— Cloud9?
Нужна среда для разработки, которая будет знать про БЭМ, про уровни переопределения и помогать разработчику писать код так, чтобы он был хорошо структурированным.
При этом эта среда не должна быть привязана к какой-то определённой платформе.
В идеале она вообще должна работать в браузере.
По одному адресу своего сайта разработчик редактирует код, а по другому адресу смотрит результат.
Мы сейчас смотрим в сторону Cloud9.
Page 97
Подведём итог
97
Итак, давайте подведём итог.
Page 98
НастоящееПодведём итог
98
— Методология
— Инструменты
— Библиотека блоков
— Шаблонизатор bemhtml
— JavaScript фреймворк i-bem.js
Мы сегодня рассмотрели настоящее БЭМ, увидели, что он состоит из:
* Методологии * Инструментов * Библиотеки блоков * Технологий для шаблонизации и построения клиентского кода на JavaScript
Page 99
БудущееПодведём итог
99
— Полный стек
— Сайт bem.info
— Развитие инструментов
— Библиотеки блоков
— Среда разработки
И попробовали заглянуть в ближайшее будущее:
* Мы строим полный стек * Будем сделать сайт со всей информацией * Дальше развивать инструменты * Делать библиотеки блоков * И среду для разработки
Page 100
@harisov
#b_ #yasubbotnik
Виталий Харисов[email protected]
Спасибо за внимание.
Я готов ответить на ваши вопросы сейчас и в перерывах между докладами.