Руководитель разработки на Украине

Я.Субботник, Москва, 8 cентября 2012 года

Настоящее и будущее БЭМ

Виталий Харисов

Здравствуйте, меня зовут Виталий Харисов.

Сегодня я хочу дать вам обзор существующих частей БЭМ, рассказать что у нас есть сейчас.

Поговорить о наших планах на будущее и чем нам можно помочь в разработке БЭМ.

Настоящее

2

Итак, давайте посмотрим, что такое БЭМ сейчас.

Методология

3

В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правила работы с кодом.

Методология

4

— Порядок в коде

Эти правила облегчают разработку за счёт введения порядка в код.

Методология

5

— Порядок в коде

— Упрощение работы в команде

Так же они упрощают командную работу — каждый игрок в команде не пишет код по своим правилам, а делает это согласовано с другими членами команды.

БлокиМетодология

6

blocks/ head/ foot/ …

По этой методологии весь код проекта делится на блоки.

blocks/ head/ head.css head.js head.bemhtml

ТехнологииМетодология

7

Реализация блока состоит из множества технологий.

blocks/ head/ head.css head.js head.bemhtml

ТехнологииМетодология

8

По БЭМ-методологии разделение проекта на блоки находится на первом плане…

blocks/ head/ head.css head.js head.bemhtml

ТехнологииМетодология

9

…а то на каких технологиях реализован блок — на последнем плане.

tutorials/ prerequisites.wiki hello-world.wiki second-page.wiki

Технологии: ДокументацияМетодология

10

Это нас приводит к тому, что документация к проекту тоже может быть выражена в терминах БЭМ и работать с ней можно точно так же, как с кодом проекта.

Здесь каждый файл это отдельный блок с одной технологией .wiki

blocks/ .bem/ head/ foot/ …

Уровни переопределенияМетодология

11

Блоки раскладываются на уровни переопределения.

blocks/ .bem/ level.js head/ foot/ …

Уровни переопределенияМетодология

12

Каждый уровень переопределения может иметь свою настройку схемы именования БЭМ-сущностей и настройку технологий, которые используются при создании блоков.

blocks/ .bem/ level.js head/ head.css head.js head.bemhtml

Уровни переопределенияМетодология

13

В этом случае схема именования — каждый блок в своей директории, …

blocks/ .bem/ level.js head/ head.css head.js head.bemhtml

Уровни переопределенияМетодология

14

…технологии это файлы.

tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki

Уровни переопределенияМетодология

15

А в случае с документацией, настройки уровня задают…

tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki

Уровни переопределенияМетодология

16

…использование одного файла для реализации каждого блока.

blocks-common/ .bem/ head/

blocks-desktop/ .bem/ head/

Уровни переопределенияМетодология

17

Реализация блока может быть на нескольких уровнях переопределения.

blocks-common/

blocks-desktop/

pages-desktop/index/

Наборы уровней переопределенияМетодология

18

Уровни переопределения собираются в наборы, которые задают порядок, в котором собирается финальная реализация блока.

blocks/ head/ head.css

ЭлементыМетодология

19

Блок состоит…

blocks/ head/ __logo/ head__logo.css head.css

ЭлементыМетодология

20

…из элементов, которые являются минимальной структурной единицей.

<div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT

ЭлементыМетодология

21

Элементы могут вкладываться один…

<div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT

ЭлементыМетодология

22

…в другой при использовании, …

blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css

ЭлементыМетодология

23

…но при описании иерархии нет, …

blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css

ЭлементыМетодология

24

…все элементы описываются одним плоским списком внутри блока.

<div class="head"> <div class="head__logo">

МиксыМетодология

25

Блоки можно смешивать…

<div class="head i-bem"> <div class="head__logo">

МиксыМетодология

26

…с другими блоками…

<div class="head i-bem"> <div class="head__logo b-logo">

МиксыМетодология

27

…или смешивать блоки…

<div class="head i-bem"> <div class="head__logo b-logo">

МиксыМетодология

28

…с элементами. Или элементы с элементами.

Про это будет подробный доклад Кира.

blocks/ head/ _size/ head_size_big.css

МодификаторыМетодология

29

У блока может быть один…

blocks/ head/ _size/ head_size_big.css _type/ head_type_search.css

МодификаторыМетодология

30

…или несколько модификаторов, которые изменяют его.

blocks/ head/ _size/ head_size_big.css

МодификаторыМетодология

31

Модификатор имеет имя и может принимать…

blocks/ head/ _size/ head_size_big.css head_size_normal.css head_size_small.css

МодификаторыМетодология

32

…разные значения.

Что почитать?Методология

33

Статья «Что такое БЭМ?»

Подробно это всё описано в статье «Что такое БЭМ?» на гитхабе.

ИсторияМетодология

34

Статья:clubs.ya.ru/bem/1398

Видео:clubs.ya.ru/yasubbotnik/497

Про историю создания БЭМ я рассказывал на минском Я.Субботнике в начале лета, можно посмотреть видео рассказа clubs.ya.ru/yasubbotnik/497 или почитать статью clubs.ya.ru/bem/1398

Инструменты

35

БЭМ-методология оперирует множеством сущностей.

Проекты, построеные на БЭМ, как правило, состоят из большого их количества.

bem-tools

36

Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперировать БЭМ-сущностями: …

bem-toolsИнструменты

37

— создавать

— уровни переопределения

— блоки

— элементы

— модификаторы

…создавать уровни переопределения, блоки, элементы, модификаторы; …

bem-toolsИнструменты

38

— работать с технологиями

bem-tools позволяют работать с разными технологиями у БЭМ-сущностей.

bem-toolsИнструменты

39

— работать с технологиями

— технологии по умолчанию

На уровне переопределения можно задать технологии по умолчанию, использующиеся при создании сущностей на этом уровне.

bem-toolsИнструменты

40

— работать с технологиями

— технологии по умолчанию

— шаблоны технологий

У любой технологии можно задать шаблон, который будет использоваться при создании.

bem-toolsИнструменты

41

— работать с технологиями

— технологии по умолчанию

— шаблоны технологий

— добавлять к имеющимся

Можно добавлять технологии к уже имеющимся сущностям.

bem-toolsИнструменты

42

— работать с уровнями переопределения

bem-tools позволяют работать с несколькими уровнями переопределения: …

bem-toolsИнструменты

43

— работать с уровнями переопределения

— при создании

…при создании сущности указывается на каком уровне это сделать; …

bem-toolsИнструменты

44

— работать с уровнями переопределения

— при создании

— при сборке

…при сборке указывается набор уровней, которые надо использовать.

bem-toolsИнструменты

45

— сборка проекта

bem-tools помогают собрать проект…

bem-toolsИнструменты

46

— сборка проекта

— при разработке

…во время разработки…

bem-toolsИнструменты

47

— сборка проекта

— при разработке

— для продакшена

…и для выкладки в продакшен.

Другие инструменты

48

Помимо bem-tools мы разрабатываем ещё другие инструменты, которые можно использовать в отрыве от БЭМ.

Работа с файламиИнструменты

49

— borschikgithub.com/veged/borschik

— setochkagithub.com/afelix/setochka

Инструменты для работы с файлами:

* Расширяемый сборщик текстовых файлов. Может использоваться для сборки CSS, JS и других файлов.

* Сеточка позволяет выделить CSS-свойств исходного CSS в отдельные файлы. Может использоваться для разбиения CSS-файла на несколько с вендорными префиксами.

ОптимизаторыИнструменты

50

— cssogithub.com/css/csso

— imgogithub.com/imgo/imgo

— svgo (в разработке)github.com/deepsweet/svgo

Мы разрабатываем оптимизаторы для разных форматов:

* структурный оптимизатор CSS * оптимизатор для PNG и JPEG * оптимизатор SVG (в разработке)

Парсеры / языкиИнструменты

51

— OmetaJSgithub.com/veged/ometa-js

— smakowikigithub.com/veged/shmakowiki

— gonzales (в разработке)github.com/afelix/gonzales

Мы разрабатываем парсеры для языков и сами языки:

* OmetaJS — объектно-ориентированный язык для построения парсеров * shmakowiki — диалект wiki, используем для своей документации * gonzales — быстрый парсер CSS (в разработке)

Библиотека блоков bem-bl

52

Мы разрабатываем библиотеку блоков bem-bl.

Она состоит из двух частей.

ЯдроБиблиотека блоков bem-bl

53

— шаблонизатор bemhtml

Первая часть это ядро, оно реализует технологии для облегчения работы с блоками.

Это шаблонизатор bemhtml, про который будет подробно рассказывать Вегед.

ЯдроБиблиотека блоков bem-bl

54

— шаблонизатор bemhtml

— фреймворк клиентского JavaScript

И фреймворк для написания клиентского JavaScript, про который будет отдельная секция докладов от Вовы, Вари и Саши.

ЯдроБиблиотека блоков bem-bl

55

— шаблонизатор bemhtml

— фреймворк клиентского JavaScript

— ядро — это блок!

ВАЖНО: Ядро это тоже блок и мы не навязываем его использование.

ЯдроБиблиотека блоков bem-bl

56

— шаблонизатор bemhtml

— фреймворк клиентского JavaScript

— ядро — это блок!

— можно заменить на свой блок

Можно этот блок и не использовать, например, если вы разрабатываете систему, где нельзя брать сторонний код.

Блоки для сайтовБиблиотека блоков bem-bl

57

— блоков мало

— демонстрация как делать свои блоки

Так же в библиотеке есть минимальный набор блоков, помогающий в реализации сайта.

Мы понимаем, что это не полноценный набор блоков для построения сайта.

Этот набор можно рассматривать как демонстрационный, на этом примере можно понять, как делать свои блоки.

Варианты использования БЭМ

58

Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использования и не стремится его получить.

Наоборот, мы рассматриваем БЭМ как набор правил, который каждая конкретная команда встраивает в свой процесс разработки и использует так, как удобно.

Давайте посмотрим на примерах.

Блоки в одном файле

59

У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.

.block

.block__elem

.block_size_l

.block__elem_size_l

Именование классовБлоки в одном файле

60

Начинаете именовать классы в своём проекте по БЭМ-схеме.

myfacebook/ styles.css scripts.js index.html

И верстаетеБлоки в одном файле

61

Используйте самую простую схему на файловой системе, когда реализация всех блоков лежит в одном файле соответствующей технологии.

При использовании этого варианта всё делается руками, без bem-tools.

Блоки в директории

62

Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков по файлам: …

blocks/ b-myblock.css b-myblock.js b-yourblock.css b-yourblock.js

Блоки в директории

63

И начинаете использовать bem-tools для сборки проекта.

Не обязательное в файлах

64

Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах…

blocks/ b-myblock/ b-myblock_mod_val1.css b-myblock__opt-elem.css b-myblock__opt-elem_mod_val1.css b-myblock.css

Не обязательное в файлах

65

…можно вынести их реализацию в отдельные файлы, чтобы подключать только то, что нужно.

Модификаторы в директориях

66

Если модификаторов много…

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

…для каждого можно сделать отдельную директорию. Это разгрузит корневую директорию блока.

Элементы/модификаторыв директориях

68

Самый сложный в разработке, но самый понятный вариант по конечной структуре, когда ВСЕ элементы блока и ВСЕ модификаторы имеют свои директории.

blocks/ b-myblock/ _mod/ b-myblock_mod_val1.css __elem/ b-myblock__elem.css b-myblock.css

Элементы/модификаторыв директориях

69

Этот вариант самый наглядный, при взгляде на файловую систему можно увидеть всю структуру блока.

Можно упростить его, вынося в директории только необязательные элементы, а код обязательных элементов класть в основной файл блока.

Будущее

70

Итак, это то, что у нас есть уже сейчас.

Дальше я расскажу о наших планах на ближайшие полгода/год и в чём нам можно помочь, ибо планов гораздо больше, чем мы успеваем сделать.

Полный стек

71

Мы хотим построить полный стек разработки сайтов.

Полный стек

72

— сложные системы

Чтобы можно было строить сложные системы используя наши технологии.

Полный стек

73

— сложные системы

— методология для всех частей системы

Для всех частей системы должны быть определены правила, как она строится.

Полный стек

74

— сложные системы

— методология для всех частей системы

— инструменты для всех частей системы

Эти правила должны быть подкреплены инструментами.

Полный стек

75

— сложные системы

— методология для всех частей системы

— инструменты для всех частей системы

— много работы по документации

У нас практически уже всё есть для этого, предстоит большая работа по документированию и доведению до состояния, когда внешние люди могут использовать весь стек технологий для своей разработки.

Сайт bem.info

76

До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ из первых рук.

Сайт bem.info

77

— вся информация на одном сайте

В ходе работы над этим сайтом мы делаем документацию по использованию БЭМ.

Сайт bem.info

78

— вся информация на одном сайте

— английский / русский

Сайт будет на двух языках, русском и английском, с возможностью добавления других языков.

Как помочь?Сайт bem.info

79

Чем нам можно будет помочь:

Как помочь?Сайт bem.info

80

— Перевод документации на другие языки

— Поддержка актуальности перевода

Перевод документации на другие языки с поддержкой актуальности этого перевода по мере изменения оригинальной документации.

Как помочь?Сайт bem.info

81

— Перевод документации на другие языки

— Поддержка актуальности перевода

— Документация по настройке (Windows)

— Туториалы по внедрению БЭМ на сайты

* написание документации * по настройке окружения (например, в Windows) * туториалы по внедрению БЭМ в сайты, где он не используется

Инструменты

82

В разработке bem-tools мы сейчас сосредоточены на сборке проекта.

При этом есть вещи, которые мы хотим сделать в bem-tools помимо этого и тут может пригодиться ваша помощь.

bem moveИнструменты

83

— перемещение сущностей между уровнями

— переименование сущностей

— блок в элемент и наоборот

— перемещение модификаторов

* перемещение сущностей между уровнями переопределения с учётом настроек уровней переопределения * переименование сущностей * превращение блоков в элементы и наоборот * перемещение модификаторов * между блоками и элементами

bem removeИнструменты

84

— удаление сущностей

— с поиском использования

Корректное удаление сущности с поиском всех случаев её использования.

bem lintИнструменты

85

— проверка блоков

Сделать bem lint, проверяющий целостность блока, что все сущности описаны правильно и лежат на своих местах.

bem lintИнструменты

86

— проверка блоков

— аналог jslint / jshintclubs.ya.ru/yasubbotnik/395

Аналог jshint, про него рассказывать Митя Щадей на Субботнике в Киеве.

Инфраструктурабиблиотек блоков

87

Мы работаем сейчас над инфраструктурой библиотек блоков…

Инфраструктура библиотек блоков

88

— создавать свои библиотеки блоков

— документация к библиотеке

— changelog'и

— скрипты миграции между версиями

— сайт с примерами и документацией

…неким набором правил и инструментов, которые позволят разработчикам

* создавать свои библиотеки блоков * писать к ним документацию * скрипты миграции с версии на версию * changelog'и * построить сайт для библиотеки блоков с живыми примерами и документацией

Библиотеки блоков

89

После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашу текущую библиотеку bem-bl на несколько.

Библиотеки блоков

90

— много вместо одной

— логическая целостность

— независимое использование

Мы хотим сделать независимый набор библиотек блоков, каждая из которых будет обладать логической целостностью, чтобы их можно было использовать независимо.

Зачем?Библиотеки блоков

91

— разные мейнтейнеры

— разные релизные циклы

— проще развивать и поддерживать

Зачем это нужно делать:

* много маленьких библиотек проще раздать в поддержку разным людям * маленькие библиотеки можно выпускать с разной скоростью * проще развивать и поддерживать

ПримерыБиблиотеки блоков

92

— bl-coreкорневые блоки на которых строятся последующие

— bl-genericблоки, которые часто встречаются в вёрстке страниц: ссылки, иконки

— bl-formблоки для реализации форм, в том числе контролы форм

Можно выделить в отдельные библиотеки ядро, блоки общего назначения, для работы с формами…

ПримерыБиблиотеки блоков

93

— bl-layoutтиповые раскладки страниц

— bl-searchпоисковая форма и выдача результатов поиска

— bl-Oashподключение флеша на страницу

— bl-authаутентификация пользователей

…типовые раскладки страниц, поиск по сайту, работа с флешем, аутентификация пользователей и так далее.

Среда разработки

94

И на десерт самое вкусное :)

Как сейчасСреда разработки

95

— работа с файловой системой

— поддержка целостности

— руками

— bem-tools

Сейчас разработчик, использующий БЭМ слишком близко находится к файловой системе и тратит часть своего времени на поддержание целостности проекта на файловой системе руками или с помощью bem-tools.

Как хотимСреда разработки

96

— работа с БЭМ, а не файлами

— работа на всех платформах

— разработка в браузере!

— доступ к коду сайта рядом с самим сайтом

— Cloud9?

Нужна среда для разработки, которая будет знать про БЭМ, про уровни переопределения и помогать разработчику писать код так, чтобы он был хорошо структурированным.

При этом эта среда не должна быть привязана к какой-то определённой платформе.

В идеале она вообще должна работать в браузере.

По одному адресу своего сайта разработчик редактирует код, а по другому адресу смотрит результат.

Мы сейчас смотрим в сторону Cloud9.

Подведём итог

97

Итак, давайте подведём итог.

НастоящееПодведём итог

98

— Методология

— Инструменты

— Библиотека блоков

— Шаблонизатор bemhtml

— JavaScript фреймворк i-bem.js

Мы сегодня рассмотрели настоящее БЭМ, увидели, что он состоит из:

* Методологии * Инструментов * Библиотеки блоков * Технологий для шаблонизации и построения клиентского кода на JavaScript

БудущееПодведём итог

99

— Полный стек

— Сайт bem.info

— Развитие инструментов

— Библиотеки блоков

— Среда разработки

И попробовали заглянуть в ближайшее будущее:

* Мы строим полный стек * Будем сделать сайт со всей информацией * Дальше развивать инструменты * Делать библиотеки блоков * И среду для разработки

@harisov

#b_ #yasubbotnik

Виталий Харисовvitaly@yandex-team.ru

Спасибо за внимание.

Я готов ответить на ваши вопросы сейчас и в перерывах между докладами.