Виталий Харисов "Настоящее и будущее БЭМ"
-
Upload
yandex -
Category
Technology
-
view
1.561 -
download
3
description
Transcript of Виталий Харисов "Настоящее и будущее БЭМ"
Руководитель разработки на Украине
Я.Субботник, Москва, 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
Виталий Харисов[email protected]
Спасибо за внимание.
Я готов ответить на ваши вопросы сейчас и в перерывах между докладами.