Антон Виноградов — БЭМ on rails
DESCRIPTION
В докладе я расскажу о том, как пришел к использованию БЭМ, и почему Ruby on Rails просто создан для него. Также я объясню, как и зачем писать собственные инструменты для работы с БЭМ-методологией в рамках проектов на RoR. Мы обязательно заглянем в исходники, поговорим о планах и разберем пару примеров. Я покажу генерацию статики, зависимостей — и как pipeline помогает в этом нелегком деле. Также расскажу об интеграции RoR-проектов, сделанных в БЭМ-методологии, с проектами на других технологиях, использующих bem-tools и другие инструменты Яндекса.TRANSCRIPT
БЭМ on Rails
Антон ВиноградовРазработчик интерфейсов
BEMup, YaC, Москва, 2 октября 2013 года
Путь к БЭМ
● много проектов
● мало времени
● нехватка ресурсов
● зоопарк технологий
● DRY
● совесть
2
RIGHTWAY
В начале было так
YII WP
И все были счастливы. Но ...3
Некоторое время спустя
YII
WP
NODE
Rails
RailsRails
Rails
Rails
Rails Rails
Rails
Rails
Rails
Rails
NODE
NODE
NODE
Аааа-ааа-аа-а!!!
Rails
4
We need a superhero!
БЭМRails
Rails
RailsRails
Rails Rails
Rails
Rails
Rails
Rails
NODENODE
5
Адаптация: Rails
6
bem-tools + V8Минусы:
- костыли для рендеринга- танцы с assets pipeline- это сбоку- пока еще сыро и как-то боязно- не ruby way
Плюсы:- отличный инструмент- постоянно растущее сообщество
7
Свое решение
Плюсы:- привычный шаблонизатор- сборка статитики остается на pipeline- часть проекта (интеграция с Rails)- рубисты тоже в теме- 5 секунд на подключение к проекту
Минусы:- работает не все- смахивает на велосипед
8
gem “bem-on-rails”
9
Как работает
Кастомизируется все (легко!): префиксы, файловая структура, технологии, оптимизаторы и еще куча всего.
10
Работа с сущностями
11
ПримерСоздадим блок для кнопки и элемент для текста внутри.
12
Другая файловая структура
13
Получаем некую структуру блока. Элементы и модификаторы находятся в своих директориях.
Описание сущностейМожно описывать шаблоны для сущностей в различных технологиях. И использовать через привычный параметр -Т.
14
Блоки внутри блоковСоздадим еще два блока: input и search.
15
Профит
16
Модификаторы и миксы
17
F5
18
Статус: В работе
19
Сейчас работает
● Миксы
● Моды
● Кастомные классы и атрибуты
● Теги
● Уровни переопределения
● Работа с сущностями на файловой системе
20
Coming soon
● i-bem.js в html
● deps.js
● Доопределение шаблонов на уровнях
● Отказ от Thor
21
Статика: Pipeline
22
CSS
Стандартные директивы Sprockets.Используйте applications файлы как конфиги.
23
JS
23
Уровни переопределения
25
Формируем библиотекуИспользуйте гит репозитории для разных уровней и библиотек блоков.
26
Эпилог
27
Rails - идеальны для БЭМ.
RubyGems
Slim
Bootstrap28
Антон ВиноградовРазработчик интерфейсов
awinogradov
awinogradov
winogradov_anton
verybigman
Stay BEMed!
bit.ly/bem-on-rails
bit.ly/bem-example
bit.ly/csso-rails
29