Войти с помощью github

Мы продолжаем серию интенсивов для новичков на целый день!

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

Очень просим вас максимально оперативно зарегистрироваться.

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем перейдем к практике на БЭМ-платформе (bem-express) и React с использованием bem-react-core.

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

Дальше мы обсудим разработку проекта на React.js и научимся описывать React-компоненты в декларативном стиле. Для вас подготовлено плавное погружение в bem-react-core. Мы на практических примерах рассмотрим, какие преимущества получит ваш React-проект с использованием этой библиотеки.

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

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

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

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

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!

Мы продолжаем серию БЭМапов!

Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой bem-react-core. Вы узнаете, как и зачем в одном проекте совмещать React и bem-react-core, как создавать блоки и элементы, работать с модификаторами и использовать уровни переопределения.

Мы приглашаем всех, кто уже знаком с React и хочет привлечь БЭМ к своему проекту! Регистрация открыта!

Stay BEMed!

Мы продолжаем серию митапов для новичков. На этот раз проводим интенсив на целый день!

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

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем на практическом примере рассмотрим разработку проекта на React.js и bem-react-core.

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

Дальше мы обсудим разработку проекта на React.js и научимся описывать React-компоненты в декларативном стиле. Для вас подготовлено плавное погружение в bem-react-core. Мы на практических примерах рассмотрим, какие преимущества получит ваш React-проект с использованием этой библиотеки.

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

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

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

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

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!

UPD: Опубликовали видео: https://www.youtube.com/watch?v=BuKeVrQmVKI&t Мы продолжаем серию встреч для новичков!

На этот раз Владимир Гриненко проведет мастер-класс, на котором:

  • Сверстает макет с нуля по БЭМ-методологии, попутно объясняя ее принципы.
  • Покажет на примере сверстанного макета, как перевести любой БЭМ-проект на React.

Вас ждет максимум практики и примеров!

Регистрация уже открыта: https://events.yandex.ru/events/bemup/02-february-2018/.

Stay BEMed!

UPD Опубликовали видео доклада про bem-react-core: https://youtu.be/2pKg-xGg1gI?t=38

Ты должен прийти, если:

  • только начинаешь верстать или знакомится с БЭМ;
  • верстаешь давно, но хочешь перейти на сторону, где есть печеньки;
  • используешь БЭМ только для CSS и уже готов двигаться дальше;
  • хочешь узнать, как получить все плюсы БЭМ-проекта.

В программе:

  • доклад от @tadatuta
  • секция вопросов/ответов с @veged, @tadatuta и @vithar
  • рассказ о bem-react-core от @awinogradov

Регистрация уже открыта: https://events.yandex.ru/events/bemup/15-december-2017/

Stay BEMed!

15 сентября в Екатеринбурге состоится очередная встреча БЭМ-сообщества — BEMup!

Мы ждем вас в уютном офисе Яндекса, где Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React.

Если вам близка идея БЭМ, приходите! Будем говорить про БЭМ, React и фронтенд в целом.

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

Регистрация открыта!

Stay BEMed!

PS: По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.

UPD: Опубликовали видео с митапа https://www.youtube.com/watch?v=o1MeyEvpDTg

11 августа в 19:00 в питерском офисе Яндекса пройдет еще один митап по БЭМ!

Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React. Вы получите возможность изменять любые аспекты поведения компонентов без добавления лапши из if-ов в коде. В точности так, как это делается в CSS.

Вы сможете:

  • Создать компонент с разным набором признаков (в том числе и с разной разметкой!).
  • Дешево проводить AB-тестирование и эксперименты.
  • Настраивать компонент под окружение/платформу, переиспользуя общий код.

Кроме того, мы ответим на любые ваши вопросы, связанные с БЭМ и работой фронтендера в Яндексе.

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

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

Регистрация открыта!

Stay BEMed!

UPD: Опубликовали скринкаст митапа!

30 июня в московском офисе Яндекса пройдет очередная встреча БЭМ-сообщества.

В этот раз мы решили последовать общему реактовому тренду и ответить на ваши вопросы про разработку на БЭМ и React. Мы расскажем про нашу библиотеку bem-react-core и про всё, что успели сделать в этом направлении, ответим на ваши вопросы про React/БЭМ и не только.

По традиции на БЭМапе мы ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.

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

https://www.youtube.com/watch?v=ztDWggzH8W4

Stay BEMed!

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

Очередной BEMup пройдет в пятницу 30 сентября в московском офисе Яндекса c 19:00 до 22:00. В теплой и дружеской атмосфере команда БЭМ поделится планами и идеями на ближайшее будущее.

Предварительная программа:

  • новости из мира БЭМ — последние релизы, планы и идеи (включая пару премьер);
  • подробный рассказ про модульную сборку на gulp;
  • рассказы участников сообщества о решениях, библиотеках и инструментах, которые могут облегчить жизнь разработчика и работу в предметной области БЭМ;
  • ответы на животрепещущие вопросы и общение с командой.

Если у вас есть непреодолимое желание выступить на BEMup со своим докладом — пишите нам на info@bem.info.

Форма регистрации: https://events.yandex.ru/events/bemup/30-september-2016/. Присоединяйтесь!

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

Привет!

Мы приготовили для вас демо-проект на ASP.NET MVC, иллюстрирующий решение типовых задач с помощью БЭМ-инструментов.

В readme подробно описано, как всё работает. Вы можете не только посмотреть исходный код, но и запустить демо-приложение на своем компьютере, чтобы попробовать в действии!

Завтра буду рассказывать про БЭМ и ASP.NET на Я.Субботнике. Подключайтесь к трансляции!

Привет!

18 августа в 19:00 мы с нашими друзьями из Front-end Science проведем очередной БЭМап в Киеве!

В программе:

  • Последние наработки и новости из мира БЭМ, а также ближайшие планы.
  • bem-sdk: сборка без bem-tools или ENB.
  • БЭМ в динамике: express-приложение с BEMTREE + BEMHTML.
  • Свободное общение: ваш опыт разработки с БЭМ.
  • Ответы на вопросы.

Подробности и форма регистрации здесь.

Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.

На вебинаре мы расскажем вам:

  • Про проблемные места в имеющихся инструментах сборки и удобство модульного подхода.
  • О целях организаций bem-sdk и gulp-bem на GitHub.
  • Про интроспекцию своими руками по файлам компонентов ваших проектов и библиотек с помощью библиотеки bem-walk.
  • О построении и использовании графа зависимостей и вычислении требуемых для сборки сущностей в различных технологиях (js, css, шаблоны) с помощью библиотеки bem-graph.
  • О построении списка итоговых файлов компонент по .deps.js-файлам компонент с помощью bem-deps и bem-walk.
  • Про сборку итоговых файлов для браузера из списка файлов компонент, полученных на предыдущем шаге, с помощью библиотек gulp-bem-*.

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

Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.

Новый вебинар по БЭМ совсем скоро!

17 мая в 19:00 мы поговорим об использовании BEMHTML и BEMTREE. Расскажем, как все это можно использовать с любыми источниками данных (файловой системой, базой данных, HTTP API или бэкендом на любом языке).

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

Затронем работу как на сервере, так и на клиенте.

Обратите внимание, трансляция начнется в 19:00 17 мая на отдельной странице.

Задача научиться рендерить Virtual DOM из текущих шаблонов на bemhtml

Состав команды: @nik-kor @amel-true @khvostov @voischev @awinogradov. Все супер котаны!)

Результат

  1. Написали движок для рендера bemhtml шаблонов и положили аккуратно в PR https://github.com/bem/bem-xjst/pull/235. Экспортит атрибуты в виде массива вида ['div', {...attrs}, content, ...anotherContent].
  2. Сделали адаптер для React https://github.com/bem-contrib/react-xjst, который использует бандл из шаблонов в bemhtml и инстанс React для создания Virtual DOM , с помощью библиотеки react-dom.
  3. Начали доставлять bem-components в React, используя bemhtml шаблоны и стили. Собирается с помощью Webpack и специального лоадера для него https://github.com/alfa-bank-dev/bem-loader, который резолвит все нужное по депсам через bem-deps. Можно дописывать bemhtml шаблоны на уровне проекта как и раньше;)
  4. Запилили песочницу для bem-xjst с переключателем движков: BEMHTML, BEMTREE, VIDOM – https://github.com/bem/bem-xjst/pull/238. Одни шаблоны на все времена, тестить, сравнивать, все, что душе угодно можно делать.
  5. Так же планировали поработать над интеграцией с Redux. Но так сложилось, что задача решилась автоматически. На уровне React ничего не изменилось, поэтому данные как и раньше доезжают до компонентов, где формируется bemjson для функции рендера.

Превью готовых компонентов http://awinogradov.github.io/react-xjst-example/ и песочницы http://vladkhvo.github.io/.

Далее

Зарелизить react-components – библиотеку, которая использует шаблоны и стили из bem-components, но логику React в БЭМ-терминах.

Ура?;) Теперь мы имеем одни шаблоны и стили для параллельных стеков. Поддерживаем в одном месте и в ус не дуем! Предположительно можно написать подобных адаптеров и для других технологий;)

Не пропустите два доклада про БЭМ на сегодняшнем Я.Субботнике.

В 17:30 @miripiruni расскажет про только-только вышедшую версию bem-xjst. А сразу после него я расскажу про новости из мира БЭМ и постараюсь ответить на все ваши вопросы.

PS: Остальные доклады тоже обязательно посмотрите! ;)

Введение

На прошлых вебинарах с Димой Белицким мы сверстали простую страницу следуя БЭМ-методологии: написали HTML и CSS, немного декларативного JavaScript, а также настроили сборку с помощью gulp.

В этом вебинаре мы получим BEMJSON имеющихся страниц, напишем простые BEMHTML-шаблоны и посмотрим на некоторые интересные возможности BEMHTML.

Итак, немного про декларативные шаблоны.

Все привыкли к декларативной природе CSS, поэтому удобно провести аналогию.

Допустим, у нас есть список:

<ul class="menu">
  <li class="menu__item">
    Привет
  <li>
  <li class="menu__item">
    BEM!
  <li>
</ul>

Чтобы задать определенный внешний вид всем элементам списка можно написать CSS:

.menu__item {
    background: red;
}

А если же хочется изменить связку ul + li, например, на nav + a? Что если это можно было бы сделать по аналогии с CSS, написав соответствующий «селектор» и просто задать другое значение свойству tag?

Так это выглядит в BEMHTML:

block('menu')(
  tag()('nav')
)

block('menu').elem('item')(
  tag()('a')
)

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

BEMJSON

BEMJSON — это описание структуры страницы в терминах БЭМ на JavaScript с зарезервированными полями. Указанный ранее список в BEMJSON описывается так:

({
  block: 'menu',
  tag: 'ul',
  content: [
    {
      elem: 'item',
      tag: 'li',
      content: 'Привет'
    },
    {
      elem: 'item',
      tag: 'li',
      content: 'BEM!'
    }
  ]
})

BEMJSON компилирутся в HTML.

Избавиться от копипасты tag: 'li' поможет BEMHTML-шаблон.

block('menu')(
  tag()('ul')
)

block('menu').elem('item')(
  tag()('li')
)

BEMHTML-шаблон накладывается на BEMJSON по аналогии с тем, как CSS накладывается на DOM-дерево. На выходе — получаем HTML.

BEMJSON для наших страниц

Код — 01858d

Если есть HTML, написанный по БЭМ, то BEMJSON можно получить автоматически с помощью пакета html2bemjson

npm install html2bemjson

Сборка

Код — eef725

Далее нужно дотюнить сборку:

  • gulp научился собирать зависимости по BEMJSON, а не HTML
  • добавился таск для компиляции HTML по BEMJSON с использованием BEMHTML-шаблонов

    Вычисления во время компиляции в BEMJSON

Код — 51ec21

BEMJSON представляет собой plain JavaScript, поэтому позволяет любые вычисления во время компиляции — то, чего не достает HTML.

Например,

({
  block: 'menu',
  // построим BEMJSON списка динамически из массива текстов элементов
  content: [
    'Привет',
    'BEM!'
  ].map(function(text) {
    return {
      elem: 'item',
      content: text
    };
  })
})
({
  block: 'menu',
  // определим массив текстов динамически,
  // который будет разным при каждой генерации итогового HTML
  content: (function() {
    return Math.random() > 0.5 ? ['Привет'] : ['Привет', 'BEM!'];
  }()).map(function(text) {
    return {
      elem: 'item',
      content: text
    };
  })
})

Напишем простые BEMHTML-шаблоны

Код — 17d9a6

Упростим полученный автоматической конвертацией BEMJSON:

  • вынесем всю HTML-обвязку страницы в блок page
  • упростим представление меню в BEMJSON, сгенерировав BEMJSON самого списка элементов в шаблоне
  • напишем простой шаблон для ссылки

    Специальные возможности BEMHTML

Код — bad312

Шаблонизатор BEMHTML имеет некоторые интересные возможности:

Переопределение в зависимости от входных данных

Например, блок link должен быть представлен в HTML span-ом, а не ссылкой, если в BEMJSON не было поля url.

Переопределение на уровне переопределения

Например, менюшка на странице с Поттером должна быть в HTML представлена тегом ol, а на всех других страницах — ul. Для этого достаточно определить блок меню на уровне potter.blocks. После сборки всех шаблонов в один файл получим:

// common.blocks
block('menu')(...)

// potter.blocks
block('menu')(...)

По аналогии с CSS, последнее «правило» перебивает предыдущее.

Привет, хочу рассказать о результатах нашей команды на минувшем хакатоне.

Со мной в команде были Сергей Бережной, Вадим Яловенко , Алексей Хлебаев и Александр Потапенко.

В мире JS и CSS написано достаточное количество линтеров кода, которые делают нашу разработку более удобной и надежной, но до сих пор не было реализовано ни одного линтера, который что-то знает про БЭМ.

И вот это послужило основной причиной для написания БЭМ-линтера, который из коробки знает про специфику БЭМ-проектов.

За несколько дней на хакатоне мы реализовали ядро линтера – bemhint, предоставляющее API для написания внешних плагинов, через которые реализуются проверки БЭМ-сущностей проекта.

Реализованные плагины:

1.Два плагина, которые позволяют интегрировать jshint и jscs в БЭМ-проект через bemhint:

Эти два плагина позволяют через конфиг bemhint-а конфигурировать и запускать соответственно jshint и jscs. Зачем? Ответ очень прост: jshint и jscs не дают возможности написать отдельный конфиг для проверки, например, *.deps.js-файлов и отдельный конфиг для проверки *.js-файлов. В свою очередь bemhint предоставляет возможность конфигурировать не маски файлов, а технологии, то есть в данном случае технологии deps.js и js.

2.Плагин для проверки ненужных технологий в проекте – bemhint-plugins-redundant-techs.

Плагин будет полезен для тех проектов, которые мигрируют с одной технологии на другую, например, bemhtmlbemhtml.js или cssstyl.

3.Плагин, который умеет проверять наличие неправильных селекторов в технологии stylbemhint-plugins-check-file-entity (у плагина появилась документация, поэтому подробнее можно почитать на github).

Мы создали тестовый репозиторий bemhint-test-prj, который демонстрирует работу bemhint и выше описанных плагинов.

В конце хочу поблагодарить всех ребят из нашей команды и организаторов хакатона. Было очень интересно :)

Привет, пришла и моя очередь рассказать о содеянном на минувшем хакатоне.

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

Несмотря на невнятную речь, ко мне присоединились очень крутые ребята, без которых мы бы не продвинулись так далеко: @arikon, @zxqfox, @awinogradov, спасибо вам огромное!

Ставь задачу правильно

Утверждение «сборка БЭМ-проектов с помощью любого инструмента» звучит слишком абстрактно.

В двухдневный формат хакатона такая задача совсем не укладывалась. Надо было сформулировать что-то более конкретное. Поэтому мы решили, что критерием успеха будет сборка project-stub с помощью gulp.

Сам gulp был выбран практически случайно. Важно было доказать гипотезу о сборке с помощью любого инструмента. На эту роль gulp подходит как нельзя лучше: он популярен, прост, да и ребята из соседней команды уже решили делать сборку с помощью webpack.

Готовь сани летом

На самом деле основная работа была сделана заранее.

Специфика сборки БЭМ проектов заключается в организации уровней переопределения и использовании зависимостей блоков. Подробнее об этом можно почитать на bem.info.

Необходимость модульной сборки была сформулирована уже давно. На прошлогоднем хакатоне мы решили задачу интроспекции уровней — bem-walk.

Кроме того, к этому хакатону я написал прототип модуля для работы с зависимостями блоков — bem-deps.

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

Результаты

Проект: @bem/gulp.

Сборка project-stub: ветка feature/gulp

Ничто не опишет проект лучше, чем его API. Поэтому без слов пример того, что у нас получилось.

import gulp from 'gulp';
import bem from '@bem/gulp';
import concat from 'gulp-concat';
import merge from 'gulp-merge';
import bemhtml from 'gulp-bemhtml';
import stylus from 'gulp-stylus';
import postcss from 'gulp-postcss';
import postcssUrl from 'postcss-url';

// Создаём хелпер для сборки проекта
var project = bem({
    bemconfig: {
        /* загружаем информацию об уровнях с помощью `bem-config` */ 
    }
});

// Создаём хелпер для сборки бандла
var bundle = project.bundle({
    path: 'desktop.bundles/index',
    declPath: 'index.bemdecl.js'
});

gulp.task('css', function () {
    return bundle.src({tech: 'css', extensions: ['.css', '.styl']})
        .pipe(stylus())            
        .pipe(postcss([
            postcssUrl({ url: 'inline' })            
        ]))
        .pipe(concat(`${bundle.name()}.css`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('js', function () {
    return
        merge(
            gulp.src(require.resolve('ym')),
            bundle.src({ tech: 'js', extensions: ['.js', '.vanilla.js', '.browser.js'] })
        )
        .pipe(concat(`${bundle.name()}.js`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('bemhtml', function () {
    return bundle.src({ tech: 'bemhtml.js', extensions: ['.bemhtml.js', '.bemhtml'] })
        .pipe(concat(`${bundle.name()}.bemhtml.js`))            
        .pipe(bemhtml())
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('build', gulp.series('css', 'js', 'bemhtml'));
gulp.task('default', gulp.series('build'));

По скорости в текущем состоянии сборка project-stub оказалась соизмеримой со сборкой на стеке ENB.

Что дальше?

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

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

Как только всё будет готово, обязательно расскажем вам. А самое главное — будем внедрять в реальные проекты и реагировать на фидбэк.

Общие модули bem-walk и bem-deps оказались универсальными, и в каком-то смысле уже проверенными в бою. Поэтому, кроме использования их для сборки на gulp и webpack, мы планируем внедрить их в ENB.

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

Присылайте свои идеи и задавайте вопросы на форуме или в ишьюсах к репозиториям из организации gulp-bem.

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

12-13 декабря у нас был хакатон по разработке инструментов БЭМ. Я участвовал в команде переосмысления и разработки прототипа bem-tools, напишу, что у нас получилось.

В нашей команде было 6 человек:

Решили, что bem-tools надо делать по архитектуре «минимальное ядро + плагины». Ядро не умеет ничего, кроме общей обвязки про CLI, поиска локально или глобально установленных пакетов bem-tools-something и запуска указанной пользователем команды.

Собственно, так и получилось. Весь код ядра умещается на один экран и, кажется, развивать тут дальше нечего.

Плагин предоставляет JS API, которое ничего не знает про CLI (файл index.js в корне) и CLI интерфейс (файл cli.js). Это позволяет рассматривать каждый плагин, как отдельный пакет, который можно использовать независимо от всех остальных.

Мы успели сделать минимальные версии bem-tools-init, bem-tools-make, bem-tools-create и bem-tools-find. А так же вспомогательные bem-fs-scheme и bem-config. Миша Баранов делал плагин для IntelliJ IDEA для создания БЭМ-сущностей из интерфейса IDE.

Как это обычно бывает после хакатона, всё в сыром состоянии, использовать в работе это всё пока нельзя, но зато можно успеть повлиять на API и помочь нам с доработками.

Обо всём этом ниже подробнее.

Скачиваем bem-tools:

npm i bem/bem-tools#WIP
bem

Если всё прошло успешно, после запуска bem увидим:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem [OPTIONS] [ARGS]


Options:
  -h, --help : Help
  -v, --version : Version

Установим команду init:

npm i bem-incubator/bem-tools-init

Запускаем ещё раз bem и видим, что появилась команда init:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  init : Init

Options:
  -h, --help : Help
  -v, --version : Version

Запуск bem init my-test-project создаст my-test-project и в ней файл bemconf.json с содержимым

{
   "root": true
}

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

Для работы с конфигом сделали простую библиотеку bem-config (https://github.com/bem-incubator/bem-config/) и накидали примерную структуру файла конфигурации. Файл конфигурации ищется в текущей директории и выше до корня. Используется ближайший найденный, также к нему добавляется ~/.bemconf.json.

Хотим, чтобы команда init была более умной, например, могла помимо пустого проекта создать заготовку по шаблону. Как вариант, клонировала project-stub. Сейчас это пример минимального плагина, можно использовать его для написания своего.

Следующая не менее минималистичная команда — make:

npm i bem-incubator/bem-tools-make

Просто вызывает enb :)

Ещё мы сделали прототип команды create:

npm i bem-incubator/bem-tools-create

Она поддерживает, как «классический» синтаксис bem-tools:

bem create -b b1 -t css -t js -l .
bem create -b b2 -t css -t js -l .

так и более простой:

bem create {b1,b2}.{css,js}

Есть шаблоны для технологий по умолчанию. Можно задать свои в конфиге, получаемом через bem-config. Они могут быть локальными для уровня, для проекта или браться из конфига пользователя.

Для построения имён БЭМ-сущностей используется bem-naming, для путей на файловой системе — bem-fs-scheme (пока реализована только nested схема, но легко можно добавить другие). И то, и другое можно задать в файле конфигурации.

Есть ещё что доделывать, постепенно доработаем и выпустим в рамках bem-tools 2.0.

Андрей Кузнецов и Илья Исупов написали прототип команды find (https://github.com/bem-incubator/bem-tools-find/), которая позволяет искать БЭМ-сущности и показывать их в разном виде.

Например, нам нужно найти все файлы про модификатор type для блока input:

bem find -b input -m type
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

или то же самое, но в виде дерева:

bem find -b input -m type -v tree
tree
└─┬ /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks
  └─┬ input
    └─┬ _type
      ├─┬ password
      │ ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
      │ └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
      └─┬ search
        ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
        └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

Миша Баранов делал плагин для Intellij IDEA (WebStorm, PhpStorm, etc), который будет позволять создавать БЭМ-сущности из контекстного меню (https://github.com/bem-incubator/bem-tools-intellj-plugin).

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

Content menu

Dialog

Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё bem rm, bem cp, bem mv, а там, глядишь, и сообщество подтянется со своими плагинами. ;)

Привет,

хочу рассказать о результатах нашей команды на минувшев хакатоне в рамках Я 12-13 декабря.

Наша команда состояла из Бориса Сердюкова, Константина Гладких, Евгения Константинова и меня и в рамках хаккатона мы решили попробовать собрать бэм-проект project-stub на webpack. Забегая вперед, могу сказать, что это получилось и результат можно посмотреть здесь: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js

Так как webpack - модульный сборщик, который рассчитан на работу с JavaScript модулями и умеет подключать сторонние технологии как js-модули, то мы решили, что в качестве входной точки для сборки у нас будет статический bemjson файл, а на выходе было желание получить список реальных файлов, которые участвуют в сборке. Все вот это удалось свести к цепочке лоадеров:

{
  test: /\.bemjson.js$/,
  loader: 'bemdecl-to-fs!deps!bemjson?-stringify'
}

которые на выходе возвращают вот такой результат:

require('./libs/../b.js');
require('./libs/../b.styl');
// and etc

На мой взгляд, это довольно крутой результат, так нам удалось свести всю специфичность БЭМ методологии, связанную с депсами, к простой композиции лоадеров, что позволяет использовать стандартные решения для популярных технологий. Например, стили собрать можно как-то так: http://webpack.github.io/docs/stylesheets.html

Так как мы собирали проект на bem-core, то для JS модулей мы использовали ymodules-loader. Вопрос с шаблонизатором решили частично, остановились на bh и решили попробовать написать плагин для webpack, который будет превращать исходный bemjson в статический html, что сейчас работает.

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

Также в проекте есть webpack-dev-server, который вотчит изменения и кэширует результаты сборки.

Сам конфиг получился такой: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js Также решили сгруппировать наши технологии в рамках организации https://github.com/bempack

Скажу сразу, что текущие реализации лоадеров еще не готовы к использованию в продакшене, но мы работаем над этим. В планах, есть желание дополнить project-stub примерами с локализацией, дополнить лоадеры тестами и документацией. Также хочется поддержать шаблонизацию на bemhtml, когда это будет возможно.

В конце хочу поблагодарить ребят из тулзов и лего, которые консультировали нас по бэм-предметной области и создали довольно много интересных инструментов, которые упростили нам жизнь, и ребят из своей команды. Было весело :)

p.s. для интересующихся по webpack'у есть довольно хороший скринкаст: https://learn.javascript.ru/webpack-screencast

На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в БЭМ. В этот раз — 16 декабря в 17:00 — мы расскажем и покажем, что декларативно можно писать не только стили и шаблоны, но и код на JavaScript — в том числе и для уровней переопределения. Применяется i-bem — специальный JavaScript-фреймворк для БЭМ.

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и знаком с командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git и node.js.

Чтобы стать участником, пожалуйста, зарегистрируйтесь. Регистрация завершится 15 декабря в 16.00.

Обратите внимание, трансляция будет не на этой странице. За день до вебинара мы пришлём напоминание на электронную почту, указанную при регистрации, а за час до начала — индивидуальную ссылку на трансляцию.

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

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

Если у вас есть комментарии или предложения, не стесняйтесь делиться ими здесь.

Подробности и форма регистрации.